feat: home page update

BaseAdresseNationale · Oct 12, 2023 · 9589249 · 9589249
1 parent 8db6a11
commit 9589249
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 133 deletions.
diff --git a/...e-locale-card/base-locale-card-content.js → ...-locale-card/base-locale-card-content.tsx b/...e-locale-card/base-locale-card-content.js → ...-locale-card/base-locale-card-content.tsx
@@ -1,5 +1,4 @@
-import {useState, useMemo, useContext} from 'react'
-import PropTypes from 'prop-types'
+import React, {useState, useMemo, useContext} from 'react'
 import {format} from 'date-fns'
 import {fr} from 'date-fns/locale'
 import {Pane, Button, Tooltip, Text, UserIcon, InfoSignIcon, TrashIcon, EditIcon, KeyIcon, EyeOffIcon} from 'evergreen-ui'
@@ -9,8 +8,23 @@ import LocalStorageContext from '@/contexts/local-storage'
 import RecoverBALAlert from '@/components/bal-recovery/recover-bal-alert'
 import CertificationCount from '@/components/certification-count'
 import HabilitationTag from '../habilitation-tag'
+import {HabilitationType} from '@/types/habilitation'
+import {BaseLocaleType} from '@/types/base-locale'
+import {APIGeoCommuneType} from '@/types/api-geo'
+
+interface BaseLocaleCardContentProps {
+  baseLocale: BaseLocaleType;
+  commune: APIGeoCommuneType;
+  habilitation: HabilitationType;
+  isAdmin: boolean;
+  userEmail: string;
+  onSelect: () => void;
+  onRemove: () => void;
+  onHide: () => void;
+  isShownHabilitationStatus: boolean;
+}
 
