feat: new design + react native confi

julienp17 · Nov 12, 2023 · 7d2a9a9 · 7d2a9a9
1 parent 8ebc833
commit 7d2a9a9
Show file tree

Hide file tree

Showing 14 changed files with 183 additions and 107 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
 
 import com.android.build.OutputFile
 
@@ -226,6 +227,11 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+    implementation ("androidx.appcompat:appcompat:1.3.1") {
+        version {
+            strictly '1.3.1'
+        }
+    }
     ///implementation 'com.google.android.gms:play-services-base:18.0.1'
     //implementation 'com.google.android.gms:play-services-tasks:18.0.1'
 

diff --git a/android/app/src/main/java/com/innuendomobile/MainApplication.java b/android/app/src/main/java/com/innuendomobile/MainApplication.java
@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.lugg.RNCConfig.RNCConfigPackage;
 import com.horcrux.svg.SvgPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,4 +1,6 @@
 rootProject.name = 'innuendoMobile'
+include ':react-native-config'
+project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
 include ':react-native-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':@react-native-community_checkbox'

diff --git a/ios/Podfile b/ios/Podfile
@@ -18,6 +18,8 @@ target 'innuendoMobile' do
 
   pod 'RNSVG', :path => '../node_modules/react-native-svg'
 
+  pod 'react-native-config', :path => '../node_modules/react-native-config'
+
   target 'OneSignalNotificationServiceExtension' do
     pod 'OneSignalXCFramework', '>= 3.0', '< 4.0'
   end

diff --git a/src/api/symptoms.tsx b/src/api/symptoms.tsx
@@ -4,6 +4,7 @@ type APISymptomType = {
   id: number;
   name: string;
   unit_measure: "int" | "string";
+  icon_url: string;
   created_at: string;
   updated_at: string;
 };

