feat: allow rerendering of elements on add/remove after refresh by us…

…ing an array

src/i18n/locales/en.json

@@ -19,6 +19,7 @@
       "description": "Dynamically add and remove elements from the page",
       "information": "As well as being able to dynamically add and remove elements from the page, you can also add `?initialElements=X` onto the url to generate elements on load.",
       "add-element": "Add Element",
+      "clear-storage": "Clear Storage",
       "remove-element": "Remove Element"
     },
     "drag-and-drop": {

src/i18n/locales/fr.json

@@ -19,6 +19,7 @@
       "description": "Ajouter et supprimer dynamiquement des éléments de la page",
       "information": "En plus de pouvoir ajouter et supprimer dynamiquement des éléments de la page, vous pouvez également ajouter `?initialElements=X` à l'URL pour générer des éléments au chargement.",
       "add-element": "Ajouter un élément",
+      "clear-storage": "Effacer le stockage",
       "remove-element": "Supprimer un élément"
     },
     "drag-and-drop": {

src/i18n/locales/pt-br.json

@@ -19,6 +19,7 @@
       "description": "Adicione e remova dinamicamente elementos da página",
       "information": "Além de poder adicionar e remover dinamicamente elementos da página, você também pode adicionar `?initialElements=X` à URL para gerar elementos no carregamento.",
       "add-element": "Adicionar Elemento",
+      "clear-storage": "Limpar Armazenamento",
       "remove-element": "Remover Elemento"
     },
     "drag-and-drop": {

src/scenarios/AddRemove.tsx

@@ -8,7 +8,11 @@ import PageSetup from '../components/PageSetup'
 
 const AddRemove = (): JSX.Element => {
   const { t } = useTranslation()
-  const [elements, setElements] = useState<number[]>([])
+  const [elements, setElements] = useState<number[]>(() => {
+    // Retrieve elements from sessionStorage
+    const storedElements = sessionStorage.getItem('elements')
+    return storedElements !== null ? JSON.parse(storedElements) : []
+  })
   const [nextIndex, setNextIndex] = useState(() => {
     const storedIndex = sessionStorage.getItem('nextIndex')
     return storedIndex !== null ? parseInt(storedIndex, 10) : 0
@@ -28,6 +32,11 @@ const AddRemove = (): JSX.Element => {
     }
   }, [elements, initialElementsParam])
 
+  useEffect(() => {
+    // Save elements to sessionStorage whenever it changes
+    sessionStorage.setItem('elements', JSON.stringify(elements))
+  }, [elements])
+
   const addElement = (): void => {
     setNextIndex((prevIndex) => {
       const newIndex = prevIndex + 1
@@ -48,6 +57,12 @@ const AddRemove = (): JSX.Element => {
     })
   }
 
+  const clearStorage = (): void => {
+    sessionStorage.clear()
+    setElements([]) // Clear elements in state as well
+    setNextIndex(0)
+  }
+
   const ElementComponent = ({
     index,
     removeElement
@@ -60,8 +75,8 @@ const AddRemove = (): JSX.Element => {
     return (
       <>
         <Button
-          variant="contained"
-          color="error"
+          variant='contained'
+          color='error'
           onClick={removeElement}
           data-testid={`remove-element-${index + 1}`}
         >
@@ -78,10 +93,15 @@ const AddRemove = (): JSX.Element => {
         description={t('scenarios.add-remove.description')}
         information={t('scenarios.add-remove.information')}
       />
-      <Button variant="contained" onClick={addElement} sx={{ mb: 4 }} data-testid="add-element">
-        {t('scenarios.add-remove.add-element')}
-      </Button>
-      <Box display="grid" gridTemplateColumns="repeat(auto-fill, minmax(200px, 1fr))" gap={2}>
+      <Box display="flex" mb={4}>
+        <Button variant="contained" onClick={addElement} data-testid="add-element" sx={{ mr: 2 }}>
+          {t('scenarios.add-remove.add-element')}
+        </Button>
+        <Button variant="contained" onClick={clearStorage} data-testid="clear-storage" color="secondary">
+        {t('scenarios.add-remove.clear-storage')}
+        </Button>
+      </Box>
+      <Box display='grid' gridTemplateColumns='repeat(auto-fill, minmax(200px, 1fr))' gap={2}>
         {elements.map((element, index) => (
           <div key={index}>
             <ElementComponent

src/tests/AddRemove.test.tsx

@@ -49,4 +49,25 @@ describe('AddRemove component', () => {
     const removeSecondElementButton = screen.getByTestId('remove-element-2')
     expect(removeSecondElementButton).toBeInTheDocument()
   })
+
+  it('clears storage when the "Clear Storage" button is clicked', () => {
+    TestRenderer(<AddRemove />)
+
+    // Add an element first
+    const addButton = screen.getByTestId('add-element')
+    fireEvent.click(addButton)
+    const removeElementButton = screen.queryByTestId('remove-element-1')
+    expect(removeElementButton).toBeInTheDocument()
+
+    // Click the "Clear Storage" button
+    const clearStorageButton = screen.getByTestId('clear-storage')
+    fireEvent.click(clearStorageButton)
+
+    // Check if storage is cleared
+    expect(sessionStorage.getItem('elements')).toEqual('[]')
+    expect(sessionStorage.getItem('nextIndex')).toBeNull()
+
+    // Check if state is updated
+    expect(removeElementButton).not.toBeInTheDocument()
+  })
 })