kia-ml/src/screens/create/create-screen.js

Kia

import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Text, View, TextInput, FlatList, TouchableOpacity } from "react-native";
import { BaseScreen } from '../base-screen';
import * as styles from "./create-style";
import { isEmptyString, isValidHttpUrl } from '../../utils/utils';
import { useStores } from "../../models/root-store/root-store-context";
import { useNavigation } from '@react-navigation/native';
import { createRequestPreTransformer } from "../../services/transformers/request-transformer";
import { TouchableKiaIcon } from '../../components/icon/touchable-icon';
import { Icons } from '../../config/icons';
export const CreateScreen = observer(function CreateScreen() {
  const navigation = useNavigation();
  const createStore = useStores().createStore;
  const initQ = [];
  var showToast = undefined;
  const steps = ["title", "method", "paste", "jobs", "summary_type", "questions"];
  const validations = {
    title: () => {
      if (title.trim().length === 0) {
        if (showToast) showToast("Please enter title", "error");
        return false;
      }

      return true;
    },
    method: () => true,
    paste: () => {
      if (content.trim().length === 0) {
        if (showToast) showToast("Please enter content/link", "error");
        return false;
      }

      if (pasteMethod !== "text") {
        if (!isValidHttpUrl(content)) {
          if (showToast) showToast("Please enter a valid link that starts with HTTP or HTTPS", "error");
          return false;
        }
      }

      return true;
    },
    jobs: () => {
      if (j_summary || j_qa || j_genqa) return true;
      if (showToast) showToast("Please select at least ONE process", "error");
      return false;
    },
    summary_type: () => true,
    questions: () => {
      return true;
    }
  };
  const summaryTypes = {
    tight: {
      display: "Default",
      value: "tight"
    },
    medium: {
      display: "Expanded",
      value: "medium"
    },
    loose: {
      display: "Super Expanded",
      value: "loose"
    },
    x_loose: {
      display: "Verbose",
      value: "x-loose"
    }
  };
  const [step, changeStep] = useState(steps[0]);
  const [title, onTitleChange] = useState("");
  const [content, onContentChange] = useState("");
  const [question, onQuestionChange] = useState("");
  const [questions, onQuestionAdd] = useState(initQ);
  const [j_summary, j_onChangeSummary] = useState(false);
  const [j_qa, j_onChangeQA] = useState(false);
  const [j_genqa, j_onChangeGenQA] = useState(false);
  const [is_global, onGlobalChange] = useState(false);
  const [isRemoteLoading, onLoadingToggle] = useState(false);
  const [pasteMethod, onChoosePasteMethod] = useState("text");
  const [summaryType, onChooseSummaryType] = useState(summaryTypes.tight);

  const titleStep = () => {
    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
      style: styles.label
    }, "Set Title"), /*#__PURE__*/React.createElement(TextInput, {
      style: styles.input,
      onChangeText: onTitleChange,
      placeholder: "Name this for later reference ...",
      value: title
    }));
  };

  const chooseMethodStep = () => {
    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
      style: styles.label
    }, "Choose Method"), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => onChoosePasteMethod("text"),
      style: pasteMethod === "text" ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: pasteMethod === "text" ? styles.chooseMethodText : styles.regularText
    }, pasteMethod === "text" ? "Paste Long Text or Article ✔" : "Paste Long Text or Article")), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => onChoosePasteMethod("link"),
      style: pasteMethod === "link" ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: pasteMethod === "link" ? styles.chooseMethodText : styles.regularText
    }, pasteMethod === "link" ? "Paste a Link to an Article ✔" : "Paste a Link to an Article")), /*#__PURE__*/React.createElement(View, {
      style: {
        marginTop: 10
      }
    }), /*#__PURE__*/React.createElement(Text, {
      style: styles.label
    }, "Allow others to View this?"), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => onGlobalChange(false),
      style: !is_global ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: !is_global ? styles.chooseMethodText : styles.regularText
    }, !is_global ? "No, keep this private ✔" : "No, keep this private")), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => onGlobalChange(true),
      style: is_global ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: is_global ? styles.chooseMethodText : styles.regularText
    }, is_global ? "Yes, I'd like to help others ✔" : "Yes, I'd like to help others")));
  };

  const pasteStep = () => {
    if (pasteMethod === "link") {
      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
        style: styles.label
      }, "Enter Link to Article"), /*#__PURE__*/React.createElement(TextInput, {
        style: styles.input,
        onChangeText: onContentChange,
        placeholder: "Paste link ...",
        value: content
      }));
    } else {
      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
        style: styles.label
      }, "Paste Long Text or Article"), /*#__PURE__*/React.createElement(TextInput, {
        style: styles.input,
        onChangeText: onContentChange,
        placeholder: "Paste content ...",
        value: content,
        multiline: true
      }));
    }
  };

  const chooseProcessesStep = () => {
    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
      style: styles.label
    }, "Select Processes"), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        console.log("summary pressed");
        j_onChangeSummary(!j_summary);
      },
      style: j_summary ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: j_summary ? styles.chooseMethodText : styles.regularText
    }, j_summary ? "Generate Summary ✔" : "Generate Summary")), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => j_onChangeQA(!j_qa),
      style: j_qa ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: j_qa ? styles.chooseMethodText : styles.regularText
    }, j_qa ? "Answer My Questions ✔" : "Answer My Questions")), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => j_onChangeGenQA(!j_genqa),
      style: j_genqa ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: j_genqa ? styles.chooseMethodText : styles.regularText
    }, j_genqa ? "Generate Questions & Answers ✔" : "Generate Questions & Answers")));
  };

  const chooseSummaryTypeStep = () => {
    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
      style: styles.label
    }, "Select Summary Length"), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        onChooseSummaryType(summaryTypes.tight);
      },
      style: summaryType.value === summaryTypes.tight.value ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: summaryType.value === summaryTypes.tight.value ? styles.chooseMethodText : styles.regularText
    }, summaryType.value === summaryTypes.tight.value ? summaryTypes.tight.display + " ✔" : summaryTypes.tight.display)), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        onChooseSummaryType(summaryTypes.medium);
      },
      style: summaryType.value === summaryTypes.medium.value ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: summaryType.value === summaryTypes.medium.value ? styles.chooseMethodText : styles.regularText
    }, summaryType.value === summaryTypes.medium.value ? summaryTypes.medium.display + " ✔" : summaryTypes.medium.display)), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        onChooseSummaryType(summaryTypes.loose);
      },
      style: summaryType.value === summaryTypes.loose.value ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: summaryType.value === summaryTypes.loose.value ? styles.chooseMethodText : styles.regularText
    }, summaryType.value === summaryTypes.loose.value ? summaryTypes.loose.display + " ✔" : summaryTypes.loose.display)), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        onChooseSummaryType(summaryTypes.x_loose);
      },
      style: summaryType.value === summaryTypes.x_loose.value ? styles.chooseProcessesButtonActive : styles.chooseProcessesButtonInactive
    }, /*#__PURE__*/React.createElement(Text, {
      style: summaryType.value === summaryTypes.x_loose.value ? styles.chooseMethodText : styles.regularText
    }, summaryType.value === summaryTypes.x_loose.value ? summaryTypes.x_loose.display + " ✔" : summaryTypes.x_loose.display)));
  };

  const addQuestion = () => {
    if (!isEmptyString(question)) {
      var q = [...questions];
      q.push({
        question: question
      });
      onQuestionAdd(q);
      onQuestionChange("");
    }
  };

  const removeQuestion = index => {
    var q = [...questions];
    q.splice(index, 1);
    onQuestionAdd(q);
  };

  const addQuestionStep = () => {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.questionView
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.label
    }, "Enter Question"), /*#__PURE__*/React.createElement(View, {
      style: styles.cbView
    }, /*#__PURE__*/React.createElement(TextInput, {
      style: styles.input,
      onChangeText: onQuestionChange,
      placeholder: "Ask a question ...",
      onSubmitEditing: addQuestion,
      value: question
    }), /*#__PURE__*/React.createElement(View, {
      style: styles.qAddB
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.addQButton,
      onPress: addQuestion
    }, /*#__PURE__*/React.createElement(Text, null, "Add")))), renderQuestionsLabel(), renderQuestionList());
  };

  const renderQuestionListItem = ({
    index,
    item
  }) => {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.questionItemView
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.label
    }, "Q. "), /*#__PURE__*/React.createElement(Text, {
      style: styles.questionText
    }, item.question), /*#__PURE__*/React.createElement(TouchableKiaIcon, {
      onPress: () => removeQuestion(index),
      iconProps: {
        size: 'tiny',
        src: Icons.delete,
        noFlex: true
      }
    }));
  };

  const renderQuestionsLabel = () => {
    if (questions.length > 0) {
      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
        style: styles.label
      }, "Added Questions"));
    }

    return;
  };

  const renderQuestionList = () => {
    if (questions.length > 0) {
      return /*#__PURE__*/React.createElement(FlatList, {
        data: questions,
        renderItem: renderQuestionListItem
      });
    }

    return;
  };

  const renderStep = () => {
    switch (step) {
      case steps[0]:
        return titleStep();

      case steps[1]:
        return chooseMethodStep();

      case steps[2]:
        return pasteStep();

      case steps[3]:
        return chooseProcessesStep();

      case steps[4]:
        return chooseSummaryTypeStep();

      case steps[5]:
        return addQuestionStep();
    }

    return;
  };

  const renderNavButtons = () => {
    var showPrev = false;
    var showNext = false;
    var showSubmit = false;
    var nextStep = steps[0];
    var prevStep = steps[0];

    switch (step) {
      case steps[0]:
        //title
        var showPrev = false;
        var showNext = true;
        var showSubmit = false;
        var nextStep = steps[1];
        break;

      case steps[1]:
        //paste method
        var showPrev = true;
        var showNext = true;
        var showSubmit = false;
        var nextStep = steps[2];
        var prevStep = steps[0];
        break;

      case steps[2]:
        //paste
        var showPrev = true;
        var showNext = true;
        var showSubmit = false;
        var nextStep = steps[3];
        var prevStep = steps[1];
        break;

      case steps[3]:
        //jobs
        var showPrev = true;
        var showNext = true;
        var showSubmit = false;

        if (j_summary) {
          var nextStep = steps[4];
        } else if (j_qa) {
          var nextStep = steps[5];
        } else if (j_genqa) {
          var showNext = false;
          var showSubmit = true;
        } else {
          var showNext = false;
          var showSubmit = false;
        }

        var prevStep = steps[2];
        break;

      case steps[4]:
        //summary length
        var showPrev = true;
        var showNext = true;
        var showSubmit = false;

        if (j_qa) {
          var nextStep = steps[5];
        } else {
          var showNext = false;
          var showSubmit = true;
        }

        var prevStep = steps[3];
        break;

      case steps[5]:
        //questions
        var showPrev = true;
        var showNext = false;
        var showSubmit = true;
        var prevStep = steps[4];
        break;
    }

    return /*#__PURE__*/React.createElement(View, {
      style: styles.navButtonsView
    }, showPrev && /*#__PURE__*/React.createElement(TouchableOpacity, {
      disabled: isRemoteLoading,
      style: styles.backButton,
      onPress: () => changeStep(prevStep)
    }, /*#__PURE__*/React.createElement(Text, null, "Previous")), showNext && /*#__PURE__*/React.createElement(TouchableOpacity, {
      disabled: isRemoteLoading,
      style: styles.positiveButton,
      onPress: () => {
        validations[step]() && changeStep(nextStep);
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.chooseMethodText
    }, "Next")), showSubmit && /*#__PURE__*/React.createElement(TouchableOpacity, {
      disabled: isRemoteLoading,
      style: styles.positiveButton,
      onPress: onSubmitButtonPress
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.chooseMethodText
    }, "Submit")));
  };

  const onSubmitButtonPress = () => {
    if (validations[step]()) {
      const data = createRequestPreTransformer(title, pasteMethod, content, content, summaryType.value, j_summary, j_qa, j_genqa, questions, is_global);
      onLoadingToggle(true);
      createStore.sendRequest(data, afterCreateHandler);
    }
  };

  const toastHandler = f => {
    showToast = f;
  };

  const afterCreateHandler = success => {
    onLoadingToggle(false);

    if (success) {
      showToast && showToast("Request Created. It will be proccessed soon", "info");
      setTimeout(function () {
        navigation.goBack();
      }, 2000);
    } else {
      showToast && showToast("Error creating request, please try again", "error");
    }
  };

  return /*#__PURE__*/React.createElement(BaseScreen, {
    paginatedLoading: isRemoteLoading,
    active: "create",
    title: "Create",
    toastHandler: toastHandler
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.baseView
  }, renderStep(), renderNavButtons()));
});
//# sourceMappingURL=create-screen.js.map