Migration Typescript

components/accent-tool.js → components/accent-tool.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import React from 'react'
 import {Popover, Button, Pane} from 'evergreen-ui'
 
 const ACCENTS = [
@@ -50,10 +50,18 @@ const ACCENTS = [
   'L·L'
 ]
 
-function AccentTool({input, handleAccent, updateCaret, forwadedRef, isDisabled}) {
+interface AccentToolProps {
+  input: string;
+  handleAccent: (event: any) => void;
+  updateCaret: () => void;
+  forwadedRef: {current: {selectionStart: number; selectionEnd: number}};
+  isDisabled?: boolean;
+}
+
+function AccentTool({input, handleAccent, updateCaret, forwadedRef, isDisabled = false}: AccentToolProps) {
   const handleClick = event => {
     const {selectionStart, selectionEnd} = forwadedRef.current
-    const valueWithAccent = {target: {value: input.slice(0, selectionStart) + event.target.value + input.slice(selectionEnd)}}
+    const valueWithAccent = {target: {value: `${input.slice(0, selectionStart)}${(event.target.value as string)}${input.slice(selectionEnd)}`}}
 
     handleAccent(valueWithAccent)
     updateCaret()
@@ -78,16 +86,4 @@ function AccentTool({input, handleAccent, updateCaret, forwadedRef, isDisabled})
   )
 }
 
-AccentTool.propTypes = {
-  input: PropTypes.string.isRequired,
-  handleAccent: PropTypes.func.isRequired,
-  updateCaret: PropTypes.func.isRequired,
-  forwadedRef: PropTypes.object.isRequired,
-  isDisabled: PropTypes.bool
-}
-
-AccentTool.defaultProps = {
-  isDisabled: false
-}
-
 export default AccentTool

components/bal/draw-editor.js

@@ -1,33 +1,15 @@
-import {useContext, useCallback, useMemo} from 'react'
-import PropTypes from 'prop-types'
-import {isEqual} from 'lodash'
-import {Pane, Heading, Button, Alert, EditIcon, EraserIcon} from 'evergreen-ui'
+import {useContext, useCallback} from 'react'
+import {Pane, Heading, Button, Alert, EraserIcon} from 'evergreen-ui'
 
 import DrawContext from '@/contexts/draw'
 
-function DrawEditor({trace}) {
-  const {modeId, data, setData} = useContext(DrawContext)
-
-  const handleCancel = useCallback(() => {
-    setData({
-      type: 'Feature',
-      properties: {},
-      geometry: trace
-    })
-  }, [setData, trace])
+function DrawEditor() {
+  const {hint, data, setData} = useContext(DrawContext)
 
   const handleDelete = useCallback(() => {
     setData(null)
   }, [setData])
 
-  const isModified = useMemo(() => {
-    if (data && trace) {
-      return !isEqual(data.geometry.coordinates, trace.coordinates, isEqual)
-    }
-
-    return false
-  }, [data, trace])
-
   return (
     <Pane borderLeft='default' paddingX={12} marginBottom={12}>
       <Heading is='h4'>
@@ -39,22 +21,9 @@ function DrawEditor({trace}) {
         intent='none'
         title='Utilisez la carte pour dessiner le tracer de la voie'
       >
-        {modeId === 'drawLineString' ?
-          'Cliquez sur la carte pour indiquer le début de la voie, puis ajouter de nouveaux points afin de tracer votre voie. Une fois terminé, cliquez sur le dernier point afin d’indiquer la fin de la voie.' :
-          'Modifier le tracé de la voie directement depuis la carte.'}
+        {hint}
       </Alert>
 
-      {isModified && (
-        <Button
-          type='button'
-          marginY={8} marginRight={12}
-          iconBefore={EditIcon}
-          onClick={handleCancel}
-        >
-          Annuler les modifications
-        </Button>
-      )}
-
       {data && (
         <Button
           type='button'
@@ -72,12 +41,4 @@ function DrawEditor({trace}) {
   )
 }
 
-DrawEditor.defaultProps = {
-  trace: null
-}
-
-DrawEditor.propTypes = {
-  trace: PropTypes.object
-}
-
 export default DrawEditor

components/bal/language-preview.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import {Pane, UnorderedList, ListItem, Tooltip, Position, HelpIcon} from 'evergreen-ui'
 
 import languesRegionales from '@ban-team/shared-data/langues-regionales.json'

components/bal/toponymes-list.js

@@ -34,10 +34,7 @@ function ToponymesList({toponymes, onEnableEditing, onRemove, balId, addButton})
   }
 
   const onSelect = id => {
-    router.push(
-      `/bal/toponyme?balId=${balId}&idToponyme=${id}`,
-      `/bal/${balId}/toponymes/${id}`
-    )
+    router.push(`/bal/${balId}/toponymes/${id}`)
   }
 
   const [filtered, setFilter] = useFuse(toponymes, 200, {

components/bal/voie-editor.js

@@ -127,7 +127,7 @@ function VoieEditor({initialValue, closeForm}) {
         </FormInput>
 
         {isMetric && (
-          <DrawEditor trace={initialValue ? initialValue.trace : null} />
+          <DrawEditor />
         )}
       </Pane>
 

components/bal/voies-list.js

@@ -35,10 +35,7 @@ function VoiesList({voies, onEnableEditing, setToConvert, balId, onRemove, addBu
   }
 
   const onSelect = id => {
-    router.push(
-      `/bal/voie?balId=${balId}&idVoie=${id}`,
-      `/bal/${balId}/voies/${id}`
-    )
+    router.push(`/bal/${balId}/voies/${id}`)
   }
 
   const [filtered, setFilter] = useFuse(voies, 200, {

components/bases-locales-list/index.js

@@ -24,12 +24,11 @@ function BasesLocalesList({basesLocales, sortBal}) {
     return getHiddenBal(balId)
   }, [getHiddenBal])
 
-  const onBalSelect = useCallback(bal => {
+  const onBalSelect = bal => {
     Router.push(
-      `/bal?balId=${bal._id}`,
       `/bal/${bal._id}`
     )
-  }, [])
+  }
 
   const [filtered, onFilter] = useFuse(basesLocales, 200, {
     keys: [

components/bases-locales-list/public-bases-locales-list.js

@@ -1,17 +1,15 @@
-import {useCallback} from 'react'
 import PropTypes from 'prop-types'
 import Router from 'next/router'
 import {Pane, Table} from 'evergreen-ui'
 
 import BaseLocaleCard from '@/components/base-locale-card'
 
 function PublicBasesLocalesList({basesLocales, searchInput, onFilter}) {
-  const onBalSelect = useCallback(bal => {
+  const onBalSelect = bal => {
     Router.push(
-      `/bal?balId=${bal._id}`,
       `/bal/${bal._id}`
     )
-  }, [])
+  }
 
   return (
     <Pane borderTop>

components/breadcrumbs.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import NextLink from 'next/link'
+import {Pane, Text, HomeIcon, Link} from 'evergreen-ui'
+import {BaseLocaleType} from '@/types/base-locale'
+import {CommmuneType} from '@/types/commune'
+import {VoieType} from '@/types/voie'
+import {ToponymeType} from '@/types/toponyme'
+
+interface BreadcrumbsProps {
+  baseLocale: BaseLocaleType;
+  commune: CommmuneType;
+  voie?: VoieType;
+  toponyme?: ToponymeType;
+}
+
+function Breadcrumbs({baseLocale, commune, voie, toponyme, ...props}: BreadcrumbsProps) {
+  if (!voie && !toponyme) {
+    return (
+      <Pane paddingY={2} whiteSpace='nowrap' overflow='hidden' textOverflow='ellipsis' {...props}>
+        <NextLink href='/'>
+          <HomeIcon style={{verticalAlign: 'middle', color: '#000'}} />
+        </NextLink>
+        <Text color='muted'>{' > '}</Text>
+        <Text>{baseLocale.nom || 'Base Adresse Locale'}</Text>
+        <Text color='muted'>{' > '}</Text>
+        <Text>{commune.nom}</Text>
+      </Pane>
+    )
+  }
+
+  return (
+    <Pane paddingY={2} whiteSpace='nowrap' overflow='hidden' textOverflow='ellipsis' {...props}>
+      <NextLink href='/'>
+        <HomeIcon style={{verticalAlign: 'middle', color: '#000'}} />
+      </NextLink>
+      <Text color='muted'>{' > '}</Text>
+      <Text>{baseLocale.nom || 'Base Adresse Locale'}</Text>
+      <Text color='muted'>{' > '}</Text>
+
+      <Link is={NextLink} href={`/bal/${baseLocale._id}`}>
+        {commune.nom}
+      </Link>
+
+      <Text color='muted'>{' > '}</Text>
+      <Text>{voie?.nom || toponyme.nom}</Text>
+    </Pane>
+  )
+}
+
+export default Breadcrumbs

components/commune-search/commune-search.js

@@ -36,7 +36,7 @@ function CommuneSearch({placeholder, innerRef, initialSelectedItem, onSelect, ..
 
               return getRef(ref)
             }}
-            autocomplete='chrome-off'
+            autoComplete='chrome-off'
             placeholder={placeholder}
             value={inputValue}
             {...getInputProps({

components/convert-voie-warning.js → components/convert-voie-warning.tsx

@@ -1,7 +1,14 @@
-import PropTypes from 'prop-types'
 import {Dialog} from 'evergreen-ui'
 
-function ConvertVoieWarning({isShown, content, isLoading, onCancel, onConfirm}) {
+interface ConvertVoieWarningProps {
+  isShown: boolean;
+  content: React.ReactNode;
+  isLoading: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+function ConvertVoieWarning({isShown = false, content, isLoading, onCancel, onConfirm}: ConvertVoieWarningProps) {
   return (
     <Dialog
       isShown={isShown}
@@ -22,16 +29,4 @@ function ConvertVoieWarning({isShown, content, isLoading, onCancel, onConfirm})
   )
 }
 
-ConvertVoieWarning.propTypes = {
-  isShown: PropTypes.bool,
-  content: PropTypes.node.isRequired,
-  isLoading: PropTypes.bool,
-  onCancel: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired
-}
-
-ConvertVoieWarning.defaultProps = {
-  isShown: false
-}
-
 export default ConvertVoieWarning