Multiple fix and improvement, mainly using correct query to get bike goal trips

jest.config.js

@@ -2,7 +2,7 @@ process.env.TZ = 'UTC'
 
 module.exports = {
   testURL: 'http://localhost/',
-  moduleFileExtensions: ['js', 'jsx', 'json', 'styl'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'styl'],
   setupFiles: ['<rootDir>/test/jestLib/setup.js'],
   setupFilesAfterEnv: ['<rootDir>/test/jestLib/setupAfterEnv.js'],
   moduleDirectories: ['src', 'node_modules'],

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "analyze": "COZY_SCRIPTS_ANALYZER=true yarn build",
     "lint": "yarn lint:js && yarn lint:styles",
-    "lint:js": "cs lint '{src,test}/**/*.{js,jsx}'",
+    "lint:js": "cs lint '{src,test}/**/*.{js,jsx,ts,tsx}'",
     "lint:styles": "stylint src/styles --config ./.stylintrc",
     "prebuild": "yarn lint",
     "build": "yarn build:browser",

src/components/AppProviders.jsx

@@ -13,7 +13,6 @@ import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoin
 import { GEOJSON_DOCTYPE, SETTINGS_DOCTYPE } from 'src/doctypes'
 import AccountProvider from 'src/components/Providers/AccountProvider'
 import SelectDatesProvider from 'src/components/Providers/SelectDatesProvider'
-import BikeGoalDateProvider from 'src/components/Providers/BikeGoalDateProvider'
 
 /*
 With MUI V4, it is possible to generate deterministic class names.
@@ -35,13 +34,11 @@ const AppProviders = ({ client, lang, polyglot, children }) => {
           <RealTimeQueries doctype={SETTINGS_DOCTYPE} />
           <AccountProvider>
             <SelectDatesProvider>
-              <BikeGoalDateProvider>
-                <I18n lang={lang} polyglot={polyglot}>
-                  <MuiCozyTheme>
-                    <BreakpointsProvider>{children}</BreakpointsProvider>
-                  </MuiCozyTheme>
-                </I18n>
-              </BikeGoalDateProvider>
+              <I18n lang={lang} polyglot={polyglot}>
+                <MuiCozyTheme>
+                  <BreakpointsProvider>{children}</BreakpointsProvider>
+                </MuiCozyTheme>
+              </I18n>
             </SelectDatesProvider>
           </AccountProvider>
         </CozyProvider>

src/components/AppRouter.jsx

@@ -83,27 +83,30 @@ const AppRouter = () => {
                 <Route path="edit" element={<BikeGoalEdit />} />
                 <Route path="about" element={<BikeGoalAbout />} />
                 <Route
-                  path="certificate/generate/:year"
+                  path="certificate/generate"
                   element={<CertificateGeneration />}
                 />
               </Route>
             </>
           )}
-        </Route>
 
-        {/* // redirection */}
-        <Route
-          path="analysis"
-          element={<Navigate replace to="/analysis/modes" />}
-        />
-        {flag('coachco2.bikegoal.enabled') && (
+          {/* redirection */}
           <Route
-            path="bikegoal/*"
-            element={<Navigate replace to={`/bikegoal/${currentYear}/trips`} />}
+            path="analysis"
+            element={<Navigate replace to="/analysis/modes" />}
           />
-        )}
-        <Route path="/" element={<Navigate replace to="/trips" />} />
-        <Route path="*" element={<Navigate replace to="/trips" />} />
+          {flag('coachco2.bikegoal.enabled') && (
+            <Route
+              path="bikegoal"
+              element={
+                <Navigate replace to={`/bikegoal/${currentYear}/trips`} />
+              }
+            />
+          )}
+          <Route path="/" element={<Navigate replace to="/trips" />} />
+          <Route path="*" element={<Navigate replace to="/trips" />} />
+          {/* redirection - end */}
+        </Route>
       </Routes>
     </HashRouter>
   )

src/components/EditDialogs/RecurrenceEditDialog/RecurrenceEditDialogTitle.jsx

