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,
+          journalingExperience: '',
+          feelings: [],
+          goals: [],
+          worries: [],
+          meditationExperience: '',
           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/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, FontFamily } 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: 'feelings',
+  GOALS: 'goals',
+  WORRIES: 'worries',
+  MEDITATION_EXPERIENCE: 'meditationExperience',
+  JOURNALING_EXPERIENCE: 'journalingExperience',
+} as const;
+
+export { SurveyScreenName };

mobile/src/libs/packages/store/store.package.ts

@@ -15,6 +15,7 @@ import { reducer as authReducer } from '#slices/auth/auth';
 import { reducer as chatsReducer } from '#slices/chats/chats';
 import { reducer as journalReducer } from '#slices/journal/journal';
 import { reducer as meditationReducer } from '#slices/meditation/meditation';
+import { reducer as surveyReducer } from '#slices/survey/survey';
 
 import { type Config } from '../config/config';
 import { notification } from '../notification/notification';
@@ -26,6 +27,7 @@ type RootReducer = {
   auth: ReturnType<typeof authReducer>;
   journal: ReturnType<typeof journalReducer>;
   chats: ReturnType<typeof chatsReducer>;
+  survey: ReturnType<typeof surveyReducer>;
   meditation: ReturnType<typeof meditationReducer>;
 };
 
@@ -56,6 +58,7 @@ class Store {
         auth: authReducer,
         journal: journalReducer,
         chats: chatsReducer,
+        survey: surveyReducer,
         meditation: meditationReducer,
       },
       middleware: (getDefaultMiddleware) => {

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

@@ -4,4 +4,6 @@ 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 SurveyNavigationItem } from './survey-navigation-item.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-item.type.ts

@@ -0,0 +1,8 @@
+import { type SurveyNavigationParameterList } from './survey-navigation-parameter-list.type';
+
+type SurveyNavigationItem = {
+  name: keyof SurveyNavigationParameterList;
+  component: React.ComponentType;
+};
+
+export { type SurveyNavigationItem };

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

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

mobile/src/navigations/navigations.tsx

@@ -2,4 +2,5 @@ export { Chat } from './chat/chat';
 export { Main } from './main/main';
 export { Meditation } from './meditation/meditation';
 export { Root } from './root/root';
+export { Survey } from './survey/survey';
 export { UserProfile } from './user-profile/user-profile';

mobile/src/navigations/root/libs/constants/constants.ts

@@ -1,8 +1,7 @@
 import { RootScreenName } from '#libs/enums/enums';
 import { type NavigationItem } from '#libs/types/types';
-import { Main, UserProfile } from '#navigations/navigations';
+import { Main, Survey, UserProfile } from '#navigations/navigations';
 import { Auth } from '#screens/auth/auth';
-import { Survey } from '#screens/survey/survey';
 
 const NAVIGATION_ITEMS: NavigationItem[] = [
   {

mobile/src/navigations/survey/libs/constants.ts

@@ -0,0 +1,39 @@
+import { SurveyScreenName } from '#libs/enums/enums';
+import { type SurveyNavigationItem } from '#libs/types/types';
+import {
+  FeelingsStep,
+  GoalsStep,
+  JournalingStep,
+  MeditationStep,
+  PreferencesStep,
+  WorriesStep,
+} from '#screens/survey/components/components';
+
+const SURVEY_NAVIGATION_ITEMS: SurveyNavigationItem[] = [
+  {
+    name: SurveyScreenName.PREFERENCES,
+    component: PreferencesStep,
+  },
+  {
+    name: SurveyScreenName.FEELINGS,
+    component: FeelingsStep,
+  },
+  {
+    name: SurveyScreenName.GOALS,
+    component: GoalsStep,
+  },
+  {
+    name: SurveyScreenName.WORRIES,
+    component: WorriesStep,
+  },
+  {
+    name: SurveyScreenName.MEDITATION_EXPERIENCE,
+    component: MeditationStep,
+  },
+  {
+    name: SurveyScreenName.JOURNALING_EXPERIENCE,
+    component: JournalingStep,
+  },
+];
+
+export { SURVEY_NAVIGATION_ITEMS };

mobile/src/navigations/survey/survey.tsx

@@ -0,0 +1,44 @@
+import {
+  createNativeStackNavigator,
+  type NativeStackNavigationOptions,
+} from '@react-navigation/native-stack';
+import React from 'react';
+
+import { SignBackground } from '#libs/components/components';
+import { useAppDispatch, useEffect } from '#libs/hooks/hooks';
+import { type SurveyNavigationParameterList } from '#libs/types/types';
+import { actions as authActions } from '#slices/auth/auth';
+
+import { SURVEY_NAVIGATION_ITEMS } from './libs/constants';
+
+const NativeStack = createNativeStackNavigator<SurveyNavigationParameterList>();
+
+const screenOptions: NativeStackNavigationOptions = {
+  headerShown: false,
+};
+
+const Survey: React.FC = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    void dispatch(authActions.getAuthenticatedUser());
+  }, [dispatch]);
+
+  return (
+    <SignBackground>
+      <NativeStack.Navigator screenOptions={screenOptions}>
+        {SURVEY_NAVIGATION_ITEMS.map((screen) => {
+          return (
+            <NativeStack.Screen
+              name={screen.name}
+              component={screen.component}
+              key={screen.name}
+            />
+          );
+        })}
+      </NativeStack.Navigator>
+    </SignBackground>
+  );
+};
+
+export { Survey };

mobile/src/packages/survey/libs/types/types.ts

@@ -1,5 +1,6 @@
 export {
   type SurveyGetAllItemResponseDto,
-  type SurveyInputDto,
+  type SurveyMultipleInputDto,
+  type SurveyOneInputDto,
   type SurveyRequestDto,
 } from 'shared/build/index.js';

