From 16b3661a687a0eb9f1096978851ec64d75aff987 Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Tue, 31 May 2022 17:45:08 -0700 Subject: [PATCH 01/15] Working connection to backend. Front end rendering issues --- src/components/IntakeForm/IntakeForm.tsx | 1 - .../IntakeHome/IntakeHome.module.css | 34 ++++++++++ src/components/IntakeHome/IntakeHome.tsx | 67 +++++++++++++++++++ src/firebase/queries.ts | 1 + src/pages/IntakeForms/DacaRenewal/index.tsx | 6 -- .../{Citizenship => IntakeForm}/index.tsx | 0 src/pages/IntakeForms/IntakeForms.module.css | 0 src/pages/IntakeForms/index.tsx | 8 +-- 8 files changed, 105 insertions(+), 12 deletions(-) create mode 100644 src/components/IntakeHome/IntakeHome.module.css create mode 100644 src/components/IntakeHome/IntakeHome.tsx delete mode 100644 src/pages/IntakeForms/DacaRenewal/index.tsx rename src/pages/IntakeForms/{Citizenship => IntakeForm}/index.tsx (100%) delete mode 100644 src/pages/IntakeForms/IntakeForms.module.css diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index 86a948b..06c86b8 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -6,7 +6,6 @@ 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 {LinkForm} from "../LinkForm/LinkForm"; import TextareaAutosize from 'react-textarea-autosize'; import Question from "../Question/question"; import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; diff --git a/src/components/IntakeHome/IntakeHome.module.css b/src/components/IntakeHome/IntakeHome.module.css new file mode 100644 index 0000000..6cd0e59 --- /dev/null +++ b/src/components/IntakeHome/IntakeHome.module.css @@ -0,0 +1,34 @@ +.tab { + width: 75.89px; + background-color: orange; + height: 20px; +} + +.title { + font-style: normal; + font-weight: 600; + font-size: 24px; + line-height: 28px; + color: var(--jet); +} + +.page { + width: 91%; + flex-direction: column; + justify-content: center; + align-self: center; + margin-left: 3%; + margin-right: 6%; + display: flex; + position: absolute; +} + +.overlay { + margin-top: 8%; + height: 100%; + color: var(--jet); + font-style: normal; + font-weight: 700; + font-size: 32px; + line-height: 38px; +} \ No newline at end of file diff --git a/src/components/IntakeHome/IntakeHome.tsx b/src/components/IntakeHome/IntakeHome.tsx new file mode 100644 index 0000000..0f9ccbf --- /dev/null +++ b/src/components/IntakeHome/IntakeHome.tsx @@ -0,0 +1,67 @@ +import { getAllCaseTypes } from "../../firebase/queries"; +import { useEffect } from "react"; +import { firestoreAutoId } from "../../firebase/helpers"; +import styles from "./IntakeHome.module.css"; +import { CaseType, QuestionType } from "../../../types"; + + +var caseMap = new Map(); +const componentList = []; + + +const IntakeHome = () => { + const loadCases = async (): Promise => { + let cL: CaseType[] = await getAllCaseTypes(); + caseMap = new Map(); + console.log("CL", cL); + cL.map(c => { + var id = firestoreAutoId() + console.log("key", c.key); + console.log("Type", QuestionType[c.key]); + caseMap.set(id, QuestionType[c.key]); + }); + console.log("caseMap", caseMap); + }; + + function getCaseName(key) { + switch(key) { + case QuestionType.General: + return "General Questions"; + case QuestionType.Daca: + return "Daca Renewal Questions"; + case QuestionType.Adjustment: + return "Adjustment Of Status Questions"; + default: + return "I90 Questions"; + } + } + + const makeComponent = (id, key) => { + componentList.push({id, key}); + return ( +
+
+ {getCaseName(key)} +
+
+ ) + } + + + useEffect(() => { + loadCases(); + }, []); + + console.log("componentList again", componentList); + console.log("caseMap again", caseMap); + return ( +
+
+ Intake Forms +
+ {caseMap.forEach((id, key) => makeComponent(id, key))} +
+ ); +} + +export default IntakeHome; diff --git a/src/firebase/queries.ts b/src/firebase/queries.ts index e51eb0e..13737ac 100644 --- a/src/firebase/queries.ts +++ b/src/firebase/queries.ts @@ -113,6 +113,7 @@ export const getAllQuestionsOfType = async ( } }; + export const getClientResponsesOfType = async ( client: Client, caseType: string diff --git a/src/pages/IntakeForms/DacaRenewal/index.tsx b/src/pages/IntakeForms/DacaRenewal/index.tsx deleted file mode 100644 index dacfec1..0000000 --- a/src/pages/IntakeForms/DacaRenewal/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react"; -import { IntakeFormOverlay } from "../../../components/IntakeFormOverlay/IntakeFormOverlay"; - -export default function DacaRenewal() { - return ; -} diff --git a/src/pages/IntakeForms/Citizenship/index.tsx b/src/pages/IntakeForms/IntakeForm/index.tsx similarity index 100% rename from src/pages/IntakeForms/Citizenship/index.tsx rename to src/pages/IntakeForms/IntakeForm/index.tsx diff --git a/src/pages/IntakeForms/IntakeForms.module.css b/src/pages/IntakeForms/IntakeForms.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/IntakeForms/index.tsx b/src/pages/IntakeForms/index.tsx index 63b445d..0fc9ccb 100644 --- a/src/pages/IntakeForms/index.tsx +++ b/src/pages/IntakeForms/index.tsx @@ -1,16 +1,14 @@ import IntakeForm from "../../components/IntakeForm/IntakeForm"; import Layout from "../../components/Layout"; import { QuestionType } from "../../../types"; +import IntakeHome from "../../components/IntakeHome/IntakeHome"; -export default function GenQuestion() { - const myProps = { - caseType: QuestionType.General - } +export default function IntakeHomeScreen() { return (
- +
); From bd1d08217e42299825267b9147f3f660cb60caef Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Thu, 2 Jun 2022 13:53:53 -0700 Subject: [PATCH 02/15] Intake Home Screen connected to Intake Forms & FB --- src/components/FormHolder/FormHolder.tsx | 37 ++++++++++++++++++++-- src/components/IntakeForm/IntakeForm.tsx | 7 ++-- src/pages/IntakeForms/IntakeForm/index.tsx | 10 +++--- src/pages/IntakeForms/index.tsx | 26 +-------------- 4 files changed, 44 insertions(+), 36 deletions(-) diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 9247bf8..0c6de35 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -3,17 +3,48 @@ 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 { QuestionType } from '../../../types'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; interface FormHolderProps { formTitle: string, } const FormHolder = (props: FormHolderProps) => { + function getCaseName(key) { + switch(key) { + case QuestionType.General: + return "General Questions"; + case QuestionType.Daca: + return "Daca Renewal Questions"; + case QuestionType.Adjustment: + return "Adjustment Of Status Questions"; + case QuestionType.I90: + return "I90 Questions"; + case QuestionType.Citizenship: + return "Citizenship Questions"; + default: + return "New Case Type Questions"; + } + } + + + const router = useRouter(); return (
-

{props.formTitle}

-
- +

{getCaseName(QuestionType[props.formTitle])}

+
diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index 6f621c8..e86f069 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -14,6 +14,7 @@ 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 { useRouter } from 'next/router'; @@ -31,12 +32,12 @@ 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; +const IntakeForm = () => { + const router = useRouter(); + const [caseType, setCaseType] = useState(QuestionType[router.query.key.toString()]); function getTitle(caseType) { switch(caseType) { case QuestionType.General: diff --git a/src/pages/IntakeForms/IntakeForm/index.tsx b/src/pages/IntakeForms/IntakeForm/index.tsx index 136c8ef..6da7ba2 100644 --- a/src/pages/IntakeForms/IntakeForm/index.tsx +++ b/src/pages/IntakeForms/IntakeForm/index.tsx @@ -1,13 +1,13 @@ -import React from "react"; +import { useRouter } from "next/router"; +import React, { useState } from "react"; import IntakeForm from "../../../components/IntakeForm/IntakeForm"; -export default function Citizenship() { +export default function IntakeScreen() { + const router = useRouter(); return (
- +
); diff --git a/src/pages/IntakeForms/index.tsx b/src/pages/IntakeForms/index.tsx index 971712d..500b51b 100644 --- a/src/pages/IntakeForms/index.tsx +++ b/src/pages/IntakeForms/index.tsx @@ -2,7 +2,6 @@ import { Button } from "@mui/material"; import { ReactElement, useEffect, useState } from "react"; import { CaseType, QuestionType } from "../../../types"; import FormHolder from "../../components/FormHolder/FormHolder"; -import IntakeForm from "../../components/IntakeForm/IntakeForm"; import styles from "./styles.module.css" import Layout from "../../components/Layout"; import { firestoreAutoId } from "../../firebase/helpers"; @@ -15,7 +14,6 @@ export default function IntakeHomeScreen() { const loadCases = async (): Promise => { let cL: CaseType[] = await getAllCaseTypes(); allCaseTypes = new Map(); - console.log("CL", cL); let copyArray=[]; cL.map(c => { @@ -23,38 +21,16 @@ export default function IntakeHomeScreen() { allCaseTypes.set(id, QuestionType[c.key]); if (!keyList.includes(c.key)) { - copyArray.push(); + copyArray.push(); } - console.log("caseForm update", caseForms); }); setCaseForms(copyArray); - console.log("caseForm finalized", caseForms); }; - - function getCaseName(key) { - switch(key) { - case QuestionType.General: - return "General Questions"; - case QuestionType.Daca: - return "Daca Renewal Questions"; - case QuestionType.Adjustment: - return "Adjustment Of Status Questions"; - case QuestionType.I90: - return "I90 Questions"; - default: - return "New Case Type Questions"; - } - } - useEffect(() => { loadCases(); }, []); - - console.log("caseForms", caseForms); - - return (

Intake Forms

From 5b59d894420b01ff41ddc82a8c59b56ddc50120e Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Thu, 2 Jun 2022 16:09:17 -0700 Subject: [PATCH 03/15] Intake forms support dynamic case names, need to make refresh loading faster --- src/components/FormHolder/FormHolder.tsx | 34 +++++++----------------- src/components/IntakeForm/IntakeForm.tsx | 22 +++++---------- src/firebase/queries.ts | 19 ++++++++++++- src/pages/IntakeForms/index.tsx | 19 ++++++------- types.ts | 4 +-- 5 files changed, 44 insertions(+), 54 deletions(-) diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 0c6de35..1e9800f 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -3,44 +3,30 @@ 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 { QuestionType } from '../../../types'; import Link from 'next/link'; import { useRouter } from 'next/router'; +import { camelize } from '../../firebase/helpers'; +import { setCaseType } from '../../firebase/queries'; interface FormHolderProps { - formTitle: string, + formTitle?: string, } -const FormHolder = (props: FormHolderProps) => { - function getCaseName(key) { - switch(key) { - case QuestionType.General: - return "General Questions"; - case QuestionType.Daca: - return "Daca Renewal Questions"; - case QuestionType.Adjustment: - return "Adjustment Of Status Questions"; - case QuestionType.I90: - return "I90 Questions"; - case QuestionType.Citizenship: - return "Citizenship Questions"; - default: - return "New Case Type Questions"; - } - } - - +const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => { + console.log("pre", formTitle); + console.log("Camelize", camelize(formTitle)); const router = useRouter(); return (
-

{getCaseName(QuestionType[props.formTitle])}

+

{formTitle}

{ - router.query.key = props.formTitle; + router.query.key = formTitle; + setCaseType(formTitle); }}> diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index e86f069..a1440f3 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -12,8 +12,8 @@ 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'; @@ -37,20 +37,9 @@ export const updateMap = (id, field, value) => { const IntakeForm = () => { const router = useRouter(); - const [caseType, setCaseType] = useState(QuestionType[router.query.key.toString()]); - 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 [titleText, setTitleText]= useState(router.query.key); + const [caseType, setCaseType] = useState(camelize((titleText + "").toString())); + console.log("caseType", caseType); var initialState = { ids: [], questions: [], @@ -59,6 +48,7 @@ const IntakeForm = () => { } const [qState, dispatch] = useReducer(intakeReducer, initialState); const loadQuestions = async (): Promise => { + setCaseType(camelize((titleText + "").toString())); let qs: QuestionObj[] = await getAllQuestionsOfType(caseType); questionMap = new Map(); qs = qs.filter(q => (!deletionList.includes(q.id) && !qState.ids.includes(q.id))); diff --git a/src/firebase/queries.ts b/src/firebase/queries.ts index 7299dc7..d4c3944 100644 --- a/src/firebase/queries.ts +++ b/src/firebase/queries.ts @@ -16,7 +16,7 @@ import { SirenUser } from '../../types'; import firebase from './clientApp'; -import { objectToAnswerOptionsMap, objectToMap, mapToObject } from './helpers'; +import { objectToAnswerOptionsMap, objectToMap, mapToObject, firestoreAutoId, camelize } from './helpers'; const database = firebase.firestore(); const caseTypeCollection = database.collection('caseTypes'); @@ -92,6 +92,7 @@ export const getAllQuestionsOfType = async ( caseType: string ): Promise => { try { + console.log("caseTypeeee", caseType); const docs = await database.collection(`caseTypes/${caseType}/questions`); const ref = await docs.orderBy("order").get(); const questions = ref.docs.map(doc => doc.data() as QuestionComponentProps); @@ -240,6 +241,22 @@ export const setQuestion = async (question: Question, maps: QuestionComponentPro } }; +export const setCaseType = async ( + caseType: string +) => { + try { + console.log("Uploading", caseType); + const doc = await caseTypeCollection.doc(camelize(caseType)).set({ + documentList: [], + identifier: firestoreAutoId(), + key: caseType, + }); + } catch (e) { + console.warn(e); + throw e; + } +}; + export const deleteQuestion = async (id:string, questionType: string) => { try { await database diff --git a/src/pages/IntakeForms/index.tsx b/src/pages/IntakeForms/index.tsx index 500b51b..601fd8a 100644 --- a/src/pages/IntakeForms/index.tsx +++ b/src/pages/IntakeForms/index.tsx @@ -7,19 +7,13 @@ import Layout from "../../components/Layout"; import { firestoreAutoId } from "../../firebase/helpers"; import { getAllCaseTypes } from "../../firebase/queries"; -var allCaseTypes = new Map(); export default function IntakeHomeScreen() { const [caseForms, setCaseForms] = useState([]); let keyList=[]; const loadCases = async (): Promise => { let cL: CaseType[] = await getAllCaseTypes(); - allCaseTypes = new Map(); let copyArray=[]; cL.map(c => { - - var id = firestoreAutoId(); - - allCaseTypes.set(id, QuestionType[c.key]); if (!keyList.includes(c.key)) { copyArray.push(); } @@ -35,12 +29,15 @@ export default function IntakeHomeScreen() {

Intake Forms

- -
- -
- {caseForms.length ? caseForms : Loading...} +
+ {caseForms.length ? caseForms : Loading...}
); } diff --git a/types.ts b/types.ts index c8c53c1..125312b 100644 --- a/types.ts +++ b/types.ts @@ -69,7 +69,7 @@ export enum CaseStatus { displayText: string; description: string; example: string; - questionType: QuestionType; + questionType: string; key: string; order: number; active: boolean; @@ -83,7 +83,7 @@ export enum CaseStatus { displayText: Map; description: Map; example: Map; - questionType: QuestionType; + questionType: string; key?: string; order: number; active?: boolean; From f75ad028fa011f1e20fb2506e36efde265996b5b Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Thu, 2 Jun 2022 16:09:30 -0700 Subject: [PATCH 04/15] note added --- src/components/IntakeForm/IntakeForm.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index a1440f3..52076f0 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -39,6 +39,7 @@ const IntakeForm = () => { const router = useRouter(); const [titleText, setTitleText]= useState(router.query.key); const [caseType, setCaseType] = useState(camelize((titleText + "").toString())); + //Need to find a faster way to refresh page. console.log("caseType", caseType); var initialState = { ids: [], From cdca3bf4487a85268ba3b1347c3cc17bcb648e29 Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Fri, 3 Jun 2022 13:18:14 -0700 Subject: [PATCH 05/15] Fast loading achieved --- src/components/IntakeForm/IntakeForm.tsx | 15 ++++++++------- src/firebase/queries.ts | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index 52076f0..8bd9cef 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -37,10 +37,8 @@ export const updateMap = (id, field, value) => { const IntakeForm = () => { const router = useRouter(); - const [titleText, setTitleText]= useState(router.query.key); - const [caseType, setCaseType] = useState(camelize((titleText + "").toString())); - //Need to find a faster way to refresh page. - console.log("caseType", caseType); + const [titleText, setTitleText]= useState(undefined); + const caseType = camelize((titleText + "").toString()); var initialState = { ids: [], questions: [], @@ -49,17 +47,20 @@ const IntakeForm = () => { } const [qState, dispatch] = useReducer(intakeReducer, initialState); const loadQuestions = async (): Promise => { - setCaseType(camelize((titleText + "").toString())); - 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); questionMap = new Map(); 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}) }; + //useEffect is called twice. At first reader & when router is ready with its query. useEffect(() => { loadQuestions(); - }, []); + }, [router.isReady]); diff --git a/src/firebase/queries.ts b/src/firebase/queries.ts index d4c3944..cb24ed2 100644 --- a/src/firebase/queries.ts +++ b/src/firebase/queries.ts @@ -92,7 +92,7 @@ export const getAllQuestionsOfType = async ( caseType: string ): Promise => { try { - console.log("caseTypeeee", caseType); + console.log("caseType Query", caseType); const docs = await database.collection(`caseTypes/${caseType}/questions`); const ref = await docs.orderBy("order").get(); const questions = ref.docs.map(doc => doc.data() as QuestionComponentProps); From 1f403d6d9bec0a39d308eee58ca3b6f803d8f2e7 Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Fri, 3 Jun 2022 14:12:40 -0700 Subject: [PATCH 06/15] Styling changes --- .../IntakeForm/IntakeForm.module.css | 29 +++++++----- src/components/IntakeForm/IntakeForm.tsx | 46 +++++++------------ 2 files changed, 34 insertions(+), 41 deletions(-) diff --git a/src/components/IntakeForm/IntakeForm.module.css b/src/components/IntakeForm/IntakeForm.module.css index 79901a4..cde8271 100644 --- a/src/components/IntakeForm/IntakeForm.module.css +++ b/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 { diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index f05c82e..65ac2dd 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -1,12 +1,10 @@ -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"; @@ -226,28 +224,14 @@ const IntakeForm = () => { return(
- - + + - setTitleText(ev.target.value)} - className={styles["title"]}/> +
+ {titleText} +
- - - - + +
) From 45029731642e2481ed8945fc402f7e3df9d1782c Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Fri, 3 Jun 2022 15:30:44 -0700 Subject: [PATCH 07/15] Can now create new forms --- src/components/FormHolder/FormHolder.tsx | 28 +++++++++++++++++++----- src/components/IntakeForm/IntakeForm.tsx | 1 + 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 1e9800f..832ae19 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +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'; @@ -7,26 +7,42 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; import { camelize } from '../../firebase/helpers'; import { setCaseType } from '../../firebase/queries'; +import { TextareaAutosize } from '@mui/material'; interface FormHolderProps { formTitle?: string, } const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => { - console.log("pre", formTitle); - console.log("Camelize", camelize(formTitle)); + const [titleText, setTitleText] = useState(formTitle); const router = useRouter(); + router.query.key = formTitle; return (
+
+ + { + setTitleText(e.target.value); + formTitle=e.target.value; + router.query.key = e.target.value; + }} + /> +

{formTitle}

{ - router.query.key = formTitle; - setCaseType(formTitle); + console.log("new Title", titleText); + router.query.key = titleText; + console.log("new Query", router.query.key); + setCaseType(router.query.key); }}> diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index 65ac2dd..9cef098 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -43,6 +43,7 @@ const IntakeForm = () => { } const [qState, dispatch] = useReducer(intakeReducer, initialState); const loadQuestions = async (): Promise => { + console.log("Intake Form Key", router.query.key); 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()); From a1197fb76c9f4160b8174a8fa7560bcc3beda218 Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Fri, 3 Jun 2022 23:14:50 -0700 Subject: [PATCH 08/15] Accurate renaming --- src/components/FormHolder/FormHolder.tsx | 6 ++-- src/firebase/queries.ts | 42 ++++++++++++++++++++---- 2 files changed, 38 insertions(+), 10 deletions(-) diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 832ae19..21fdc80 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -13,6 +13,8 @@ interface FormHolderProps { formTitle?: string, } +//Need to be able to rename collections and to delete collections accurately. + const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => { const [titleText, setTitleText] = useState(formTitle); const router = useRouter(); @@ -39,10 +41,8 @@ const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => { query: {key: titleText} }}> { - console.log("new Title", titleText); router.query.key = titleText; - console.log("new Query", router.query.key); - setCaseType(router.query.key); + setCaseType(formTitle, router.query.key); }}> diff --git a/src/firebase/queries.ts b/src/firebase/queries.ts index cb24ed2..78a21f3 100644 --- a/src/firebase/queries.ts +++ b/src/firebase/queries.ts @@ -241,16 +241,44 @@ export const setQuestion = async (question: Question, maps: QuestionComponentPro } }; +//if initial Case type and the case query key do not match, then the name of the document was changed. +//Query checks if a case exists under the deprecated initial case, copies contents to the new case given by query. +//Else, a +// query key is dynamic so it will be most recent always. Initial case name is static. export const setCaseType = async ( - caseType: string + initialCaseType: string, + caseQueryKey: string ) => { try { - console.log("Uploading", caseType); - const doc = await caseTypeCollection.doc(camelize(caseType)).set({ - documentList: [], - identifier: firestoreAutoId(), - key: caseType, - }); + console.log('initial', initialCaseType); + let initialDoc = caseTypeCollection.doc(camelize(initialCaseType)); + let recentDoc = caseTypeCollection.doc(camelize(caseQueryKey)); + console.log("Uploading", caseQueryKey); + initialDoc.get().then((doc) => { + recentDoc.get().then(() => { + console.log("DOC DATA!!!!!", doc.data()); + recentDoc.set({ + key: caseQueryKey, + documentList: [], + identifier: firestoreAutoId() + }); + if (doc && doc.exists && !(initialCaseType === caseQueryKey)) { + initialDoc.collection('questions').get().then(c => { + if (!c.empty) { + c.forEach(d => { + recentDoc.collection('questions').add(d.data()); + }) + } + }).then(() => { + var data = doc.data(); + console.log("Data info", data); + recentDoc.set(data, {mergeFields: ['documentList', 'identifier']}).then(() => { + initialDoc.delete(); + }) + }); + } + }); + }) } catch (e) { console.warn(e); throw e; From 78f1ec75fc7de075811f9da066319aca0c3aad2d Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Sat, 4 Jun 2022 14:23:29 -0700 Subject: [PATCH 09/15] before restructure of query --- src/components/FormHolder/FormHolder.tsx | 16 ++++++++++------ src/components/IntakeForm/IntakeForm.tsx | 4 +++- src/firebase/queries.ts | 23 +++++++++++++++++------ 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 21fdc80..5cc6a7a 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -6,15 +6,13 @@ import styles from "./FormHolder.module.css"; import Link from 'next/link'; import { useRouter } from 'next/router'; import { camelize } from '../../firebase/helpers'; -import { setCaseType } from '../../firebase/queries'; +import { deleteCase, setCaseType } from '../../firebase/queries'; import { TextareaAutosize } from '@mui/material'; interface FormHolderProps { formTitle?: string, } -//Need to be able to rename collections and to delete collections accurately. - const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => { const [titleText, setTitleText] = useState(formTitle); const router = useRouter(); @@ -41,13 +39,19 @@ const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => { query: {key: titleText} }}> { - router.query.key = titleText; - setCaseType(formTitle, router.query.key); + console.log("Before", router.query.key); + setCaseType(formTitle, titleText).then((res) => { + console.log("result", res); + router.query.key = res; + console.log("After", router.query.key); + }); }}> - +
) diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index 9cef098..78faf52 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -44,10 +44,12 @@ const IntakeForm = () => { const [qState, dispatch] = useReducer(intakeReducer, initialState); const loadQuestions = async (): Promise => { console.log("Intake Form Key", router.query.key); + console.log("Router ready?", router.isReady); 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); + console.log("retrieved questions", qs); questionMap = new Map(); qs = qs.filter(q => (!deletionList.includes(q.id) && !qState.ids.includes(q.id))); qs.map(q => questionMap.set(q.id, q)); @@ -57,7 +59,7 @@ const IntakeForm = () => { //useEffect is called twice. At first reader & when router is ready with its query. useEffect(() => { loadQuestions(); - }, [router.isReady]); + }, [router.isReady, router.query.key]); diff --git a/src/firebase/queries.ts b/src/firebase/queries.ts index 78a21f3..1e006dd 100644 --- a/src/firebase/queries.ts +++ b/src/firebase/queries.ts @@ -1,5 +1,6 @@ import { valueToPercent } from "@mui/base"; import { typography } from "@mui/system"; +import { useRouter } from "next/router"; import { EventEmitter } from "stream"; import { Appointment, @@ -245,18 +246,16 @@ export const setQuestion = async (question: Question, maps: QuestionComponentPro //Query checks if a case exists under the deprecated initial case, copies contents to the new case given by query. //Else, a // query key is dynamic so it will be most recent always. Initial case name is static. +// Return statement ensures that IntakeForm component is remounted on completion of query. export const setCaseType = async ( initialCaseType: string, caseQueryKey: string -) => { +): Promise => { try { - console.log('initial', initialCaseType); let initialDoc = caseTypeCollection.doc(camelize(initialCaseType)); let recentDoc = caseTypeCollection.doc(camelize(caseQueryKey)); - console.log("Uploading", caseQueryKey); initialDoc.get().then((doc) => { recentDoc.get().then(() => { - console.log("DOC DATA!!!!!", doc.data()); recentDoc.set({ key: caseQueryKey, documentList: [], @@ -265,8 +264,9 @@ export const setCaseType = async ( if (doc && doc.exists && !(initialCaseType === caseQueryKey)) { initialDoc.collection('questions').get().then(c => { if (!c.empty) { - c.forEach(d => { - recentDoc.collection('questions').add(d.data()); + c.forEach(docSnapshot => { + recentDoc.collection('questions').add(docSnapshot.data()); + docSnapshot.ref.delete(); }) } }).then(() => { @@ -279,12 +279,23 @@ export const setCaseType = async ( } }); }) + return caseQueryKey; } catch (e) { console.warn(e); throw e; } }; +export const deleteCase = async (key: string) => { + try { + await caseTypeCollection.doc(camelize(key)).delete(); + } catch (e) { + console.warn(e); + throw e; + // TODO: Add error handling. + } +}; + export const deleteQuestion = async (id:string, questionType: string) => { try { await database From 4e7857e02acd3159e50df238e9fa33100e2c025d Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Sat, 4 Jun 2022 22:44:11 -0700 Subject: [PATCH 10/15] split original setCaseType into two queries --- src/components/FormHolder/FormHolder.tsx | 14 +-- src/components/IntakeForm/IntakeForm.tsx | 26 ++++-- src/firebase/queries.ts | 112 +++++++++++++++-------- 3 files changed, 100 insertions(+), 52 deletions(-) diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 5cc6a7a..5719b74 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -6,7 +6,7 @@ import styles from "./FormHolder.module.css"; import Link from 'next/link'; import { useRouter } from 'next/router'; import { camelize } from '../../firebase/helpers'; -import { deleteCase, setCaseType } from '../../firebase/queries'; +import { deleteCase, renameCase, setCaseType } from '../../firebase/queries'; import { TextareaAutosize } from '@mui/material'; interface FormHolderProps { @@ -36,14 +36,14 @@ const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => {
{ - console.log("Before", router.query.key); - setCaseType(formTitle, titleText).then((res) => { - console.log("result", res); - router.query.key = res; - console.log("After", router.query.key); + setCaseType(titleText).then(() => { + if (!(formTitle === titleText)) { + renameCase(formTitle, titleText); + } + router.query.key = titleText; }); }}> diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index 78faf52..7acfeb1 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -43,23 +43,29 @@ const IntakeForm = () => { } const [qState, dispatch] = useReducer(intakeReducer, initialState); const loadQuestions = async (): Promise => { - console.log("Intake Form Key", router.query.key); - console.log("Router ready?", router.isReady); 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); - console.log("retrieved questions", qs); - questionMap = new Map(); - 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}) + // let qs: QuestionObj[] = await getAllQuestionsOfType(quickCaseType); + let qs: QuestionObj[]; + getAllQuestionsOfType(quickCaseType).then((res) => { + qs = res; + questionMap = new Map(); + 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}) + }) + // questionMap = new Map(); + // qs = qs.filter(q => (!deletionList.includes(q.id) && !qState.ids.includes(q.id))); + // qs.map(q => questionMap.set(q.id, q)); + // console.log("qs & questionMap", qs, questionMap); + // dispatch({type: IntakeActionTypes.LOAD, payload: qs}) }; //useEffect is called twice. At first reader & when router is ready with its query. useEffect(() => { loadQuestions(); - }, [router.isReady, router.query.key]); + }, [router.query.key]); @@ -171,6 +177,7 @@ const IntakeForm = () => { } return newState; case IntakeActionTypes.LOAD: + console.log("Load called", action.payload); action.payload.map(q => { newState.ids.push(q.id); newState.questions.push @@ -292,6 +299,7 @@ const IntakeForm = () => { > {(droppableProvided) => (
=> { try { - console.log("caseType Query", caseType); const docs = await database.collection(`caseTypes/${caseType}/questions`); const ref = await docs.orderBy("order").get(); const questions = ref.docs.map(doc => doc.data() as QuestionComponentProps); @@ -107,7 +106,6 @@ export const getAllQuestionsOfType = async ( target.answerOptions = objectToAnswerOptionsMap(target.answerOptions); i++; } - console.log("questions", questions); return questions; } catch (e) { console.warn(e); @@ -242,49 +240,91 @@ export const setQuestion = async (question: Question, maps: QuestionComponentPro } }; -//if initial Case type and the case query key do not match, then the name of the document was changed. -//Query checks if a case exists under the deprecated initial case, copies contents to the new case given by query. -//Else, a -// query key is dynamic so it will be most recent always. Initial case name is static. -// Return statement ensures that IntakeForm component is remounted on completion of query. export const setCaseType = async ( + caseType: string +) => { + try { + caseTypeCollection.doc(camelize(caseType)).set({ + key: caseType, + documentList: [], + identifier: firestoreAutoId() + }); + } catch (error) { + + } +} + +export const renameCase = async ( initialCaseType: string, caseQueryKey: string -): Promise => { +) => { try { let initialDoc = caseTypeCollection.doc(camelize(initialCaseType)); let recentDoc = caseTypeCollection.doc(camelize(caseQueryKey)); initialDoc.get().then((doc) => { - recentDoc.get().then(() => { - recentDoc.set({ - key: caseQueryKey, - documentList: [], - identifier: firestoreAutoId() - }); - if (doc && doc.exists && !(initialCaseType === caseQueryKey)) { - initialDoc.collection('questions').get().then(c => { - if (!c.empty) { - c.forEach(docSnapshot => { - recentDoc.collection('questions').add(docSnapshot.data()); - docSnapshot.ref.delete(); - }) - } - }).then(() => { - var data = doc.data(); - console.log("Data info", data); - recentDoc.set(data, {mergeFields: ['documentList', 'identifier']}).then(() => { - initialDoc.delete(); - }) - }); + initialDoc.collection('questions').get().then(c => { + if (c.empty || !doc || !doc.exists) { + return; + } else { + c.forEach(docSnapshot => { + recentDoc.collection('questions').add(docSnapshot.data()); + docSnapshot.ref.delete(); + }) } - }); + }).then(() => { + var data = doc.data(); + recentDoc.set(data, {mergeFields: ['documentList', 'identifier']}).then(() => { + initialDoc.delete(); + }) + }) }) - return caseQueryKey; - } catch (e) { - console.warn(e); - throw e; - } -}; + } catch (error) { + console.warn(error); + throw error; + }} +//if initial Case type and the case query key do not match, then the name of the document was changed. +//Query checks if a case exists under the deprecated initial case, copies contents to the new case given by query. +//Else, a +// query key is dynamic so it will be most recent always. Initial case name is static. +// Return statement ensures that IntakeForm component is remounted on completion of query. + +// export const setCaseType = async ( +// initialCaseType: string, +// caseQueryKey: string +// ): Promise => { +// try { +// let initialDoc = caseTypeCollection.doc(camelize(initialCaseType)); +// let recentDoc = caseTypeCollection.doc(camelize(caseQueryKey)); +// initialDoc.get().then((doc) => { +// recentDoc.get().then(() => { +// recentDoc.set({ +// key: caseQueryKey, +// documentList: [], +// identifier: firestoreAutoId() +// }); +// if (doc && doc.exists && !(initialCaseType === caseQueryKey)) { +// initialDoc.collection('questions').get().then(c => { +// if (!c.empty) { +// c.forEach(docSnapshot => { +// recentDoc.collection('questions').add(docSnapshot.data()); +// docSnapshot.ref.delete(); +// }) +// } +// }).then(() => { +// console.log("recent collection", recentDoc.collection('questions').get()); +// var data = doc.data(); +// recentDoc.set(data, {mergeFields: ['documentList', 'identifier']}).then(() => { +// initialDoc.delete(); +// }) +// }); +// } +// }); +// }) +// } catch (e) { +// console.warn(e); +// throw e; +// } +// }; export const deleteCase = async (key: string) => { try { From cecc13f00f5131e19c5cd251dda6555973a25801 Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Sun, 5 Jun 2022 15:47:12 -0700 Subject: [PATCH 11/15] refresh on renaming case --- src/components/FormHolder/FormHolder.tsx | 5 +++-- src/components/IntakeForm/IntakeForm.tsx | 20 ++++++-------------- src/firebase/queries.ts | 20 +++++++++++++++----- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 5719b74..49d0211 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -32,7 +32,6 @@ const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => { }} />
-

{formTitle}

{ { setCaseType(titleText).then(() => { if (!(formTitle === titleText)) { - renameCase(formTitle, titleText); + renameCase(formTitle, titleText).then(() => { + router.query.key = titleText; + }); } router.query.key = titleText; }); diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index 7acfeb1..d6b792f 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -47,25 +47,17 @@ const IntakeForm = () => { //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[]; - getAllQuestionsOfType(quickCaseType).then((res) => { - qs = res; - questionMap = new Map(); - 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}) - }) - // questionMap = new Map(); - // qs = qs.filter(q => (!deletionList.includes(q.id) && !qState.ids.includes(q.id))); - // qs.map(q => questionMap.set(q.id, q)); - // console.log("qs & questionMap", qs, questionMap); - // dispatch({type: IntakeActionTypes.LOAD, payload: qs}) + let qs: QuestionObj[] = await getAllQuestionsOfType(quickCaseType); + questionMap = new Map(); + 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}) }; //useEffect is called twice. At first reader & when router is ready with its query. useEffect(() => { loadQuestions(); - }, [router.query.key]); + }, [router.isReady]); diff --git a/src/firebase/queries.ts b/src/firebase/queries.ts index e53f408..09d301b 100644 --- a/src/firebase/queries.ts +++ b/src/firebase/queries.ts @@ -244,13 +244,21 @@ export const setCaseType = async ( caseType: string ) => { try { - caseTypeCollection.doc(camelize(caseType)).set({ - key: caseType, - documentList: [], - identifier: firestoreAutoId() + let doc = caseTypeCollection.doc(camelize(caseType)); + doc.get().then((d) => { + console.log("does it exist?", !d.exists, d.data()); + if (!d.exists) { + console.log('only call sometimes'); + doc.set({ + key: caseType, + documentList: [], + identifier: firestoreAutoId() + }) + } }); } catch (error) { - + console.warn(error); + throw error; } } @@ -273,8 +281,10 @@ export const renameCase = async ( } }).then(() => { var data = doc.data(); + console.log("see that data", data); recentDoc.set(data, {mergeFields: ['documentList', 'identifier']}).then(() => { initialDoc.delete(); + window.location.reload(); }) }) }) From 277f271641ffddfbd844ed1a044f26fdeec2f867 Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Sun, 5 Jun 2022 22:14:22 -0700 Subject: [PATCH 12/15] Styling + finished delete button --- .../FormHolder/FormHolder.module.css | 47 +++++++++++++++++-- src/components/FormHolder/FormHolder.tsx | 21 ++++++--- src/components/IntakeForm/IntakeForm.tsx | 1 - src/components/Question/question.tsx | 3 -- src/firebase/queries.ts | 46 ------------------ src/pages/IntakeForms/index.tsx | 34 ++++++++++---- 6 files changed, 83 insertions(+), 69 deletions(-) diff --git a/src/components/FormHolder/FormHolder.module.css b/src/components/FormHolder/FormHolder.module.css index d2a276d..25dc1f5 100644 --- a/src/components/FormHolder/FormHolder.module.css +++ b/src/components/FormHolder/FormHolder.module.css @@ -2,10 +2,11 @@ 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: baseline; + align-items: center; outline: none; } @@ -14,10 +15,50 @@ } .title { - align-items: baseline; + 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; +} + + .icons { padding-right: 20px; -} \ No newline at end of file + border: none; + background-color: transparent; +} diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 49d0211..993d8ac 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -5,22 +5,25 @@ import DeleteIcon from '@mui/icons-material/Delete'; import styles from "./FormHolder.module.css"; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { camelize } from '../../firebase/helpers'; import { deleteCase, renameCase, setCaseType } from '../../firebase/queries'; import { TextareaAutosize } from '@mui/material'; interface FormHolderProps { formTitle?: string, + id: string + deleteFunc: Function, } -const FormHolder = ({formTitle="New Case Type"}: FormHolderProps) => { +const FormHolder = ({formTitle="New Case Type", id, deleteFunc}: FormHolderProps) => { const [titleText, setTitleText] = useState(formTitle); const router = useRouter(); router.query.key = formTitle; return (
- +
+ +
{ router.query.key = titleText; }); }}> - + -
diff --git a/src/components/IntakeForm/IntakeForm.tsx b/src/components/IntakeForm/IntakeForm.tsx index d6b792f..cdf35ea 100644 --- a/src/components/IntakeForm/IntakeForm.tsx +++ b/src/components/IntakeForm/IntakeForm.tsx @@ -169,7 +169,6 @@ const IntakeForm = () => { } return newState; case IntakeActionTypes.LOAD: - console.log("Load called", action.payload); action.payload.map(q => { newState.ids.push(q.id); newState.questions.push diff --git a/src/components/Question/question.tsx b/src/components/Question/question.tsx index 6c50b12..9b935d5 100644 --- a/src/components/Question/question.tsx +++ b/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} diff --git a/src/firebase/queries.ts b/src/firebase/queries.ts index 09d301b..b52f168 100644 --- a/src/firebase/queries.ts +++ b/src/firebase/queries.ts @@ -246,9 +246,7 @@ export const setCaseType = async ( try { let doc = caseTypeCollection.doc(camelize(caseType)); doc.get().then((d) => { - console.log("does it exist?", !d.exists, d.data()); if (!d.exists) { - console.log('only call sometimes'); doc.set({ key: caseType, documentList: [], @@ -281,7 +279,6 @@ export const renameCase = async ( } }).then(() => { var data = doc.data(); - console.log("see that data", data); recentDoc.set(data, {mergeFields: ['documentList', 'identifier']}).then(() => { initialDoc.delete(); window.location.reload(); @@ -292,49 +289,6 @@ export const renameCase = async ( console.warn(error); throw error; }} -//if initial Case type and the case query key do not match, then the name of the document was changed. -//Query checks if a case exists under the deprecated initial case, copies contents to the new case given by query. -//Else, a -// query key is dynamic so it will be most recent always. Initial case name is static. -// Return statement ensures that IntakeForm component is remounted on completion of query. - -// export const setCaseType = async ( -// initialCaseType: string, -// caseQueryKey: string -// ): Promise => { -// try { -// let initialDoc = caseTypeCollection.doc(camelize(initialCaseType)); -// let recentDoc = caseTypeCollection.doc(camelize(caseQueryKey)); -// initialDoc.get().then((doc) => { -// recentDoc.get().then(() => { -// recentDoc.set({ -// key: caseQueryKey, -// documentList: [], -// identifier: firestoreAutoId() -// }); -// if (doc && doc.exists && !(initialCaseType === caseQueryKey)) { -// initialDoc.collection('questions').get().then(c => { -// if (!c.empty) { -// c.forEach(docSnapshot => { -// recentDoc.collection('questions').add(docSnapshot.data()); -// docSnapshot.ref.delete(); -// }) -// } -// }).then(() => { -// console.log("recent collection", recentDoc.collection('questions').get()); -// var data = doc.data(); -// recentDoc.set(data, {mergeFields: ['documentList', 'identifier']}).then(() => { -// initialDoc.delete(); -// }) -// }); -// } -// }); -// }) -// } catch (e) { -// console.warn(e); -// throw e; -// } -// }; export const deleteCase = async (key: string) => { try { diff --git a/src/pages/IntakeForms/index.tsx b/src/pages/IntakeForms/index.tsx index 601fd8a..ec3584b 100644 --- a/src/pages/IntakeForms/index.tsx +++ b/src/pages/IntakeForms/index.tsx @@ -6,19 +6,32 @@ import styles from "./styles.module.css" import Layout from "../../components/Layout"; import { firestoreAutoId } from "../../firebase/helpers"; import { getAllCaseTypes } from "../../firebase/queries"; +import { stringify } from "querystring"; export default function IntakeHomeScreen() { - const [caseForms, setCaseForms] = useState([]); - let keyList=[]; + const [caseForms, setCaseForms] = useState(new Map()); + + + function removeForm(id) { + let cloneMap = new Map(caseForms); + cloneMap.delete(id); + setCaseForms(cloneMap); + } + const loadCases = async (): Promise => { let cL: CaseType[] = await getAllCaseTypes(); - let copyArray=[]; + let copyMap= new Map(); cL.map(c => { - if (!keyList.includes(c.key)) { - copyArray.push(); - } + let id = firestoreAutoId(); + copyMap.set(id, + + ); }); - setCaseForms(copyArray); + setCaseForms(copyMap); }; useEffect(() => { @@ -30,14 +43,15 @@ export default function IntakeHomeScreen() {

Intake Forms

- {caseForms.length ? caseForms : Loading...} + {caseForms.size ? Array.from(caseForms.values()) : Loading...}
); } From 07fb77221bfd0bb49f1f2232a01d18952385b41f Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Sun, 5 Jun 2022 22:24:57 -0700 Subject: [PATCH 13/15] redundant files --- .../IntakeHome/IntakeHome.module.css | 34 ---------- src/components/IntakeHome/IntakeHome.tsx | 67 ------------------- 2 files changed, 101 deletions(-) delete mode 100644 src/components/IntakeHome/IntakeHome.module.css delete mode 100644 src/components/IntakeHome/IntakeHome.tsx diff --git a/src/components/IntakeHome/IntakeHome.module.css b/src/components/IntakeHome/IntakeHome.module.css deleted file mode 100644 index 6cd0e59..0000000 --- a/src/components/IntakeHome/IntakeHome.module.css +++ /dev/null @@ -1,34 +0,0 @@ -.tab { - width: 75.89px; - background-color: orange; - height: 20px; -} - -.title { - font-style: normal; - font-weight: 600; - font-size: 24px; - line-height: 28px; - color: var(--jet); -} - -.page { - width: 91%; - flex-direction: column; - justify-content: center; - align-self: center; - margin-left: 3%; - margin-right: 6%; - display: flex; - position: absolute; -} - -.overlay { - margin-top: 8%; - height: 100%; - color: var(--jet); - font-style: normal; - font-weight: 700; - font-size: 32px; - line-height: 38px; -} \ No newline at end of file diff --git a/src/components/IntakeHome/IntakeHome.tsx b/src/components/IntakeHome/IntakeHome.tsx deleted file mode 100644 index 0f9ccbf..0000000 --- a/src/components/IntakeHome/IntakeHome.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { getAllCaseTypes } from "../../firebase/queries"; -import { useEffect } from "react"; -import { firestoreAutoId } from "../../firebase/helpers"; -import styles from "./IntakeHome.module.css"; -import { CaseType, QuestionType } from "../../../types"; - - -var caseMap = new Map(); -const componentList = []; - - -const IntakeHome = () => { - const loadCases = async (): Promise => { - let cL: CaseType[] = await getAllCaseTypes(); - caseMap = new Map(); - console.log("CL", cL); - cL.map(c => { - var id = firestoreAutoId() - console.log("key", c.key); - console.log("Type", QuestionType[c.key]); - caseMap.set(id, QuestionType[c.key]); - }); - console.log("caseMap", caseMap); - }; - - function getCaseName(key) { - switch(key) { - case QuestionType.General: - return "General Questions"; - case QuestionType.Daca: - return "Daca Renewal Questions"; - case QuestionType.Adjustment: - return "Adjustment Of Status Questions"; - default: - return "I90 Questions"; - } - } - - const makeComponent = (id, key) => { - componentList.push({id, key}); - return ( -
-
- {getCaseName(key)} -
-
- ) - } - - - useEffect(() => { - loadCases(); - }, []); - - console.log("componentList again", componentList); - console.log("caseMap again", caseMap); - return ( -
-
- Intake Forms -
- {caseMap.forEach((id, key) => makeComponent(id, key))} -
- ); -} - -export default IntakeHome; From 82fd12e4a5a8db0325702961edc176ae66f209f6 Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Mon, 13 Jun 2022 16:15:12 -0700 Subject: [PATCH 14/15] warnings, conditional routing + duplicate name checking --- src/components/FormHolder/FormHolder.tsx | 61 +++++++++++----------- src/firebase/queries.ts | 11 +++- src/pages/IntakeForms/index.tsx | 64 ++++++++++++++++-------- 3 files changed, 86 insertions(+), 50 deletions(-) diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index 993d8ac..a1d09fd 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -9,15 +9,20 @@ import { deleteCase, renameCase, setCaseType } from '../../firebase/queries'; import { TextareaAutosize } from '@mui/material'; interface FormHolderProps { - formTitle?: string, - id: string - deleteFunc: Function, + staticTitle: string, + id: string, + connecterFunctions: { + deleteForm: Function; + dupesExist: Function; + updateNameList: Function; + } } -const FormHolder = ({formTitle="New Case Type", id, deleteFunc}: FormHolderProps) => { - const [titleText, setTitleText] = useState(formTitle); +const FormHolder = ({staticTitle, id, connecterFunctions}: FormHolderProps) => { + const [dynamicTitle, setDynamicTitle] = useState(staticTitle); const router = useRouter(); - router.query.key = formTitle; + const {deleteForm, dupesExist, updateNameList} = connecterFunctions; + router.query.key = staticTitle; return (
@@ -25,39 +30,39 @@ const FormHolder = ({formTitle="New Case Type", id, deleteFunc}: FormHolderProps
{ - setTitleText(e.target.value); - formTitle=e.target.value; - router.query.key = e.target.value; + let newName = e.target.value + updateNameList(id, newName); + setDynamicTitle(newName); + router.query.key = newName; }} />
- - { - setCaseType(titleText).then(() => { - if (!(formTitle === titleText)) { - renameCase(formTitle, titleText).then(() => { - router.query.key = titleText; - }); + From cdd091dddfa8d8496dbc4565d6833e9bc45f19d6 Mon Sep 17 00:00:00 2001 From: Andrei Tan Date: Mon, 13 Jun 2022 18:04:56 -0700 Subject: [PATCH 15/15] some styling --- .../FormHolder/FormHolder.module.css | 13 ++++-- src/components/FormHolder/FormHolder.tsx | 2 +- src/firebase/queries.ts | 3 +- src/pages/IntakeForms/index.tsx | 41 +++++++++++-------- src/pages/IntakeForms/styles.module.css | 11 ++++- 5 files changed, 45 insertions(+), 25 deletions(-) diff --git a/src/components/FormHolder/FormHolder.module.css b/src/components/FormHolder/FormHolder.module.css index 25dc1f5..4e450ba 100644 --- a/src/components/FormHolder/FormHolder.module.css +++ b/src/components/FormHolder/FormHolder.module.css @@ -56,9 +56,14 @@ cursor: wait; } - -.icons { - padding-right: 20px; +.editButton { border: none; background-color: transparent; -} + cursor: pointer; +} + +.editButton:active { + cursor: wait; +} + + diff --git a/src/components/FormHolder/FormHolder.tsx b/src/components/FormHolder/FormHolder.tsx index a1d09fd..5975f67 100644 --- a/src/components/FormHolder/FormHolder.tsx +++ b/src/components/FormHolder/FormHolder.tsx @@ -42,7 +42,7 @@ const FormHolder = ({staticTitle, id, connecterFunctions}: FormHolderProps) => { />
- +
+

Intake Forms

+
+ +
{caseForms.size ? Array.from(caseForms.values()) : Loading...}
diff --git a/src/pages/IntakeForms/styles.module.css b/src/pages/IntakeForms/styles.module.css index 08b22de..d3c77ff 100644 --- a/src/pages/IntakeForms/styles.module.css +++ b/src/pages/IntakeForms/styles.module.css @@ -2,4 +2,13 @@ display: flex; flex-direction: row-reverse; margin: 20px 0px; -} \ No newline at end of file + margin-right: 5%; + left: 500px; + color: var(--prussian-blue); + justify-content: space-evenly; +} + +.overlay { + display: flex; + justify-content:space-between +} \ No newline at end of file