Create survey component

Author: itsmeurbi

src/Survey.tsx

@@ -0,0 +1,9 @@
+import { useSurvey } from './hooks/useSurvey'
+
+const Survey = () =>  {
+  const { navigateToSurvey } = useSurvey()
+
+  navigateToSurvey()
+}
+
+export default Survey

src/hooks/useSheets.ts

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useState } from 'react'
+import { getSheetsData } from '../services/sheets'
+
+const useSheets = (query: string) => {
+  const [value, setValue] = useState<string | null>(null)
+
+  const getLink = useCallback(() => {
+    getSheetsData(query)
+      .then(setValue)
+      .catch(err => { throw new Error(err) })
+  }, [query])
+
+  useEffect(() => {
+    getLink()
+  }, [getLink])
+
+  return { value }
+}
+
+export default useSheets

src/hooks/useSurvey.ts

@@ -0,0 +1,18 @@
+import { useNavigate } from 'react-router-dom'
+import useSheets from './useSheets'
+
+export const useSurvey = () => {
+  const { value: link } = useSheets(`select A where A contains 'https' limit 1`)
+  const navigate = useNavigate()
+
+  const navigateToSurvey = () => { if (link) window.location = link }
+
+  const openSurvey = () => {
+    if (link) {
+      window.open(link)
+      navigate('/')
+    }
+  }
+
+  return { openSurvey, navigateToSurvey }
+}

src/routes.tsx

@@ -3,12 +3,14 @@ import { type ReactElement } from 'react'
 import Home from './Home'
 import Sponsorship from './Sponsorship'
 import About from './About'
+import Survey from './Survey'
 
 export default function Router (): ReactElement | null {
   const routes = useRoutes([
-    { path: '/', element: <Home /> },
-    { path: '/about', element: <About /> },
-    { path: '/sponsorship', element: <Sponsorship /> },
+    { path: '/', element: <Home/> },
+    { path: '/about', element: <About/> },
+    { path: '/sponsorship', element: <Sponsorship/> },
+    { path: '/survey', element: <Survey/> },
   ])
 
   return routes

src/services/sheets.ts

@@ -0,0 +1,29 @@
+// fixed value. Idially this should be taken from env
+const getSheetId = () => "1UrATDa3qAnoLDJtSCPFzawDZLoJbYAp3mNq4NKyI5wU"
+
+const getSheetUrl = (query: string) => {
+  const sheetsUrl = 'https://docs.google.com/spreadsheets/d/'
+  const sheetsQueryPrefix = '/gviz/tq?tq='
+  const id = getSheetId()
+
+  return `${sheetsUrl}${id}${sheetsQueryPrefix}${encodeURIComponent(query)}`
+}
+
+const parseSheet = (rawSheet: string) => {
+  const cleaned = rawSheet.replace(
+    /.*google.visualization.Query.setResponse\({(.*?)}\);?/s,
+    "{$1}"
+  )
+
+  // First cell, first value
+  return JSON.parse(cleaned).table.rows.at().c.at().v
+}
+
+export const getSheetsData = async (query: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    fetch(getSheetUrl(query))
+      .then(data => data.text())
+      .then(raw => resolve(parseSheet(raw)))
+      .catch(reject)
+  })
+}