Andrei/intake home

src/components/FormHolder/FormHolder.module.css

@@ -0,0 +1,69 @@
+.root {
+    display: flex; 
+    flex-direction: row;
+    width: 100%;
+    height: 76px;
+    border-bottom: 2px solid var(--back-drop);;
+    border-radius: 10px;
+    justify-content: space-between;
+    align-items: center;
+    outline: none;
+}
+
+.root:hover {
+    background-color: var(--back-drop);
+}
+
+.title {
+    display: flex;
+    flex-direction: row;
+    padding-left: 20px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.title:hover {
+    background-color: var(--back-drop);
+}
+
+.titleText {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 28px;
+    border: none;
+    outline: none;
+    resize: none;
+    align-self: center;
+    background-color: transparent;
+}
+
+.titleText:hover {
+    background-color: white;
+}
+
+.form {
+    margin-top: 5px;
+}
+
+.deleteButton {
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.deleteButton:active {
+    cursor: wait;
+}
+
+.editButton {
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.editButton:active {
+    cursor: wait;
+}
+
+

src/components/FormHolder/FormHolder.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import FeedOutlinedIcon from '@mui/icons-material/FeedOutlined';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import styles from "./FormHolder.module.css";
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { deleteCase, renameCase, setCaseType } from '../../firebase/queries';
+import { TextareaAutosize } from '@mui/material';
+
+interface FormHolderProps {
+    staticTitle: string,
+    id: string,
+    connecterFunctions: {
+        deleteForm: Function;
+        dupesExist: Function;
+        updateNameList: Function;
+    }
+}
+
+const FormHolder = ({staticTitle, id, connecterFunctions}: FormHolderProps) => {
+    const [dynamicTitle, setDynamicTitle] = useState(staticTitle);
+    const router = useRouter();
+    const {deleteForm, dupesExist, updateNameList} = connecterFunctions;
+    router.query.key = staticTitle;
+    return (
+        <div className={styles.root}>
+            <div className={styles.title}>
+                <div className={styles.form}>
+                    <FeedOutlinedIcon fontSize='large'/>
+                </div>
+                <TextareaAutosize
+                    value={dynamicTitle}
+                    className={styles.titleText}
+                    placeholder="New Case Type"
+                    onChange={(e) => {
+                        let newName = e.target.value
+                        updateNameList(id, newName);
+                        setDynamicTitle(newName);
+                        router.query.key = newName;
+                    }}
+                    />
+            </div>
+            <div className={styles.icons}>                
+                <button className={styles.editButton} onClick={() => {
+                    if (!dupesExist()) {
+                        setCaseType(dynamicTitle).then(() => {
+                            if (!(staticTitle === dynamicTitle)) {
+                                renameCase(staticTitle, dynamicTitle)
+                            }
+                            router.push({
+                                pathname: '/IntakeForms/IntakeForm',
+                                query: {key: dynamicTitle, uploaded: 'false'}
+                            })
+                        })
+                    } else {
+                        window.alert("Duplicate Names Exist!");
+                    }
+                }}>
+                    <EditIcon fontSize='large'/>
+                </button>
+                <button className={styles.deleteButton}
+                onClick={() =>{
+                    if (confirm('Are you sure you want to delete this case type?') == true) {
+                        deleteForm(id, dynamicTitle);
+                    }
+                    }}>
+                    <DeleteIcon fontSize='large'/>
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default FormHolder 

src/components/IntakeForm/IntakeForm.module.css

@@ -5,8 +5,7 @@
 
 .overlay {
   width: 100%;
-  min-width: 1440px;
-  height: 217px;
+  height: 16%;
   display: flex;
   position: fixed;
   background-color: white;
@@ -31,6 +30,13 @@
   flex-grow: 1;
 }
 
+.back-arrow {
+  margin-top: 10px;
+  margin-bottom: -5px;
+  color: var(--prussian-blue);
+  align-self: center;
+}
+
 .dragDots {
   width: 17.29px;
   height: 11px;
@@ -39,13 +45,12 @@
 
 .namebar {
   display: flex;
-  align-content: space-between;
   position: absolute;
   align-items: center;
-  top: 62px;
+  top: 45%;
   left: 91px;
-  width: 617px;
-  height: 40px;
+  width: 40%;
+  height: 50px;
   color: var(--jet);
   display: inline-block;
   font-style: normal;
@@ -69,12 +74,12 @@
 .changebar {
   position: absolute;
   display: flex;
-  right: 100px;
-  top: 62px;
-  width: 632px;
-  height: 40px;
+  right: 7%;
+  top: 65%;
+  width: 26%;
+  height: 5%;
   align-items: center;
-  justify-content: space-evenly;
+  justify-content: space-between;
   color: var(--prussian-blue);
 }
 
@@ -98,7 +103,7 @@
 
 .spacer {
   width: 100%;
-  height: 250px;
+  height: 135px;
 }
 
 .questions {

src/components/IntakeForm/IntakeForm.tsx

@@ -1,19 +1,18 @@
-import React, { useEffect, useReducer } from 'react';
+import React, { useEffect, useReducer, useState } from 'react';
 import Link from 'next/dist/client/link';
 import styles from "./IntakeForm.module.css";
 import { IoIosArrowBack, IoIosAddCircleOutline,  } from "react-icons/io";
 import { IoEyeOutline } from "react-icons/io5";
 import { BiUndo, BiRedo } from "react-icons/bi";
-import {BsThreeDotsVertical} from "react-icons/bs";
 import Button from "../Button/Button";
-import TextareaAutosize from 'react-textarea-autosize';
 import  Question from "../Question/question";
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import Image from "next/image";
 import dragDots from "../../../assets/images/dragDots.png";
 import { setQuestion, getAllQuestionsOfType, deleteQuestion} from "../../firebase/queries";
-import { firestoreAutoId, mapToJSON } from '../../firebase/helpers';
-import { AnswerType, QuestionType, QuestionComponentProps as QuestionObj, Language,  } from "../../../types";
+import { camelize, firestoreAutoId, mapToJSON } from '../../firebase/helpers';
+import { AnswerType, QuestionComponentProps as QuestionObj, Language,  } from "../../../types";
+import { useRouter } from 'next/router';
 
 
 enum IntakeActionTypes {
@@ -29,25 +28,13 @@ const deletionList = [];
 
 export const updateMap = (id, field, value) => {
   questionMap.get(id)[field] = value;
-  console.log("language change", questionMap.get(id));
 }
 
 
-const IntakeForm = (caseType) => {
-  caseType = caseType.caseType;
-  function getTitle(caseType) {
-    switch(caseType) {
-      case QuestionType.General:
-        return "General";
-      case QuestionType.Daca: 
-        return "Daca Renewal";
-      case QuestionType.Adjustment:
-        return "Adjustment Of Status";
-      default:
-        return "I90";
-    }
-  }
-  const titleText = getTitle(caseType);
+const IntakeForm = () => {
+  const router = useRouter();
+  const [titleText, setTitleText]= useState(undefined);
+  const caseType = camelize((titleText + "").toString());
   var initialState = {
     ids: [],
     questions: [],
@@ -56,16 +43,21 @@ const IntakeForm = (caseType) => {
   }
   const [qState, dispatch] = useReducer(intakeReducer, initialState);
   const loadQuestions = async (): Promise<void> => {
-    let qs: QuestionObj[] = await getAllQuestionsOfType(caseType);
+    setTitleText(router.query.key);
+    //caseType has to be loaded this way.  There is a delay in useStates where caseType variable will show up as undefined in this function.
+    let quickCaseType = camelize((router.query.key + "").toString());
+    // let qs: QuestionObj[] = await getAllQuestionsOfType(quickCaseType);
+    let qs: QuestionObj[] = await getAllQuestionsOfType(quickCaseType);
     questionMap = new Map<string, QuestionObj>();
     qs = qs.filter(q => (!deletionList.includes(q.id) && !qState.ids.includes(q.id)));
     qs.map(q => questionMap.set(q.id, q));
-    dispatch({type: IntakeActionTypes.LOAD, payload: qs})    
+    dispatch({type: IntakeActionTypes.LOAD, payload: qs})
   };
 
+  //useEffect is called twice.  At first reader & when router is ready with its query.
   useEffect(() => {
     loadQuestions();
-  }, []);
+  }, [router.isReady]);
 
 
 
@@ -233,28 +225,14 @@ const IntakeForm = (caseType) => {
     return(
       <div className={styles["overlay"]}>
           <div className={styles["namebar"]}>
-            <Link href="/">
-              <IoIosArrowBack color="#0F2536"/>
+            <Link href="/IntakeForms">
+              <IoIosArrowBack className={styles["back-arrow"]}/>
             </Link>
-            <TextareaAutosize
-              cacheMeasurements
-              value={titleText}
-              // placeholder="Untitled"
-              // onChange={ev => setTitleText(ev.target.value)}
-              className={styles["title"]}/>
+            <div className={styles["title"]}>
+              {titleText}
+            </div>
           </div>
           <div className={styles["changebar"]}>
-            <IoEyeOutline size={36} />
-            <button
-              className={styles["undo-redo"]}
-              onClick={() => dispatch({type: IntakeActionTypes.UNDO})}>
-              <BiUndo size={33}/>
-            </button>
-            <button
-              className={styles["undo-redo"]}
-              onClick={() => dispatch({type: IntakeActionTypes.REDO})}>
-              <BiRedo size={33}/>
-            </button>
             <button
               className={styles["add-button"]}
               onClick={() => {
@@ -278,19 +256,23 @@ const IntakeForm = (caseType) => {
                 }}>
               <IoIosAddCircleOutline size={33}/>
             </button>
-            <Button
-              text='Save Changes'
-              buttonType='button-clear'
-              textType='button-text-jet'
-              onPress={() => alert("SAVE!")}
-            />
+            <button
+              className={styles["undo-redo"]}
+              onClick={() => dispatch({type: IntakeActionTypes.UNDO})}>
+              <BiUndo size={33}/>
+            </button>
+            <button
+              className={styles["undo-redo"]}
+              onClick={() => dispatch({type: IntakeActionTypes.REDO})}>
+              <BiRedo size={33}/>
+            </button>
+            <IoEyeOutline size={36} />
             <Button
               text='Publish Changes'
               buttonType='button-pruss'
               textType='button-text-white'
               onPress={() => setQuestions()}
             />
-            <BsThreeDotsVertical size={30}/>
           </div>
         </div>
     )
@@ -308,6 +290,7 @@ const IntakeForm = (caseType) => {
         >
           {(droppableProvided) => (
             <div
+            key={router.query.key}
             className={styles["questions"]}
             {...droppableProvided.droppableProps}
             ref={droppableProvided.innerRef}

src/components/Question/question.tsx

@@ -56,7 +56,6 @@ const Question = ({
   const [languageOption, setLanguage] = useState(
     languageOptions[languageOptions.findIndex(o => {return o.value === language})]); //  Matches initial label toggle to given backend (backend values to frontend labels).  
   const reloadLanguage = (lang) => {
-    console.log("text fields", displayText, description, answerOptions);
     setQuestionText(displayText.get(lang));
     setDescriptionText(description.get(lang));
     setAnswerOption(answerOptions.get(lang));
@@ -173,7 +172,6 @@ const Question = ({
             setQuestionText(ev.target.value);
             displayText.set(languageOption.value, ev.target.value);
             updateMap(id, "displayText", displayText);
-            console.log("display Text", displayText);
           }}
           className={styles.questionText}
         />
@@ -187,7 +185,6 @@ const Question = ({
           options={languageOptions}
           onChange={e => {
             reloadLanguage(e.value); // Reload front-end fields to new lang.
-            console.log("Disp text", displayText);
             setLanguage(e); // change current language (handled languageOption)
             updateMap(id, "language", e.value)}} // Updates backend obj map in intakeForm.
           defaultValue={languageOption}