feat: stats continue

app/application/habits/stats.tsx

@@ -1,14 +1,10 @@
 import { Stats } from "@/presentation/react/components/Stats/Stats"
-import { useAuthentication } from "@/presentation/react/contexts/Authentication"
+import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
 
 const StatsPage: React.FC = () => {
-  const { user } = useAuthentication()
+  const { habitsTracker } = useHabitsTracker()
 
-  if (user == null) {
+  return <Stats habitsTracker={habitsTracker} />
-    return null
-  }
-
-  return <Stats />
 }
 
 export default StatsPage

package-lock.json

@@ -29,6 +29,7 @@
         "react-hook-form": "7.51.2",
         "react-native": "0.73.6",
         "react-native-calendars": "1.1304.1",
+        "react-native-circular-progress-indicator": "4.4.2",
         "react-native-elements": "3.4.3",
         "react-native-gesture-handler": "2.14.1",
         "react-native-paper": "5.12.3",
@@ -8627,6 +8628,11 @@
         "node": ">=6.5"
       }
     },
+    "node_modules/abs-svg-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
+      "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA=="
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -9596,6 +9602,12 @@
       "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
       "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "peer": true
+    },
     "node_modules/bplist-creator": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
@@ -10623,6 +10635,56 @@
         "hyphenate-style-name": "^1.0.3"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "peer": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "peer": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -11157,6 +11219,32 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "peer": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "peer": true
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -11170,6 +11258,35 @@
         "node": ">=12"
       }
     },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "peer": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "peer": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -11255,7 +11372,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -17970,6 +18086,12 @@
       "resolved": "https://registry.npmjs.org/md5hex/-/md5hex-1.0.0.tgz",
       "integrity": "sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ=="
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "peer": true
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -18966,6 +19088,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-svg-path": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
+      "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==",
+      "dependencies": {
+        "svg-arc-to-cubic-bezier": "^3.0.0"
+      }
+    },
     "node_modules/normalize-url": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
@@ -19055,6 +19185,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "peer": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -19512,6 +19654,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/parse-svg-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+      "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ=="
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -20236,6 +20383,20 @@
         "moment": "^2.29.4"
       }
     },
+    "node_modules/react-native-circular-progress-indicator": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-native-circular-progress-indicator/-/react-native-circular-progress-indicator-4.4.2.tgz",
+      "integrity": "sha512-BlgshzIIIk0TP/CZY+5oyRsHl2Sb2l6cK5tzfmrVETfn6pN8dhOKrV0i3Z6i0SM8wRgncdUUSRBpCPAexh7JoQ==",
+      "dependencies": {
+        "react-native-redash": "*"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-native": ">=0.59.0",
+        "react-native-reanimated": ">=2.2.0",
+        "react-native-svg": ">=12.1.1"
+      }
+    },
     "node_modules/react-native-elements": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.4.3.tgz",
@@ -20339,6 +20500,22 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-redash": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/react-native-redash/-/react-native-redash-18.1.3.tgz",
+      "integrity": "sha512-RKdmAjs87iwA8iD7UOQ11rlQL+tZh56O5+5cV1M37Jk+4uH1Fvs22G3Q5v/wGx+0ncwz3wMolLLCezONOodTlA==",
+      "dependencies": {
+        "abs-svg-path": "^0.1.1",
+        "normalize-svg-path": "^1.0.1",
+        "parse-svg-path": "^0.1.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": "*",
+        "react-native-reanimated": ">=2.0.0"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.8.2",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.8.2.tgz",
@@ -20369,6 +20546,20 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.1.0.tgz",
+      "integrity": "sha512-p0Sx0EpQNk1nu6UcMEiB8K9P04n3J7s+pNYUwf1d/Yz+v4hk961VjuVqjyndgiEbHZyWiKWLZRVNuvLpwjPY2A==",
+      "peer": true,
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-swipe-gestures": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
@@ -22281,6 +22472,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g=="
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -39,6 +39,7 @@
     "react-hook-form": "7.51.2",
     "react-native": "0.73.6",
     "react-native-calendars": "1.1304.1",
+    "react-native-circular-progress-indicator": "4.4.2",
     "react-native-elements": "3.4.3",
     "react-native-gesture-handler": "2.14.1",
     "react-native-paper": "5.12.3",

presentation/react/components/Stats/Stats.tsx

@@ -1,35 +1,68 @@
 import { SafeAreaView } from "react-native-safe-area-context"
 import { Card, Text } from "react-native-paper"
+import CircularProgress from "react-native-circular-progress-indicator"
+import { ScrollView } from "react-native"
+import { Calendar } from "react-native-calendars"
 
-export const Stats: React.FC = () => {
+import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
+
+export interface StatsProps {
+  habitsTracker: HabitsTracker
+}
+
+export const Stats: React.FC<StatsProps> = (props) => {
+  const { habitsTracker } = props
+
+  const habitsHistory = habitsTracker.getAllHabitsHistory()
   return (
     <SafeAreaView>
-      <Text> {"Statistique"} </Text>
+      <ScrollView>
+        <Calendar />
 
-      <Card mode="outlined">
+        {habitsHistory.map((element) => {
-        <Card.Title title="Current Streak" />
+          if (element.habit.goal.frequency === "daily") {
+            return (
+              <Card key={element.habit.id} mode="outlined">
+                <Card.Title title="Sucess Week" />
                 <Card.Content>
-          <Text variant="bodyMedium">nbDays Sucess that follow</Text>
+                  <Text variant="bodyMedium">
+                    nbDays Sucess dans la semaine
+                  </Text>
+                  <CircularProgress
+                    value={91}
+                    activeStrokeWidth={12}
+                    progressValueColor={"#ecf0f1"}
+                    circleBackgroundColor="black"
+                    titleColor="white"
+                    title="%"
+                  />
                 </Card.Content>
               </Card>
-      <Card mode="outlined">
+            )
-        <Card.Title title="Sucess" />
+          }
+          if (element.habit.goal.frequency === "weekly") {
+            return (
+              <Card key={element.habit.id} mode="outlined">
+                <Card.Title title="Sucess Month" />
                 <Card.Content>
-          <Text variant="bodyMedium">nbDays Sucess</Text>
+                  <Text variant="bodyMedium">nbDays Sucess dans le mois</Text>
                 </Card.Content>
               </Card>
-      <Card mode="outlined">
+            )
-        <Card.Title title="Failed" />
+          }
+          if (element.habit.goal.frequency === "monthly") {
+            return (
+              <Card key={element.habit.id} mode="outlined">
+                <Card.Title title="Sucess Month" />
                 <Card.Content>
-          <Text variant="bodyMedium">nbDays Fail</Text>
+                  <Text variant="bodyMedium">nbDays Sucess dans le mois</Text>
-        </Card.Content>
-      </Card>
-      <Card mode="outlined">
-        <Card.Title title="Card Title" />
-        <Card.Content>
-          <Text variant="bodyMedium">CardContent</Text>
                 </Card.Content>
               </Card>
+            )
+          }
+          return null
+        })}
+      </ScrollView>
     </SafeAreaView>
   )
 }