diff --git a/src/components/SymptomInput/Number.tsx b/src/components/SymptomInput/Number.tsx
@@ -11,7 +11,7 @@ function SymptomNumberInput({
     <Box variant="card" paddingY={2} paddingX={4} borderRadius={10}>
       <VStack alignItems="center" space={2}>
         <Text fontSize={18} bold>
-          {title}
+          Évaluez votre symptôme
         </Text>
         <Slider
           width={300}

diff --git a/src/components/SymptomsPanel.tsx b/src/components/SymptomsPanel.tsx
@@ -1,14 +1,9 @@
-import React, { useEffect } from "react";
-import { Text, Button, Spinner, Box, VStack, HStack, Circle, Image, Icon } from "native-base";
+import React from "react";
+import { Text, Box, VStack, HStack, Circle, Image, Icon } from "native-base";
 import { useNavigation } from "@react-navigation/native";
 import { StackNavProp } from "../navigation/types";
-import useSymptoms from "../hooks/useSymptoms";
 import { APISymptomType } from "../api/symptoms";
 import useEditedReportStore from "../store/useEditedReport";
-import NetworkView from "./NetworkView";
-import MenstruationIcon from "../assets/icons/menstruationIcon.png"
-import successIcon from "../assets/icons/successIcon.png"
-import toFillIcon from "../assets/icons/toFillIcon.png"
 import { TouchableHighlight } from "react-native";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 
@@ -18,6 +13,7 @@ function SymptomButton({ symptom }: { symptom: APISymptomType }) {
   const isFilled = report.symptoms.find(
     (existingSymptom) => existingSymptom.symptom_type_id === symptom.id
   )
+  console.log(symptom)
 
   return (
     <TouchableHighlight
@@ -36,7 +32,7 @@ function SymptomButton({ symptom }: { symptom: APISymptomType }) {
         <HStack width="100%" justifyContent="space-between" paddingX={4} paddingY={2}>
           <HStack space={4}>
             <Circle bg="primary.400" padding={2}>
-              <Image source={MenstruationIcon} alt="Icon" size={4} />
+              <Image source={{ uri: symptom.icon_url }} alt="Icon" size={4} />
             </Circle>
             <Text fontFamily="heading" fontSize='md'>
               {symptom.name}

diff --git a/src/components/auth/EmailPassword.tsx b/src/components/auth/EmailPassword.tsx
@@ -9,6 +9,7 @@ import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityI
 import MaterialIcons from "react-native-vector-icons/MaterialIcons";
 import { StackNavProp } from "../../navigation/types";
 import useAuthStore from "../../store/auth";
+import Config from "react-native-config";
 
 function AuthEmailPassword({ action }: { action: "login" | "signUp" }) {
   const navigation = useNavigation<StackNavProp>();
@@ -21,9 +22,8 @@ function AuthEmailPassword({ action }: { action: "login" | "signUp" }) {
     formState: { errors },
   } = useForm<AuthForm>({
     defaultValues: {
-      //email: "toto@gmail.com",
-      email: "dorian.service@outlook.fr",
-      password: "tutu974",
+      email: Config.EMAIL_DEFAULT || "",
+      password: Config.PASSWORD_DEFAULT || "",
       confirmPassword: "",
     },
   });

diff --git a/src/hooks/useSymptoms.tsx b/src/hooks/useSymptoms.tsx
@@ -1,7 +1,21 @@
 import { useQuery } from "react-query";
 import api from "../api";
+import { APISymptomType } from "../api/symptoms";
+
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
 
 const useSymptoms = () =>
-  useQuery("symptoms", async () => await api.symptoms.get());
+  useQuery("symptoms", async () => await api.symptoms.get(), {
+    select: (data) =>
+      data.data === null
+        ? data
+        : {
+          ...data,
+          data: data.data.map((symptom: APISymptomType) => ({
+            ...symptom,
+            name: capitalize(symptom.name),
+          })),
+        }
+  });
 
 export default useSymptoms;
diff --git a/src/navigation/Tabs.tsx b/src/navigation/Tabs.tsx
@@ -12,7 +12,7 @@ import CalendarScreen from "../screens/Tabs/Calendar";
 import ShareReportScreen from "../screens/Tabs/ShareReport";
 import { useNavigation } from "@react-navigation/native";
 import { TouchableOpacity, Linking } from "react-native";
-import { Center, Circle, HStack, Icon, useColorModeValue } from "native-base";
+import { Center, Heading, HStack, Icon, useColorModeValue } from "native-base";
 import MaterialIcons from "react-native-vector-icons/MaterialIcons";
 import FontAwesome from "react-native-vector-icons/FontAwesome";
 
@@ -47,7 +47,7 @@ function Settings() {
         as={MaterialIcons}
         name="settings"
         size="xl"
-        color={useColorModeValue("black", "white")}
+        color={"#3C3B40"}
       />
     </TouchableOpacity>
   );
@@ -65,7 +65,7 @@ function Help() {
         as={MaterialIcons}
         name="help"
         size="xl"
-        color={useColorModeValue("black", "white")}
+        color={"#3C3B40"}
       />
     </TouchableOpacity>
   );
@@ -81,7 +81,7 @@ function ShareCode() {
         as={FontAwesome}
         name="share"
         size="xl"
-        color={useColorModeValue("black", "white")}
+        color={"#3C3B40"}
       />
     </TouchableOpacity>
   );
@@ -115,7 +115,7 @@ const options: BottomTabNavigationOptions = {
   },
   headerRight: () => (
     <HStack space={4} marginRight={4}>
-      <Help />
+      {/* <Help /> */}
       <ShareCode />
       <Settings />
     </HStack>

diff --git a/src/screens/EditReportSymptom.tsx b/src/screens/EditReportSymptom.tsx
@@ -1,10 +1,19 @@
 import React, { useState } from "react";
-import { Button } from "native-base";
+import {
+  Button,
+  Divider,
+  Heading,
+  Image,
+  Spinner,
+  Text,
+  VStack,
+} from "native-base";
 import { EditReportSymptomProps } from "./types";
 import ScreenView from "../components/ScreenView";
 import SymptomInput from "../components/SymptomInput";
 import useEditedReportStore from "../store/useEditedReport";
 import useReportMutation from "../hooks/useReportsMutation";
+import useSymptoms from "../hooks/useSymptoms";
 import { useQueryClient } from "react-query";
 
 function EditReportSymptomScreen({
@@ -16,6 +25,18 @@ function EditReportSymptomScreen({
   const queryClient = useQueryClient();
   const createReportMutation = useReportMutation("create", queryClient);
   const editReportMutation = useReportMutation("edit", queryClient);
+  const { data } = useSymptoms();
+  const symptoms = data?.data;
+
+  if (!symptoms) {
+    return <Spinner accessibilityLabel="Chargement des symptômes" />;
+  }
+  const symptom = symptoms.find(
+    (symptom) => symptom.name === route.params.symptomName
+  );
+  if (symptom === undefined) {
+    return <Heading>Impossible de trouver le symptome</Heading>;
+  }
 
   const saveReport = async () => {
     const isNewReport = report.id === 0;
@@ -41,16 +62,34 @@ function EditReportSymptomScreen({
 
   return (
     <ScreenView>
-      <SymptomInput symptomName={route.params.symptomName} />
-      <Button
-        size="lg"
-        isLoading={isSaving}
-        width="100%"
-        mt={4}
-        onPress={async () => await validate()}
-      >
-        Valider
-      </Button>
+      <VStack flex={1} space={2} justifyContent="space-between" alignItems="center">
+        <Heading fontSize={30}>{symptom.name}</Heading>
+        <Image
+          width={250}
+          height={250}
+          source={require("../assets/illustrations/Eyes.png")}
+          alt={"Illustration"}
+        />
+        <Text fontSize={18}>
+          Ceci est une description du symptôme qui est
+          suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper
+          long
+        </Text>
+      </VStack>
+      <Divider marginY={4} />
+      <VStack marginY={5} justifyContent="space-around">
+        <SymptomInput symptomName={route.params.symptomName} />
+        <Button
+          size="lg"
+          isLoading={isSaving}
+          width="100%"
+          mt={4}
+          onPress={async () => await validate()}
+          _text={{ fontWeight: "bold" }}
+        >
+          VALIDER
+        </Button>
+      </VStack>
     </ScreenView>
   );
 }

diff --git a/src/screens/Endoscore.tsx b/src/screens/Endoscore.tsx
@@ -1,11 +1,5 @@
 import React from "react";
-import {
-  Alert,
-  Heading,
-  Spinner,
-  Text,
-  VStack,
-} from "native-base";
+import { Alert, Center, Heading, Spinner, Text, VStack } from "native-base";
 import ScreenView from "../components/ScreenView";
 import useEndoscore from "../hooks/useEndoscore";
 import moment from "moment";
@@ -22,47 +16,48 @@ function EndoscoreScreen() {
       <Heading bold fontSize={40} alignSelf="flex-start" color="#3C3B40">
         Endoscore
       </Heading>
-      <Text marginTop={4} fontSize="md">
+      <Text marginTop={4} fontSize="md" alignSelf="flex-start">
         L'endoscore est un indicateur du risque d'entrométriose selon les
         symptômes que vous avez renseigner sur cette application.
       </Text>
-      {isLoading ? (
-        <Spinner accessibilityLabel="Chargement de l'endoscore" />
-      ) : (
-        <VStack
-          flex={1}
-          space={2}
-          justifyContent="space-between"
-          alignItems="center"
-          padding={4}
-        >
-          {!endoscore ? (
-            <Text textAlign="center">Aucun endoscore pour le moment</Text>
-          ) : (
-            <>
-              <EndoscoreCircularProgress endoscore={endoscore}/>
-              <Alert
-                w="100%"
-                status={endoscore.score < 5 ? "success" : "warning"}
-                variant="subtle"
-                borderRadius={20}
-              >
-                <VStack space={1}>
-                  <Heading bold fontSize="xl">
-                    Analyse
-                  </Heading>
-                  <Text fontSize="sm" color="coolGray.800">
-                    {endoscore.score < 5
-                      ? "Rien ne semble indiquer une présence d'endométriose."
-                      : "Il est recommandé de consulter un professionnel en lui montrant ce score."}
-                  </Text>
-                </VStack>
-              </Alert>
-            </>
-          )}
+      <VStack
+        flex={1}
+        space={2}
+        justifyContent="space-around"
+        padding={4}
+      >
+        {isLoading ? (
+          <Spinner accessibilityLabel="Chargement de l'endoscore" />
+        ) : !endoscore ? (
+          <Text textAlign="center">Aucun endoscore pour le moment</Text>
+        ) : (
+          <VStack>
+            <Center>
+              <EndoscoreCircularProgress endoscore={endoscore} />
+            </Center>
+            <Alert
+              w="100%"
+              status={endoscore.score < 5 ? "success" : "warning"}
+              variant="subtle"
+              borderRadius={20}
+            >
+              <VStack space={1}>
+                <Heading bold fontSize="xl">
+                  Analyse
+                </Heading>
+                <Text fontSize="sm" color="coolGray.800">
+                  {endoscore.score < 5
+                    ? "Rien ne semble indiquer une présence d'endométriose."
+                    : "Il est recommandé de consulter un professionnel en lui montrant ce score."}
+                </Text>
+              </VStack>
+            </Alert>
+          </VStack>
+        )}
+        <Center>
           <EndoscoreButton />
-        </VStack>
-      )}
+        </Center>
+      </VStack>
     </ScreenView>
   );
 }

diff --git a/src/screens/ShareCode.tsx b/src/screens/ShareCode.tsx
@@ -81,7 +81,7 @@ function ShareCodeScreen({ navigation }: ShareCodeScreenProps) {
             >
               <HStack space={4}>
                 <Circle bg="primary.400" padding={2}>
-                  <Image source={MenstruationIcon} alt="Icon" size={4} />
+                  <Image source={{ uri: symptom.icon_url }} alt="Icon" size={4} />
                 </Circle>
                 <Text fontFamily="heading" bold fontSize="lg">
                   {symptom.name}
@@ -122,7 +122,7 @@ function ShareCodeScreen({ navigation }: ShareCodeScreenProps) {
           <>
             <Text bold fontSize="md">
               Sélectionner les symptômes que vous souhaitez partager avec votre
-              pratitien.
+              praticien.
             </Text>
             <NetworkView
               isLoading={isLoading}
@@ -148,9 +148,9 @@ function ShareCodeScreen({ navigation }: ShareCodeScreenProps) {
               fontWeight="bold"
               fontSize="md"
               color="white"
-              letterSpacing={2}
+              letterSpacing={1}
             >
-              Générer un { accessCode === "" ? "" : "nouveau "}code
+              GENERER UN { accessCode === "" ? "" : "nouveau "}CODE
             </Text>
           </Button>
         )}