-function BaseLocaleCardContent({isAdmin, baseLocale, commune, habilitation, isShownHabilitationStatus, userEmail, onSelect, onRemove, onHide}) {
+function BaseLocaleCardContent({isAdmin, baseLocale, commune, habilitation, isShownHabilitationStatus, userEmail, onSelect, onRemove, onHide}: BaseLocaleCardContentProps) {
   const {status, _created, emails} = baseLocale
   const [isBALRecoveryShown, setIsBALRecoveryShown] = useState(false)
 
@@ -47,13 +61,13 @@ function BaseLocaleCardContent({isAdmin, baseLocale, commune, habilitation, isSh
 
         {commune && (<Pane flex={1} textAlign='center' margin='auto'>
           <Text display='block'>Adresses certifiées</Text>
-          <CertificationCount nbNumeros={commune.nbNumeros} nbNumerosCertifies={commune.nbNumerosCertifies} />
+          <CertificationCount nbNumeros={baseLocale.nbNumeros} nbNumerosCertifies={baseLocale.nbNumerosCertifies} />
         </Pane>
         )}
 
         {emails && isAdmin && (
           <Pane flex={1} textAlign='center' padding='8px' display='flex' flexDirection='row' justifyContent='center' margin='auto'>
-            <Text>{emails.length < 2 ? '1 Administrateur' : emails.length + ' Administrateurs'}</Text>
+            <Text>{emails.length < 2 ? '1 Administrateur' : `${emails.length} Administrateurs`}</Text>
             <Tooltip
               content={
                 emails.map(email => (
@@ -111,8 +125,13 @@ function BaseLocaleCardContent({isAdmin, baseLocale, commune, habilitation, isSh
                 isShown={isBALRecoveryShown}
                 defaultEmail={userEmail}
                 baseLocaleId={baseLocale._id}
-                onClose={() => setIsBALRecoveryShown(false)} />
-              <Button iconAfter={KeyIcon} marginRight='8px' onClick={() => setIsBALRecoveryShown(true)}>Récupérer l’accès</Button>
+                onClose={() => {
+                  setIsBALRecoveryShown(false)
+                }} />
+              <Button iconAfter={KeyIcon} marginRight='8px' onClick={() => {
+                setIsBALRecoveryShown(true)
+              }}
+              >Récupérer l’accès</Button>
             </>
           )}
         </Pane>
@@ -125,39 +144,4 @@ function BaseLocaleCardContent({isAdmin, baseLocale, commune, habilitation, isSh
   )
 }
 
-BaseLocaleCardContent.defaultProps = {
-  isAdmin: false,
-  userEmail: null,
-  onRemove: null,
-  onHide: null,
-  onSelect: null,
-  isShownHabilitationStatus: false
-}
-
-BaseLocaleCardContent.propTypes = {
-  baseLocale: PropTypes.shape({
-    _id: PropTypes.string.isRequired,
-    emails: PropTypes.array,
-    _created: PropTypes.string.isRequired,
-    status: PropTypes.oneOf([
-      'draft', 'ready-to-publish', 'replaced', 'published', 'demo'
-    ])
-  }).isRequired,
-  commune: PropTypes.shape({
-    nom: PropTypes.string.isRequired,
-    nbNumeros: PropTypes.number.isRequired,
-    nbNumerosCertifies: PropTypes.number.isRequired,
-  }),
-  habilitation: PropTypes.shape({
-    status: PropTypes.string.isRequired,
-    expiresAt: PropTypes.string,
-  }),
-  isAdmin: PropTypes.bool,
-  userEmail: PropTypes.string,
-  onSelect: PropTypes.func,
-  onHide: PropTypes.func,
-  onRemove: PropTypes.func,
-  isShownHabilitationStatus: PropTypes.bool
-}
-
 export default BaseLocaleCardContent
diff --git a/components/base-locale-card/index.js → components/base-locale-card/index.tsx b/components/base-locale-card/index.js → components/base-locale-card/index.tsx
@@ -1,21 +1,37 @@
-import {useState, useEffect} from 'react'
-import PropTypes from 'prop-types'
+import React, {useState, useEffect} from 'react'
 import {formatDistanceToNow} from 'date-fns'
 import {fr} from 'date-fns/locale'
-import {Heading, Card, Pane, Text, ChevronRightIcon, ChevronDownIcon} from 'evergreen-ui'
+import {Heading, Card, Pane, Text, ChevronRightIcon, ChevronDownIcon, Link} from 'evergreen-ui'
 
-import {getBaseLocale, getHabilitation} from '@/lib/bal-api'
+import {getHabilitation} from '@/lib/bal-api'
 import {getCommune} from '@/lib/geo-api'
 
 import StatusBadge from '@/components/status-badge'
 import BaseLocaleCardContent from '@/components/base-locale-card/base-locale-card-content'
+import {BaseLocaleType} from '@/types/base-locale'
+import {APIGeoCommuneType} from '@/types/api-geo'
+import {HabilitationType} from '@/types/habilitation'
+
+const ADRESSE_URL = process.env.NEXT_PUBLIC_ADRESSE_URL || 'https://adresse.data.gouv.fr'
+
+interface BaseLocaleCardProps {
+  baseLocale: BaseLocaleType;
+  isAdmin: boolean;
+  userEmail: string;
+  onRemove: () => void;
+  onHide: () => void;
+  onSelect: () => void;
+  isDefaultOpen: boolean;
+  isShownHabilitationStatus: boolean;
+}
 
-function BaseLocaleCard({baseLocale, isAdmin, userEmail, isShownHabilitationStatus, isDefaultOpen, onSelect, onRemove, onHide}) {
+function BaseLocaleCard({baseLocale, isAdmin, userEmail, isShownHabilitationStatus, isDefaultOpen, onSelect, onRemove, onHide}: BaseLocaleCardProps) {
   const {nom, _updated} = baseLocale
-  const [commune, setCommune] = useState()
-  const [habilitation, setHabilitation] = useState(null)
+  const [commune, setCommune] = useState<APIGeoCommuneType>()
+  const [habilitation, setHabilitation] = useState<HabilitationType | null>(null)
   const [isOpen, setIsOpen] = useState(isAdmin ? isDefaultOpen : false)
 
+  console.log(baseLocale)
   const majDate = formatDistanceToNow(new Date(_updated), {locale: fr})
 
   const handleIsOpen = () => {
@@ -24,10 +40,9 @@ function BaseLocaleCard({baseLocale, isAdmin, userEmail, isShownHabilitationStat
 
   useEffect(() => {
     const fetchCommune = async () => {
-      const communeBal = await getBaseLocale(baseLocale._id)
-      const communeGeo = await getCommune(baseLocale.commune)
+      const commune: APIGeoCommuneType = await getCommune(baseLocale.commune)
 
-      setCommune({...communeBal, ...communeGeo})
+      setCommune(commune)
     }
 
     const fetchHabilitation = async () => {
@@ -36,15 +51,15 @@ function BaseLocaleCard({baseLocale, isAdmin, userEmail, isShownHabilitationStat
       }
 
       try {
-        const habilitation = await getHabilitation(baseLocale.token, baseLocale._id)
+        const habilitation: HabilitationType = await getHabilitation(baseLocale.token, baseLocale._id)
         setHabilitation(habilitation)
       } catch {
         setHabilitation(null)
       }
     }
 
-    fetchCommune()
-    fetchHabilitation()
+    void fetchCommune()
+    void fetchHabilitation()
   }, [baseLocale])
 
   return (
@@ -79,7 +94,7 @@ function BaseLocaleCard({baseLocale, isAdmin, userEmail, isShownHabilitationStat
                 </Text>
 
                 {commune && (
-                  <Text fontStyle='italic'> {commune.nom} {commune.codeDepartement ? `(${commune.codeDepartement})` : ''}</Text>
+                  <Link href={`${ADRESSE_URL}/commune/${commune.code}`} fontStyle='italic'> {commune.nom} {commune.codeDepartement ? `(${commune.codeDepartement})` : ''}</Link>
                 )}
               </Pane>
             </Pane>
@@ -117,35 +132,4 @@ function BaseLocaleCard({baseLocale, isAdmin, userEmail, isShownHabilitationStat
   )
 }
 
-BaseLocaleCard.defaultProps = {
-  isAdmin: false,
-  userEmail: null,
-  onRemove: null,
-  onHide: null,
-  onSelect: null,
-  isDefaultOpen: false,
-  isShownHabilitationStatus: false
-}
-
-BaseLocaleCard.propTypes = {
-  baseLocale: PropTypes.shape({
-    _id: PropTypes.string.isRequired,
-    token: PropTypes.string,
-    nom: PropTypes.string.isRequired,
-    commune: PropTypes.string.isRequired,
-    _updated: PropTypes.string,
-    status: PropTypes.oneOf([
-      'draft', 'ready-to-publish', 'replaced', 'published', 'demo'
-    ]),
-    sync: PropTypes.object
-  }).isRequired,
-  isDefaultOpen: PropTypes.bool,
-  isAdmin: PropTypes.bool,
-  userEmail: PropTypes.string,
-  onSelect: PropTypes.func,
-  onHide: PropTypes.func,
-  onRemove: PropTypes.func,
-  isShownHabilitationStatus: PropTypes.bool
-}
-
 export default BaseLocaleCard
diff --git a/components/user-bases-locales.js b/components/user-bases-locales.js
@@ -1,7 +1,7 @@
 import {useState, useEffect, useContext, useCallback} from 'react'
 import Link from 'next/link'
 import {map, filter} from 'lodash'
-import {Pane, Spinner, Button, PlusIcon, Heading} from 'evergreen-ui'
+import {Pane, Spinner, Button, PlusIcon} from 'evergreen-ui'
 
 import {getBaseLocale} from '@/lib/bal-api'
 
@@ -73,13 +73,6 @@ function UserBasesLocales() {
       {hiddenBal && Object.keys(hiddenBal).length > 0 && (
         <HiddenBal />
       )}
-
-      <Pane margin='auto' textAlign='center' marginTop={16}>
-        <Heading marginBottom={8}>Vous voulez simplement essayer l’éditeur sans créer de Base Adresse Locale ?</Heading>
-        <Link legacyBehavior href='/new?demo=1' passHref>
-          <Button is='a'>Essayer l’outil</Button>
-        </Link>
-      </Pane>
     </Pane>
   )
 }

diff --git a/hooks/window-size.js → hooks/useWindowSize.ts b/hooks/window-size.js → hooks/useWindowSize.ts
@@ -1,5 +1,7 @@
 import {useState, useEffect} from 'react'
 
+const MOBILE_WIDTH = 768
+
 const initialValue = {
   innerHeight: null,
   innerWidth: null,
@@ -18,9 +20,12 @@ function getSize() {
 
 function useWindowSize() {
   const [windowSize, setWindowSize] = useState(initialValue)
+  const [isMobile, setIsMobile] = useState(false)
 
   const onResize = () => {
-    setWindowSize(getSize())
+    const size = getSize()
+    setWindowSize(size)
+    setIsMobile(size.innerWidth >= MOBILE_WIDTH)
   }
 
   useEffect(() => {
@@ -34,7 +39,7 @@ function useWindowSize() {
     }
   }, [])
 
-  return windowSize
+  return {windowSize, isMobile}
 }
 
 export default useWindowSize
diff --git a/layouts/sidebar.js → layouts/sidebar.tsx b/layouts/sidebar.js → layouts/sidebar.tsx
@@ -1,13 +1,17 @@
-import {useContext, useEffect} from 'react'
-import PropTypes from 'prop-types'
-import {Pane, Button, ChevronRightIcon, CrossIcon, ChevronLeftIcon} from 'evergreen-ui'
-
-import useWindowSize from '@/hooks/window-size'
+import React, {useContext, useEffect} from 'react'
+import {Pane, Button, ChevronRightIcon, CrossIcon, ChevronLeftIcon, PaneProps} from 'evergreen-ui'
 
 import BalDataContext from '@/contexts/bal-data'
 
-function Sidebar({isHidden, size, onToggle, top, bottom, ...props}) {
-  const {innerWidth} = useWindowSize()
+interface SidebarProps extends PaneProps {
+  isHidden: boolean;
+  size: number;
+  onToggle: (isHidden: boolean) => void;
+  top: number;
+  bottom: number;
+}
+
+function Sidebar({isHidden = false, size, onToggle, top, bottom = 0, ...props}: SidebarProps) {
   const {setEditingId, isEditing, setIsEditing} = useContext(BalDataContext)
 
   const handleClick = () => {
@@ -47,7 +51,6 @@ function Sidebar({isHidden, size, onToggle, top, bottom, ...props}) {
           <Button
             height={50}
             paddingX={8}
-            elevation={0}
             borderRadius={0}
             onClick={handleClick}
           >
@@ -75,18 +78,4 @@ function Sidebar({isHidden, size, onToggle, top, bottom, ...props}) {
   )
 }
 
-Sidebar.propTypes = {
-  isHidden: PropTypes.bool,
-  bottom: PropTypes.number,
-  children: PropTypes.node.isRequired,
-  size: PropTypes.number.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  top: PropTypes.number.isRequired
-}
-
-Sidebar.defaultProps = {
-  isHidden: false,
-  bottom: 0
-}
-
 export default Sidebar