mobile/src/packages/survey/libs/validation-shemas/validation-schemas.ts

@@ -1 +1 @@
-export { surveyInputValidationSchema } from 'shared/build/index.js';
+export { surveyInputValidationSchemaMultiple } from 'shared/build/index.js';

mobile/src/packages/survey/survey.ts

@@ -2,7 +2,8 @@ export { PREFERENCES_OTHER_CATEGORY } from './libs/constants/constants';
 export { getSurveyCategories } from './libs/helpers/helpers';
 export {
   type SurveyGetAllItemResponseDto,
-  type SurveyInputDto,
+  type SurveyMultipleInputDto,
+  type SurveyOneInputDto,
   type SurveyRequestDto,
 } from './libs/types/types';
-export { surveyInputValidationSchema } from './libs/validation-shemas/validation-schemas';
+export { surveyInputValidationSchemaMultiple } from './libs/validation-shemas/validation-schemas';

mobile/src/screens/survey/components/components.tsx

@@ -1,2 +1,9 @@
+export { FeelingsStep } from './feelings-step/feelings-step';
+export { GoalsStep } from './goals-step/goals-step';
+export { JournalingStep } from './journaling-step/journaling-step';
+export { MeditationStep } from './meditation-step/meditation-step';
 export { PreferencesStep } from './preferences-step/preferences-step';
 export { SurveyCategory } from './survey-category/survey-category';
+export { SurveyStepMultiple } from './survey-step/survey-step-multiple';
+export { SurveyStepOne } from './survey-step/survey-step-one';
+export { WorriesStep } from './worries-step/worries-step';

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

@@ -0,0 +1,27 @@
+import { type NavigationProp } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+
+import { SurveyScreenName } from '#libs/enums/enums';
+import { type SurveyNavigationParameterList } from '#libs/types/types';
+import { FEELING_CATEGORIES } from '#screens/survey/libs/constants/constants';
+
+import { SurveyStepMultiple } from '../components';
+
+const FeelingsStep: React.FC = () => {
+  const navigation =
+    useNavigation<NavigationProp<SurveyNavigationParameterList>>();
+
+  return (
+    <SurveyStepMultiple
+      stepSurvey={SurveyScreenName.FEELINGS}
+      navigation={navigation}
+      stepTitle="How have you been feeling lately?"
+      categories={FEELING_CATEGORIES}
+      nextScreen={SurveyScreenName.GOALS}
+      previousScreen={SurveyScreenName.PREFERENCES}
+    />
+  );
+};
+
+export { FeelingsStep };

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

@@ -0,0 +1,27 @@
+import { type NavigationProp } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+
+import { SurveyScreenName } from '#libs/enums/enums';
+import { type SurveyNavigationParameterList } from '#libs/types/types';
+import { GOALS_CATEGORIES } from '#screens/survey/libs/constants/constants';
+
+import { SurveyStepMultiple } from '../components';
+
+const GoalsStep: React.FC = () => {
+  const navigation =
+    useNavigation<NavigationProp<SurveyNavigationParameterList>>();
+
+  return (
+    <SurveyStepMultiple
+      stepSurvey={SurveyScreenName.GOALS}
+      navigation={navigation}
+      stepTitle="What do you want to achieve with Calmpal?"
+      categories={GOALS_CATEGORIES}
+      nextScreen={SurveyScreenName.WORRIES}
+      previousScreen={SurveyScreenName.FEELINGS}
+    />
+  );
+};
+
+export { GoalsStep };

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

@@ -0,0 +1,29 @@
+import { type NavigationProp } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+
+import { SurveyScreenName } from '#libs/enums/enums';
+import { type SurveyNavigationParameterList } from '#libs/types/types';
+import { JOURNALING_EXPERIENCE_CATEGORIES } from '#screens/survey/libs/constants/constants';
+
+import { SurveyStepOne } from '../components';
+
+const JournalingStep: React.FC = () => {
+  const navigation =
+    useNavigation<NavigationProp<SurveyNavigationParameterList>>();
+
+  return (
+    <SurveyStepOne
+      stepSurvey={SurveyScreenName.JOURNALING_EXPERIENCE}
+      navigation={navigation}
+      stepTitle="What's your experience with journaling?"
+      categories={JOURNALING_EXPERIENCE_CATEGORIES}
+      nextScreen={SurveyScreenName.JOURNALING_EXPERIENCE}
+      previousScreen={SurveyScreenName.MEDITATION_EXPERIENCE}
+      isLastStep
+      isOneOption
+    />
+  );
+};
+
+export { JournalingStep };

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

@@ -0,0 +1,28 @@
+import { type NavigationProp } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+
+import { SurveyScreenName } from '#libs/enums/enums';
+import { type SurveyNavigationParameterList } from '#libs/types/types';
+import { MEDITATION_EXPERIENCE_CATEGORIES } from '#screens/survey/libs/constants/constants';
+
+import { SurveyStepOne } from '../components';
+
+const MeditationStep: React.FC = () => {
+  const navigation =
+    useNavigation<NavigationProp<SurveyNavigationParameterList>>();
+
+  return (
+    <SurveyStepOne
+      stepSurvey={SurveyScreenName.MEDITATION_EXPERIENCE}
+      navigation={navigation}
+      stepTitle="What's your experince with meditation?"
+      categories={MEDITATION_EXPERIENCE_CATEGORIES}
+      nextScreen={SurveyScreenName.JOURNALING_EXPERIENCE}
+      previousScreen={SurveyScreenName.WORRIES}
+      isOneOption
+    />
+  );
+};
+
+export { MeditationStep };