Get colors from url parameters

ozgrozer · Jun 30, 2024 · e64b463 · e64b463
1 parent f0c4fab
commit e64b463
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/components/ShareModal.jsx b/components/ShareModal.jsx
@@ -24,7 +24,7 @@ export default ({ modalIsOpen, closeModal }) => {
     .map(color => color.substr(1))
     .join('-')
 
-  const fullUrl = `${baseUrl}${colorsForUrl}`
+  const fullUrl = `${baseUrl}?colors=${colorsForUrl}`
 
   return (
     <Modal

diff --git a/pages/index.jsx b/pages/index.jsx
@@ -1,15 +1,34 @@
 import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { useState, useEffect } from 'react'
 
 import App from '@components/App'
 
 export default () => {
+  const router = useRouter()
+  const [urlColors, setUrlColors] = useState([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    if (router.isReady) {
+      const { colors } = router.query
+      if (colors) {
+        const colorString = Array.isArray(colors) ? colors.join('-') : colors
+        setUrlColors(colorString.split('-'))
+      }
+      setIsLoading(false)
+    }
+  }, [router.isReady, router.query])
+
+  if (isLoading) return null
+
   return (
     <>
       <Head>
         <title>Colors</title>
       </Head>
 
-      <App urlColors={[]} />
+      <App urlColors={urlColors} />
     </>
   )
 }