@@ -63,7 +63,7 @@ const RecurrenceEditDialogTitle = () => {
   return (
     <div className="u-pt-1">
       {t('recurring.title')}
-      <Tooltip title={t('recurring.tooltip')} placement="top-center" arrow>
+      <Tooltip title={t('recurring.tooltip')} placement="top" arrow>
         <IconButton>
           <Icon icon={HelpOutlined} />
         </IconButton>

src/components/Goals/BikeGoal/BikeGoalAchievement.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -19,11 +19,10 @@ import {
 const BikeGoalAchievement = ({ className, timeseries }) => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
-  const { year } = useParams()
   const navigate = useNavigate()
 
   const handleClickAchievement = () => {
-    navigate(`certificate/generate/${year}`)
+    navigate('certificate/generate')
   }
 
   return (

src/components/Goals/BikeGoal/BikeGoalAlertSuccess.jsx

@@ -6,18 +6,17 @@ import Alert from 'cozy-ui/transpiled/react/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
 import { getBountyAmount } from 'src/components/Goals/BikeGoal/helpers'
-import { useBikeGoalDateContext } from 'src/components/Providers/BikeGoalDateProvider'
 import useSettings from 'src/hooks/useSettings'
 
 const BikeGoalAlertSuccess = () => {
   const { t } = useI18n()
   const navigate = useNavigate()
-  const { date } = useBikeGoalDateContext()
   const { save: setShowAlertSuccess } = useSettings('bikeGoal.showAlertSuccess')
 
   const handleConfirm = () => {
     setShowAlertSuccess(false)
-    navigate(`certificate/generate/${date.getFullYear()}`)
+    const currentYear = new Date().getFullYear().toString()
+    navigate(`/bikegoal/${currentYear}/trips/certificate/generate`)
   }
 
   return (

src/components/Goals/BikeGoal/BikeGoalDialogMobile.jsx

@@ -1,21 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import { IllustrationDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 
 import BikeGoalList from 'src/components/Goals/BikeGoal/BikeGoalList'
 import BikeGoalAchievement from 'src/components/Goals/BikeGoal/BikeGoalAchievement'
 import BikeGoalChart from 'src/components/Goals/BikeGoal/BikeGoalChart'
 import BikeGoalActions from 'src/components/Goals/BikeGoal/BikeGoalActions'
+import { filterTimeseriesByYear } from 'src/lib/timeseries'
 
 const BikeGoalDialogMobile = ({ timeseries, timeseriesQueryLeft }) => {
   const navigate = useNavigate()
+  const { year } = useParams()
+
+  const timeseriesByYear = filterTimeseriesByYear(timeseries, year)
 
   return (
     <IllustrationDialog
       open
-      onBack={() => navigate('/')}
+      onBack={() => navigate('/trips')}
       disableGutters
       content={
         <>
@@ -24,15 +28,15 @@ const BikeGoalDialogMobile = ({ timeseries, timeseriesQueryLeft }) => {
             display="flex"
             paddingTop="1.5rem"
             marginTop="3rem"
-            timeseries={timeseries}
+            timeseries={timeseriesByYear}
           />
           <BikeGoalAchievement
             className="u-flex u-flex-column u-flex-items-center"
-            timeseries={timeseries}
+            timeseries={timeseriesByYear}
           />
           <BikeGoalList
             className="u-mt-2"
-            timeseries={timeseries}
+            timeseries={timeseriesByYear}
             hasMore={timeseriesQueryLeft.hasMore}
             fetchMore={timeseriesQueryLeft.fetchMore}
           />

src/components/Goals/BikeGoal/BikeGoalSummary.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { isQueryLoading, useQueryAll } from 'cozy-client'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -11,58 +12,69 @@ import {
   isGoalCompleted,
   countDaysOrDaysToReach
 } from 'src/components/Goals/BikeGoal/helpers'
-import { useTemporaryQueryForBikeGoal } from 'src/components/Goals/useTemporaryQueryForBikeGoal'
+import { buildBikeCommuteTimeseriesQueryByAccountId } from 'src/queries/queries'
+import { useAccountContext } from 'src/components/Providers/AccountProvider'
+import { filterTimeseriesByYear } from 'src/lib/timeseries'
 
 const BikeGoalSummary = () => {
   const { t } = useI18n()
+  const { account, isAccountLoading } = useAccountContext()
 
-  // TODO: uncomment this when the request return something
-  // const timeseriesQuery =
-  //   buildOneYearBikeCommuteTimeseriesQueryByDateAndAccountId(
-  //     {
-  //       date: new Date(),
-  //       accountId: account?._id
-  //     },
-  //     Boolean(account)
-  //   )
+  const timeseriesQuery = buildBikeCommuteTimeseriesQueryByAccountId(
+    { accountId: account?._id },
+    Boolean(account)
+  )
+  const { data: timeseries, ...timeseriesQueryLeft } = useQueryAll(
+    timeseriesQuery.definition,
+    timeseriesQuery.options
+  )
+
+  const isLoadingTimeseriesQuery =
+    isQueryLoading(timeseriesQueryLeft) || timeseriesQueryLeft.hasMore
+
+  const isLoading = isAccountLoading || isLoadingTimeseriesQuery
+
+  if (isLoading) {
+    return (
+      <Paper
+        elevation={2}
+        className="u-flex u-flex-items-center u-mh-1-s u-mh-2 u-mb-1 u-flex-items-start"
+      >
+        <Spinner size="xlarge" className="u-m-1" />
+      </Paper>
+    )
+  }
 
-  // TODO: remove this hooks when the above request will work
-  const { timeseries, isLoadingTimeseriesQuery } =
-    useTemporaryQueryForBikeGoal()
+  const currentYear = new Date().getFullYear().toString()
+  const timeseriesByYear = filterTimeseriesByYear(timeseries, currentYear)
 
   return (
     <>
       <Paper
         elevation={2}
         className="u-flex u-flex-items-center u-mh-1-s u-mh-2 u-mb-1 u-flex-items-start"
       >
-        {isLoadingTimeseriesQuery ? (
-          <Spinner size="xlarge" className="u-m-1" />
-        ) : (
-          <>
-            <BikeGoalChart
-              timeseries={timeseries}
-              paddingTop="1rem"
-              paddingLeft="1.5rem"
-              size="small"
-            />
-            <div className="u-ml-1">
-              <Typography variant="h6">{t('bikeGoal.title')}</Typography>
-              <Typography
-                variant="caption"
-                style={{
-                  whiteSpace: 'pre-line',
-                  color: isGoalCompleted(timeseries) && 'var(--successColor)'
-                }}
-              >
-                {t('bikeGoal.goal_progression', {
-                  days: countDaysOrDaysToReach(timeseries),
-                  daysToReach: getDaysToReach()
-                })}
-              </Typography>
-            </div>
-          </>
-        )}
+        <BikeGoalChart
+          timeseries={timeseriesByYear}
+          paddingTop="1rem"
+          paddingLeft="1.5rem"
+          size="small"
+        />
+        <div className="u-ml-1">
+          <Typography variant="h6">{t('bikeGoal.title')}</Typography>
+          <Typography
+            variant="caption"
+            style={{
+              whiteSpace: 'pre-line',
+              color: isGoalCompleted(timeseriesByYear) && 'var(--successColor)'
+            }}
+          >
+            {t('bikeGoal.goal_progression', {
+              days: countDaysOrDaysToReach(timeseriesByYear),
+              daysToReach: getDaysToReach()
+            })}
+          </Typography>
+        </div>
       </Paper>
     </>
   )

src/components/Goals/BikeGoal/BikeGoalViewDesktop.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 
@@ -9,29 +9,33 @@ import BikeGoalList from 'src/components/Goals/BikeGoal/BikeGoalList'
 import BikeGoalAchievement from 'src/components/Goals/BikeGoal/BikeGoalAchievement'
 import BikeGoalChart from 'src/components/Goals/BikeGoal/BikeGoalChart'
 import BikeGoalActions from 'src/components/Goals/BikeGoal/BikeGoalActions'
+import { filterTimeseriesByYear } from 'src/lib/timeseries'
 
 const BikeGoalViewDesktop = ({ timeseries, timeseriesQueryLeft }) => {
   const { t } = useI18n()
   const navigate = useNavigate()
+  const { year } = useParams()
+
+  const timeseriesByYear = filterTimeseriesByYear(timeseries, year)
 
   return (
     <>
       <Titlebar
         label={t('bikeGoal.title')}
-        subtitle={<BikeGoalAchievement timeseries={timeseries} />}
-        onBack={() => navigate('/')}
+        subtitle={<BikeGoalAchievement timeseries={timeseriesByYear} />}
+        onBack={() => navigate('/trips')}
       />
       <BikeGoalActions timeseries={timeseries} />
       <BikeGoalChart
         display="flex"
         position="absolute"
         top="2rem"
         right="2rem"
-        timeseries={timeseries}
+        timeseries={timeseriesByYear}
       />
       <BikeGoalList
         className="u-mt-3"
-        timeseries={timeseries}
+        timeseries={timeseriesByYear}
         hasMore={timeseriesQueryLeft.hasMore}
         fetchMore={timeseriesQueryLeft.fetchMore}
       />

src/components/Goals/BikeGoal/Certificate/CertificateGenerationContent.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useParams } from 'react-router-dom'
 
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -14,14 +15,13 @@ import FileTypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
 
 import BikeGoalChart from 'src/components/Goals/BikeGoal/BikeGoalChart'
 import { getBountyAmount } from 'src/components/Goals/BikeGoal/helpers'
-import { useBikeGoalDateContext } from 'src/components/Providers/BikeGoalDateProvider'
 
 import styles from 'src/components/Goals/BikeGoal/Certificate/CertificateGeneration.styl'
 
 const CertificateGenerationContent = () => {
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
-  const { date } = useBikeGoalDateContext()
+  const { year } = useParams()
 
   return (
     <div className={styles['CertificateGeneration-root']}>
@@ -32,7 +32,7 @@ const CertificateGenerationContent = () => {
       <Typography variant="body2" className="u-mv-1">
         {t('bikeGoal.certificateGeneration.content', {
           bountyAmount: getBountyAmount(),
-          year: date.getFullYear()
+          year
         })}
       </Typography>
       <Paper>

src/components/Goals/BikeGoal/DateSelector/ActionButton.jsx

@@ -31,7 +31,7 @@ const ActionButton = forwardRef(({ label, onClick }, ref) => {
 ActionButton.displayName = 'ActionButton'
 
 ActionButton.propTypes = {
-  label: PropTypes.number,
+  label: PropTypes.string,
   onClick: PropTypes.func
 }