feat: test ISR

src/components/Dash/DescriptionInput/index.tsx

@@ -1,4 +1,4 @@
-import { useData } from '../../../contexts/DataContext'
+import { useData } from '../../../hooks/useData'
 
 export function DescriptionInput() {
   const { data, setData } = useData()

src/components/Dash/NameInput/index.tsx

@@ -1,4 +1,4 @@
-import { useData } from '../../../contexts/DataContext'
+import { useData } from '../../../hooks/useData'
 
 export function NameInput() {
   const { data, setData } = useData()

src/components/Dash/index.tsx

@@ -1,77 +1,80 @@
 import { isEqual } from 'lodash'
+import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 
-import { useData } from '../../contexts/DataContext'
+import { useData } from '../../hooks/useData'
 import { api } from '../../services/api'
+import type { Colors, Fonts } from '../../styles/stitches.config'
 import { theme } from '../../styles/stitches.config'
+import type { Data } from '../../types/Data'
 import {
   getLocalStorageData,
   removeLocalStorageData,
   setLocalStorageData
 } from '../../utils/localStorage'
+import type { ButtonVariantProps } from '../Button'
 import { Home } from '../Home'
 import { DescriptionInput } from './DescriptionInput'
 import { NameInput } from './NameInput'
 import { Content, Preview, Wrapper } from './styles'
 
-export function Dash() {
-  const { initialData, data, setData } = useData()
+type DashProps = {
+  initialData: Data
+}
+
+export function Dash({ initialData }: DashProps) {
+  const { push } = useRouter()
+  const { data, setData } = useData()
   const [isLoading, setIsLoading] = useState(true)
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
 
   useEffect(() => {
-    const storageData = getLocalStorageData()
+    if (isLoading) {
+      const storageData = getLocalStorageData()
+      if (storageData) setData(storageData)
+      else setData(initialData)
 
-    if (storageData && isLoading) {
-      setData(storageData)
+      setIsLoading(false)
     }
 
-    setIsLoading(false)
-  }, [isLoading, setData])
-
-  useEffect(() => {
-    if (!isEqual(initialData, data)) {
+    if (!isLoading && !isEqual(initialData, data)) {
       setHasUnsavedChanges(true)
       setLocalStorageData(data)
     } else {
       setHasUnsavedChanges(false)
-      removeLocalStorageData()
     }
-  }, [data, initialData])
+  }, [data, initialData, isLoading, setData])
 
   const handleSave = async () => {
     try {
       await api.put('data', { data })
-      setHasUnsavedChanges(false)
       removeLocalStorageData()
+      setHasUnsavedChanges(false)
+      push('/')
     } catch (error) {
       console.error(error)
     }
   }
 
-  const handleChangeBackground = (background: string) => {
+  const handleChangeBackground = (background: Colors) => {
     setData({
       ...data,
       settings: { ...data.settings, colors: { ...data.settings.colors, background } }
     })
   }
 
-  const handleChangeButtonsSchema = (schema: string) => {
+  const handleChangeButtonsSchema = (schema: ButtonVariantProps['schema']) => {
     setData({ ...data, settings: { ...data.settings, buttonsSchema: schema } })
   }
 
-  const handleChangeOutline = (outline: boolean) => {
+  const handleChangeOutline = (outline: ButtonVariantProps['outline']) => {
     setData({ ...data, settings: { ...data.settings, outline } })
   }
 
-  const handleChangeFont = (font: string) => {
+  const handleChangeFont = (font: Fonts) => {
     setData({ ...data, settings: { ...data.settings, font } })
   }
 
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
   return (
     <Wrapper>
       <Content>
@@ -86,7 +89,10 @@ export function Dash() {
         <NameInput />
         <DescriptionInput />
 
-        <select value={data.settings.font} onChange={e => handleChangeFont(e.target.value)}>
+        <select
+          value={data.settings.font}
+          onChange={e => handleChangeFont(e.target.value as Fonts)}
+        >
           <option value="square">Baloo</option>
           <option value="montserrat">Montserrat</option>
           <option value="roboto">Roboto</option>
@@ -94,7 +100,7 @@ export function Dash() {
 
         <select
           value={data.settings.colors.background}
-          onChange={e => handleChangeBackground(e.target.value)}
+          onChange={e => handleChangeBackground(e.target.value as Colors)}
         >
           {Object.keys(theme.colors).map(color => (
             <option key={color} value={color}>
@@ -104,8 +110,8 @@ export function Dash() {
         </select>
 
         <select
-          value={data.settings.buttonsSchema}
-          onChange={e => handleChangeButtonsSchema(e.target.value)}
+          value={data.settings.buttonsSchema as string}
+          onChange={e => handleChangeButtonsSchema(e.target.value as ButtonVariantProps['schema'])}
         >
           <option value="square">Square</option>
           <option value="rounded">Rounded</option>
@@ -114,8 +120,10 @@ export function Dash() {
 
         <input
           type="checkbox"
-          defaultChecked={data.settings.outline}
-          onChange={() => handleChangeOutline(!data.settings.outline)}
+          defaultChecked={data.settings.outline as boolean}
+          onChange={() =>
+            handleChangeOutline(!data.settings.outline as ButtonVariantProps['outline'])
+          }
         />
       </Content>
       <Preview>