fix: ajout hint carte

SocialGouv · May 17, 2022 · e22cab0 · e22cab0
1 parent 9a38bd3
commit e22cab0
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 31 deletions.
diff --git a/src/scenes/status/posology.js b/src/scenes/status/posology.js
@@ -6,15 +6,12 @@ import { colors } from "../../utils/colors";
 import { canEdit } from "./utils/index.js";
 
 const Posology = ({ patientState, posology, date, onPress }) => {
-  if (
-    (!posology || posology.length === 0 || posology.every((e) => !e.value)) &&
-    patientState?.PRISE_DE_TRAITEMENT &&
-    patientState?.PRISE_DE_TRAITEMENT_SI_BESOIN &&
-    !Object.keys(patientState?.PRISE_DE_TRAITEMENT)?.length &&
-    !Object.keys(patientState?.PRISE_DE_TRAITEMENT_SI_BESOIN)?.length
-  ) {
-    return null;
-  }
+  const hasPosology = posology && posology.length > 0 && posology.some((e) => e.value);
+  const hasPriseDeTraitement =
+    Object.keys(patientState?.PRISE_DE_TRAITEMENT || {})?.length ||
+    Object.keys(patientState?.PRISE_DE_TRAITEMENT_SI_BESOIN || {})?.length;
+
+  if (!hasPosology && !hasPriseDeTraitement) return null;
 
   const renderPosology = () => {
     return (posology || []).map((p, i) => {
@@ -37,16 +34,20 @@ const Posology = ({ patientState, posology, date, onPress }) => {
       <View style={styles.divider} />
       <View style={styles.container}>
         <Text style={styles.title}>Traitements</Text>
-        <View style={styles.containerQuestionReponse}>
-          <Text>Avez-vous pris correctement votre traitement quotidien&nbsp;?</Text>
-          <Text style={styles.reponse}>{patientState?.PRISE_DE_TRAITEMENT?.value ? "Oui" : "Non"}</Text>
-        </View>
-        <View style={styles.containerQuestionReponse}>
-          <Text>Avez-vous pris un "si besoin"&nbsp;?</Text>
-          <Text style={styles.reponse}>
-            {patientState?.PRISE_DE_TRAITEMENT_SI_BESOIN?.value ? "Oui" : "Non"}
-          </Text>
-        </View>
+        {patientState?.PRISE_DE_TRAITEMENT?.value !== undefined ? (
+          <View style={styles.containerQuestionReponse}>
+            <Text>Avez-vous pris correctement votre traitement quotidien&nbsp;?</Text>
+            <Text style={styles.reponse}>{patientState?.PRISE_DE_TRAITEMENT?.value ? "Oui" : "Non"}</Text>
+          </View>
+        ) : null}
+        {patientState?.PRISE_DE_TRAITEMENT_SI_BESOIN?.value !== undefined ? (
+          <View style={styles.containerQuestionReponse}>
+            <Text>Avez-vous pris un "si besoin"&nbsp;?</Text>
+            <Text style={styles.reponse}>
+              {patientState?.PRISE_DE_TRAITEMENT_SI_BESOIN?.value ? "Oui" : "Non"}
+            </Text>
+          </View>
+        ) : null}
 
         <TouchableOpacity
           style={[

diff --git a/src/scenes/suivi/chartFrise.js b/src/scenes/suivi/chartFrise.js
@@ -121,19 +121,92 @@ const ChartFrise = ({ navigation, fromDate, toDate, focusedScores, showTraitemen
     );
   }
   return (
-    <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
-      {activeCategories?.map((categoryId) => (
+    <>
+      <View style={styles.hintContainer}>
+        <Text style={styles.hintTitle}>Corrélez la prose de votre traitement avec vos frises</Text>
         <Frise
           focusedScores={focusedScores}
-          title={getTitle(categoryId)}
-          key={categoryId}
-          data={computeChartData(categoryId)}
-          showTraitement={showTraitement}
-          priseDeTraitement={computeChartData("PRISE_DE_TRAITEMENT")}
-          priseDeTraitementSiBesoin={computeChartData("PRISE_DE_TRAITEMENT_SI_BESOIN")}
+          data={[
+            { value: 1 },
+            { value: 2 },
+            { value: 3 },
+            { value: 1 },
+            { value: 3 },
+            { value: 1 },
+            { value: 4 },
+            { value: 5 },
+            { value: 5 },
+            { value: 4 },
+            { value: 4 },
+            { value: 3 },
+            { value: 4 },
+            { value: 4 },
+          ]}
+          showTraitement
+          priseDeTraitement={[
+            {},
+            { value: false },
+            {},
+            { value: true },
+            { value: true },
+            { value: true },
+            { value: true },
+            { value: true },
+            { value: true },
+            { value: true },
+            { value: true },
+            {},
+            { value: false },
+            {},
+          ]}
+          priseDeTraitementSiBesoin={[
+            {},
+            { value: false },
+            {},
+            { value: false },
+            { value: false },
+            { value: true },
+            { value: true },
+            { value: false },
+            { value: false },
+            { value: true },
+            { value: true },
+            {},
+            { value: false },
+            {},
+          ]}
         />
-      ))}
-    </ScrollView>
+        <View>
+          <View style={{ display: "flex", flexDirection: "row", alignItems: "center", marginVertical: 5 }}>
+            <View style={[styles.hintSquare, { backgroundColor: "#5956E8", marginRight: 15 }]} />
+            <Text style={styles.hintLegend}>J'ai pris correctement mon traitement</Text>
+          </View>
+          <View style={{ display: "flex", flexDirection: "row", alignItems: "center", marginVertical: 5 }}>
+            <View style={[styles.hintSquare, { backgroundColor: "#E575F8", marginRight: 15 }]} />
+            <Text style={styles.hintLegend}>Je n'ai pas pris correctement mon traitement</Text>
+          </View>
+          <View style={{ display: "flex", flexDirection: "row", alignItems: "center", marginVertical: 5 }}>
+            <View
+              style={[{ height: 4, width: 4, borderRadius: 2, backgroundColor: "#5956E8", marginRight: 26 }]}
+            />
+            <Text style={styles.hintLegend}>J'ai pris un "si besoin"</Text>
+          </View>
+        </View>
+      </View>
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
+        {activeCategories?.map((categoryId) => (
+          <Frise
+            focusedScores={focusedScores}
+            title={getTitle(categoryId)}
+            key={categoryId}
+            data={computeChartData(categoryId)}
+            showTraitement={showTraitement}
+            priseDeTraitement={computeChartData("PRISE_DE_TRAITEMENT")}
+            priseDeTraitementSiBesoin={computeChartData("PRISE_DE_TRAITEMENT_SI_BESOIN")}
+          />
+        ))}
+      </ScrollView>
+    </>
   );
 };
 
@@ -147,7 +220,7 @@ const Frise = ({
 }) => {
   return (
     <View style={styles.friseContainer}>
-      <Text style={styles.friseTitle}>{title}</Text>
+      {title ? <Text style={styles.friseTitle}>{title}</Text> : null}
       <View style={styles.squareContainer}>
         {data?.map((e, i) => {
           let color = scoresMapIcon[e?.value]?.color || "#f5f5f5";
@@ -268,6 +341,22 @@ const Frise = ({
 };
 
 const styles = StyleSheet.create({
+  hintContainer: {
+    marginHorizontal: 15,
+    padding: 10,
+    borderColor: "#AEEDF8",
+    borderWidth: 1,
+    borderRadius: 10,
+    backgroundColor: "#F8FDFE",
+  },
+  hintTitle: {
+    fontSize: 15,
+    fontWeight: "bold",
+  },
+  hintSquare: {
+    height: 4,
+    width: 15,
+  },
   friseContainer: {
     marginVertical: 10,
     paddingHorizontal: 10,

diff --git a/src/scenes/suivi/index.js b/src/scenes/suivi/index.js
@@ -34,7 +34,7 @@ const Suivi = ({ navigation, setPlusVisible }) => {
   const [fromDate, setFromDate] = React.useState(beforeToday(30));
   const [toDate, setToDate] = React.useState(beforeToday(0));
   const [focusedScores, setFocusedScores] = React.useState([1, 2, 3, 4, 5]);
-  const [showTraitement, setShowTraitement] = React.useState(true);
+  const [showTraitement, setShowTraitement] = React.useState(false);
 
   useFocusEffect(
     React.useCallback(() => {