cp-159: Add more steps to the survey#159

frontend/src/pages/surveys/survey.tsx

@@ -29,6 +29,11 @@ const Survey: React.FC = () => {
       void dispatch(
         authActions.createUserSurvey({
           userId: userId,
+          journaling_experience: [],
+          feelings: [],
+          goals: [],
+          worries: [],
+          meditation_experience: [],
           preferences: options,
         }),
       );

mobile/src/libs/components/app/app.tsx

@@ -1,6 +1,6 @@
 import 'fast-text-encoding';
 
-import { NavigationContainer } from '@react-navigation/native';
+import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import React from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import SplashScreen from 'react-native-splash-screen';
@@ -14,6 +14,15 @@ import { Root as RootNavigation } from '#navigations/navigations';
 import { SPLASH_SCREEN_HIDE_TIMEOUT } from './libs/constants';
 import { styles } from './styles';
 
+// Prevent white background color on nested navigation stack
+const theme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    background: 'transparent',
+  },
+};
+
 const App: React.FC = () => {
   useEffect(() => {
     // To prevent white screen after splash screen disappears
@@ -29,7 +38,7 @@ const App: React.FC = () => {
   return (
     <StoreProvider store={store.instance}>
       <GestureHandlerRootView style={styles.root}>
-        <NavigationContainer>
+        <NavigationContainer theme={theme}>
           <RootNavigation />
         </NavigationContainer>
         <Toast />

mobile/src/libs/enums/enums.ts

@@ -5,6 +5,7 @@ export {
   MeditationScreenName,
   ProfileScreenName,
   RootScreenName,
+  SurveyScreenName,
 } from './navigation/navigation';
 export { AppColor } from './ui/ui';
 export {

mobile/src/libs/enums/navigation/navigation.ts

@@ -3,3 +3,4 @@ export { MainScreenName } from './main-screen-name.enum';
 export { MeditationScreenName } from './meditation-screen-name.enum';
 export { ProfileScreenName } from './profile-screen-name.enum';
 export { RootScreenName } from './root-screen-name.enum';
+export { SurveyScreenName } from './survey-screen-name.enum';

mobile/src/libs/enums/navigation/survey-screen-name.enum.ts

@@ -0,0 +1,10 @@
+const SurveyScreenName = {
+  PREFERENCES: 'preferences',
+  FEELINGS: 'feeling',
+  GOALS: 'goals',
+  WORRIES: 'worries',
+  MEDITATION_EXPERIENCE: 'meditation experience',
+  JOURNALING_EXPERIENCE: 'journaling experience',
+} as const;
+
+export { SurveyScreenName };

mobile/src/libs/types/navigation/navigation.ts

@@ -4,4 +4,5 @@ export { type NavigationItem } from './navigation-item.type';
 export { type NavigationScreenProperties } from './navigation-screen-properties.type';
 export { type ProfileNavigationParameterList } from './profile-navigation-parameter-list.type';
 export { type RootNavigationParameterList } from './root-navigation-parameter-list.type';
+export { type SurveyNavigationParameterList } from './survey-navigation-parameter-list.type';
 export { type TabNavigationParameterList } from './tab-navigation-parameter-list.type';

mobile/src/libs/types/navigation/survey-navigation-parameter-list.type.ts

@@ -0,0 +1,12 @@
+import { type SurveyScreenName } from '#libs/enums/enums';
+
+type SurveyNavigationParameterList = {
+  [SurveyScreenName.PREFERENCES]: undefined | object;
+  [SurveyScreenName.FEELINGS]: undefined | object;
+  [SurveyScreenName.GOALS]: undefined | object;
+  [SurveyScreenName.WORRIES]: undefined | object;
+  [SurveyScreenName.MEDITATION_EXPERIENCE]: undefined | object;
+  [SurveyScreenName.JOURNALING_EXPERIENCE]: undefined | object;
+};
+
+export { type SurveyNavigationParameterList };

mobile/src/libs/types/types.ts

@@ -8,6 +8,7 @@ export {
   type NavigationScreenProperties,
   type ProfileNavigationParameterList,
   type RootNavigationParameterList,
+  type SurveyNavigationParameterList,
   type TabNavigationParameterList,
 } from './navigation/navigation';
 export {

mobile/src/screens/survey/components/feelings-step/feelings-step.tsx

@@ -0,0 +1,124 @@
+import { type RouteProp } from '@react-navigation/native';
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
+import React from 'react';
+
+import { Button, Input, ScrollView, Text } from '#libs/components/components';
+import { SurveyScreenName } from '#libs/enums/enums';
+import {
+  useAppForm,
+  useCallback,
+  useFormController,
+  useNavigation,
+} from '#libs/hooks/hooks';
+import { type SurveyNavigationParameterList } from '#libs/types/types';
+import {
+  getSurveyCategories,
+  type SurveyInputDto,
+  surveyInputValidationSchema,
+} from '#packages/survey/survey';
+import {
+  DEFAULT_SURVEY_PAYLOAD,
+  FEELING_CATEGORIES,
+  TEXTAREA_ROWS_COUNT,
+} from '#screens/survey/libs/constants';
+
+import { SurveyCategory } from '../components';
+import { styles } from './styles';
+
+type FeelingsStepProperties = {
+  route: RouteProp<
+    SurveyNavigationParameterList,
+    typeof SurveyScreenName.FEELINGS
+  >;
+};
+
+type FeelingsStepInitialParameters = {
+  setFeelingsSurvey: (payload: string[]) => void;
+};
+
+const FeelingsStep: React.FC<FeelingsStepProperties> = ({ route }) => {
+  const { setFeelingsSurvey } = route.params as FeelingsStepInitialParameters;
+  const navigation =
+    useNavigation<NativeStackNavigationProp<SurveyNavigationParameterList>>();
+
+  const { control, errors, isValid, handleSubmit } = useAppForm<SurveyInputDto>(
+    {
+      defaultValues: DEFAULT_SURVEY_PAYLOAD,
+      validationSchema: surveyInputValidationSchema,
+    },
+  );
+  const {
+    field: { onChange: onCategoryChange, value: categoriesValue },
+  } = useFormController({
+    name: 'preferences',
+    control,
+  });
+  const hasOther = categoriesValue.includes('Other');
+  const handleFieldChange = useCallback(
+    (option: string) => {
+      if (categoriesValue.includes(option)) {
+        onCategoryChange(
+          categoriesValue.filter((category) => {
+            return category !== option;
+          }),
+        );
+
+        return;
+      }
+
+      onCategoryChange([...categoriesValue, option]);
+    },
+    [categoriesValue, onCategoryChange],
+  );
+
+  const handleSurveySubmit = useCallback(
+    (payload: SurveyInputDto) => {
+      setFeelingsSurvey(getSurveyCategories(payload));
+    },
+    [setFeelingsSurvey],
+  );
+
+  const handleContinue = (): void => {
+    navigation.navigate(SurveyScreenName.GOALS);
+    void handleSubmit(handleSurveySubmit)();
+  };
+
+  const handleBack = (): void => {
+    navigation.navigate(SurveyScreenName.PREFERENCES);
+  };
+
+  return (
+    <ScrollView
+      style={styles.surveyContainer}
+      showsVerticalScrollIndicator={false}
+    >
+      <Text style={styles.titleText}>How have you been feeling lately?</Text>
+      {FEELING_CATEGORIES.map((category) => {
+        return (
+          <SurveyCategory
+            key={category}
+            onChange={handleFieldChange}
+            label={category}
+          />
+        );
+      })}
+      {hasOther && (
+        <Input
+          control={control}
+          errors={errors}
+          name="other"
+          placeholder="Enter your preferences"
+          rowsCount={TEXTAREA_ROWS_COUNT}
+        />
+      )}
+      <Button
+        label="Continue"
+        onPress={handleContinue}
+        isDisabled={!isValid}
+        type="outlined"
+      />
+      <Button label="Go back" onPress={handleBack} type="solid" />
+    </ScrollView>
+  );
+};
+export { FeelingsStep };

mobile/src/screens/survey/components/feelings-step/styles.ts

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+import { AppColor } from '#libs/enums/enums';
+
+const styles = StyleSheet.create({
+  surveyContainer: {
+    flex: 1,
+    marginTop: 40,
+    paddingHorizontal: 55,
+  },
+  otherTextInput: {
+    backgroundColor: AppColor.BLUE_100_ALPHA_70,
+    borderRadius: 8,
+    padding: 8,
+    borderWidth: 1,
+    marginBottom: 20,
+    borderColor: AppColor.WHITE,
+    color: AppColor.BLUE_300,
+    fontSize: 16,
+  },
+  titleText: {
+    fontSize: 22,
+    color: AppColor.WHITE,
+    marginBottom: 30,
+    marginTop: 30,
+  },
+  placeholder: {
+    color: AppColor.WHITE,
+  },
+});
+
+export { styles };

mobile/src/screens/survey/components/goals-step/goals-step.tsx

@@ -0,0 +1,126 @@
+import { type RouteProp } from '@react-navigation/native';
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
+import React from 'react';
+
+import { Button, Input, ScrollView, Text } from '#libs/components/components';
+import { SurveyScreenName } from '#libs/enums/enums';
+import {
+  useAppForm,
+  useCallback,
+  useFormController,
+  useNavigation,
+} from '#libs/hooks/hooks';
+import { type SurveyNavigationParameterList } from '#libs/types/types';
+import {
+  getSurveyCategories,
+  type SurveyInputDto,
+  surveyInputValidationSchema,
+} from '#packages/survey/survey';
+import {
+  DEFAULT_SURVEY_PAYLOAD,
+  GOALS_CATEGORIES,
+  TEXTAREA_ROWS_COUNT,
+} from '#screens/survey/libs/constants';
+
+import { SurveyCategory } from '../components';
+import { styles } from './styles';
+
+type GoalsStepProperties = {
+  route: RouteProp<
+    SurveyNavigationParameterList,
+    typeof SurveyScreenName.GOALS
+  >;
+};
+
+type GoalsStepInitialParameters = {
+  setGoalsSurvey: (payload: string[]) => void;
+};
+
+const GoalsStep: React.FC<GoalsStepProperties> = ({ route }) => {
+  const { setGoalsSurvey } = route.params as GoalsStepInitialParameters;
+  const navigation =
+    useNavigation<NativeStackNavigationProp<SurveyNavigationParameterList>>();
+
+  const { control, errors, isValid, handleSubmit } = useAppForm<SurveyInputDto>(
+    {
+      defaultValues: DEFAULT_SURVEY_PAYLOAD,
+      validationSchema: surveyInputValidationSchema,
+    },
+  );
+  const {
+    field: { onChange: onCategoryChange, value: categoriesValue },
+  } = useFormController({
+    name: 'preferences',
+    control,
+  });
+  const hasOther = categoriesValue.includes('Other');
+  const handleFieldChange = useCallback(
+    (option: string) => {
+      if (categoriesValue.includes(option)) {
+        onCategoryChange(
+          categoriesValue.filter((category) => {
+            return category !== option;
+          }),
+        );
+
+        return;
+      }
+
+      onCategoryChange([...categoriesValue, option]);
+    },
+    [categoriesValue, onCategoryChange],
+  );
+
+  const handleSurveySubmit = useCallback(
+    (payload: SurveyInputDto) => {
+      setGoalsSurvey(getSurveyCategories(payload));
+    },
+    [setGoalsSurvey],
+  );
+
+  const handleContinue = (): void => {
+    navigation.navigate(SurveyScreenName.WORRIES);
+    void handleSubmit(handleSurveySubmit)();
+  };
+
+  const handleBack = (): void => {
+    navigation.navigate(SurveyScreenName.FEELINGS);
+  };
+
+  return (
+    <ScrollView
+      style={styles.surveyContainer}
+      showsVerticalScrollIndicator={false}
+    >
+      <Text style={styles.titleText}>
+        What do you want to achive with CalmPal?
+      </Text>
+      {GOALS_CATEGORIES.map((category) => {
+        return (
+          <SurveyCategory
+            key={category}
+            onChange={handleFieldChange}
+            label={category}
+          />
+        );
+      })}
+      {hasOther && (
+        <Input
+          control={control}
+          errors={errors}
+          name="other"
+          placeholder="Enter your preferences"
+          rowsCount={TEXTAREA_ROWS_COUNT}
+        />
+      )}
+      <Button
+        label="Continue"
+        onPress={handleContinue}
+        isDisabled={!isValid}
+        type="outlined"
+      />
+      <Button label="Go back" onPress={handleBack} type="solid" />
+    </ScrollView>
+  );
+};
+export { GoalsStep };