Add PersonalInfo form and ask; Fix Meals

src/components/Asks/AskPersonalInfo.tsx

@@ -0,0 +1,36 @@
+import { get } from "lodash"
+import { useCallback } from "react"
+import { fetchVolunteerAsksSet } from "../../store/volunteerAsksSet"
+import { useAskTools, addAsk, answerLaterOnProfile } from "./utils"
+import PersonalInfoForm, {
+    fetchFor as fetchForPersonalInfoForm,
+} from "../VolunteerBoard/PersonalInfoForm/PersonalInfoForm"
+import { useUserPersonalInfo } from "../VolunteerBoard/personalInfo.utils"
+
+export function AskPersonalInfo(asks: JSX.Element[], id: number): void {
+    const { dispatch, jwtToken, volunteerAsks } = useAskTools()
+
+    const onSubmit = useCallback((): void => {
+        dispatch(
+            fetchVolunteerAsksSet(jwtToken, 0, {
+                hiddenAsks: [...(volunteerAsks?.hiddenAsks || []), id],
+            })
+        )
+    }, [dispatch, id, jwtToken, volunteerAsks?.hiddenAsks])
+
+    const [personalInfo] = useUserPersonalInfo()
+    const photo = get(personalInfo, "photo", false)
+    const needToShow = !/^[0-9]/.test(photo || "")
+
+    addAsk(
+        asks,
+        id,
+        volunteerAsks,
+        false,
+        needToShow,
+        <PersonalInfoForm afterSubmit={onSubmit}>{answerLaterOnProfile}</PersonalInfoForm>
+    )
+}
+
+// Fetch server-side data here
+export const fetchFor = [...fetchForPersonalInfoForm]

src/components/Asks/index.tsx

@@ -6,7 +6,8 @@ import { AskWelcome } from "./AskWelcome"
 import { AskDiscord, fetchFor as fetchForDiscord } from "./AskDiscord"
 import { AskDayWishes, fetchFor as fetchForDayWishes } from "./AskDayWishes"
 import { AskHosting, fetchFor as fetchForHosting } from "./AskHosting"
-import { AskMeals, fetchFor as fetchForMeals } from "./AskMeals"
+// import { AskMeals, fetchFor as fetchForMeals } from "./AskMeals"
+import { AskPersonalInfo, fetchFor as fetchForPersonalInfo } from "./AskPersonalInfo"
 import { AskTeamWishes, fetchFor as fetchForTeamWishes } from "./AskTeamWishes"
 import {
     AskParticipationDetails,
@@ -24,8 +25,9 @@ const Asks = (): JSX.Element | null => {
     AskDayWishes(asks, 10)
     AskTeamWishes(asks, 11)
     AskParticipationDetails(asks, 12)
+    AskPersonalInfo(asks, 15)
     AskHosting(asks, 20)
-    AskMeals(asks, 22)
+    // AskMeals(asks, 22)
 
     AskPushNotif(asks, 99)
 
@@ -63,7 +65,8 @@ export const fetchFor = [
     ...fetchForDiscord,
     ...fetchForDayWishes,
     ...fetchForHosting,
-    ...fetchForMeals,
+    // ...fetchForMeals,
     ...fetchForTeamWishes,
     ...fetchForParticipationDetails,
+    ...fetchForPersonalInfo,
 ]