refactor(react-components): make it SSR friendly

Author: elboletaire

package.json

@@ -21,6 +21,7 @@
     "prettier": "^2.8.7",
     "tsup": "^8.0.1",
     "turbo": "^1.8.6",
+    "vite": "7.3.1",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.16"
   },

packages/extended-sdk/package.json

@@ -21,8 +21,7 @@
     "build": "tsup --config ../tsup.config.ts",
     "prepack": "clean-package",
     "clean": "rm -rf dist .turbo node_modules",
-    "postpack": "mv -fv package.json.backup package.json",
-    "test": "vitest run --config ../../vitest.config.ts --passWithNoTests"
+    "postpack": "mv -fv package.json.backup package.json"
   },
   "main": "src/index.ts",
   "devDependencies": {

packages/react-components/src/browser.ts

@@ -0,0 +1,54 @@
+export const isBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined'
+
+export const getStorageItem = (key: string) => {
+  if (!isBrowser()) return null
+
+  try {
+    return window.localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+export const setStorageItem = (key: string, value: string) => {
+  if (!isBrowser()) return
+
+  try {
+    window.localStorage.setItem(key, value)
+  } catch {}
+}
+
+export const removeStorageItem = (key: string) => {
+  if (!isBrowser()) return
+
+  try {
+    window.localStorage.removeItem(key)
+  } catch {}
+}
+
+export const getLocationHash = () => {
+  if (!isBrowser()) return ''
+
+  return window.location.hash ? window.location.hash.slice(1) : ''
+}
+
+export const replaceLocationHash = (value: string) => {
+  if (!isBrowser()) return
+
+  document.location.hash = value
+}
+
+export const clearLocationHash = () => {
+  if (!isBrowser()) return
+
+  window.history.pushState({}, '', document.location.pathname)
+}
+
+export const hasEthereumProvider = () => {
+  if (!isBrowser()) return false
+  return 'ethereum' in window
+}
+
+export const canUseWorkers = () => {
+  return typeof Worker !== 'undefined' && typeof Blob !== 'undefined' && typeof URL !== 'undefined'
+}

packages/react-components/src/components/Election/Description.tsx

@@ -1,15 +1,16 @@
-import { PublishedElection } from '@vocdoni/sdk'
 import { ComponentPropsWithoutRef } from 'react'
 import { useComponents } from '~components/context/useComponents'
 import { useElection } from '~providers'
+import { getElectionDescription } from '~providers/election/normalized'
 
 export const ElectionDescription = (props: ComponentPropsWithoutRef<'div'> & Record<string, unknown>) => {
   const { election } = useElection()
   const { ElectionDescription: Slot } = useComponents()
+  const description = getElectionDescription(election)
 
-  if (!election || !(election instanceof PublishedElection) || !election.description?.default) {
+  if (!election || !description) {
     return null
   }
 
-  return <Slot {...props} description={election.description.default} />
+  return <Slot {...props} description={description} />
 }

packages/react-components/src/components/Election/Election.tsx

@@ -1,6 +1,6 @@
-import { PublishedElection } from '@vocdoni/sdk'
 import { useComponents } from '~components/context/useComponents'
 import { ElectionProvider, ElectionProviderComponentProps, useElection } from '~providers'
+import { getElectionField, isPublishedElectionLike } from '~providers/election/normalized'
 import { ElectionActions } from './Actions'
 import { ElectionDescription } from './Description'
 import { ElectionHeader } from './Header'
@@ -41,7 +41,7 @@ const ElectionBody = () => {
       <HR />
       <ElectionQuestions />
       <VoteButton />
-      {election instanceof PublishedElection && election.get('census.type') === 'spreadsheet' && connected ? (
+      {isPublishedElectionLike(election) && getElectionField(election, 'census.type') === 'spreadsheet' && connected ? (
         <SpreadsheetAccess />
       ) : null}
       <ElectionResults />

packages/react-components/src/components/Election/ElectionTitle.test.tsx

@@ -9,16 +9,17 @@ vi.mock('../../providers', () => ({
 
 vi.mock('@vocdoni/sdk', () => ({
   PublishedElection: class PublishedElection {},
+  InvalidElection: class InvalidElection {},
 }))
 
 describe('ElectionTitle', () => {
-  it('renders election title', () => {
+  it('renders election title from serialized election data', () => {
     render(
       <ComponentsProvider>
         <ElectionTitle />
       </ComponentsProvider>
     )
 
-    expect(screen.getByText('0x1')).toBeInTheDocument()
+    expect(screen.getByText('My Election')).toBeInTheDocument()
   })
 })

packages/react-components/src/components/Election/Schedule.tsx

@@ -1,9 +1,10 @@
-import { ElectionStatus, PublishedElection } from '@vocdoni/sdk'
+import { ElectionStatus } from '@vocdoni/sdk'
 import { format as dformat, formatDistance } from 'date-fns'
 import { ComponentPropsWithoutRef } from 'react'
 import { useComponents } from '~components/context/useComponents'
 import { useReactComponentsLocalize } from '~i18n/localize'
 import { useElection } from '~providers'
+import { getElectionDate, getElectionStatus } from '~providers/election/normalized'
 
 export type ElectionScheduleProps = ComponentPropsWithoutRef<'p'> &
   Record<string, unknown> & {
@@ -21,13 +22,15 @@ export const ElectionSchedule = ({
   const { election } = useElection()
   const t = useReactComponentsLocalize()
   const { ElectionSchedule: Slot } = useComponents()
+  const startDate = getElectionDate(election, 'startDate')
+  const endDate = getElectionDate(election, 'endDate')
+  const creationTime = getElectionDate(election, 'creationTime')
+  const status = getElectionStatus(election)
 
-  if (!election || !(election instanceof PublishedElection)) return null
+  if (!election || !startDate || !endDate || !status) return null
 
   const getRemaining = (): string => {
-    const endDate = election.endDate
-    const startDate = election.startDate
-    switch (election.status) {
+    switch (status) {
       case ElectionStatus.ONGOING:
       case ElectionStatus.RESULTS:
         if (endDate < new Date()) {
@@ -56,15 +59,15 @@ export const ElectionSchedule = ({
   }
 
   let text = t('schedule.from_begin_to_end', {
-    begin: dformat(new Date(election.startDate), format),
-    end: dformat(new Date(election.endDate), format),
+    begin: dformat(new Date(startDate), format),
+    end: dformat(new Date(endDate), format),
   })
 
   if (showRemaining) {
     text = getRemaining()
-  } else if (showCreatedAt) {
+  } else if (showCreatedAt && creationTime) {
     text = t('schedule.created', {
-      distance: formatDistance(election.creationTime, new Date(), { addSuffix: true }),
+      distance: formatDistance(creationTime, new Date(), { addSuffix: true }),
     })
   }
 

packages/react-components/src/components/Election/SpreadsheetAccess.tsx

@@ -1,10 +1,12 @@
 import { Wallet } from '@ethersproject/wallet'
-import { PublishedElection, VocdoniSDKClient } from '@vocdoni/sdk'
+import { VocdoniSDKClient } from '@vocdoni/sdk'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useComponents } from '~components/context/useComponents'
 import { useReactComponentsLocalize } from '~i18n/localize'
 import { errorToString, useClient, useElection, walletFromRow } from '~providers'
+import { clearLocationHash, getLocationHash, replaceLocationHash } from '~providers/browser'
+import { getElectionField, isPublishedElectionLike } from '~providers/election/normalized'
 
 type MetaSpecs = {
   [name: string]: {
@@ -24,6 +26,7 @@ export const SpreadsheetAccess = ({ hashPrivateKey, className }: SpreadsheetAcce
   const [open, setOpen] = useState(false)
   const [loading, setLoading] = useState(false)
   const [formError, setFormError] = useState<string>()
+  const [privkey, setPrivkey] = useState('')
   const { SpreadsheetAccess: Slot } = useComponents()
   const localize = useReactComponentsLocalize()
   const { env } = useClient()
@@ -36,8 +39,11 @@ export const SpreadsheetAccess = ({ hashPrivateKey, className }: SpreadsheetAcce
     reset,
   } = useForm<any>()
 
-  const shouldRender = election instanceof PublishedElection && election.get('census.type') === 'spreadsheet'
-  const privkey = window.location.hash ? window.location.hash.split('#')[1] : ''
+  const shouldRender = isPublishedElectionLike(election) && getElectionField(election, 'census.type') === 'spreadsheet'
+
+  useEffect(() => {
+    setPrivkey(getLocationHash())
+  }, [])
 
   useEffect(() => {
     ;(async () => {
@@ -143,7 +149,7 @@ export const SpreadsheetAccess = ({ hashPrivateKey, className }: SpreadsheetAcce
 
       setClient(client)
       if (hashPrivateKey) {
-        document.location.hash = wallet.privateKey
+        replaceLocationHash(wallet.privateKey)
       }
       reset()
       setOpen(false)
@@ -155,7 +161,7 @@ export const SpreadsheetAccess = ({ hashPrivateKey, className }: SpreadsheetAcce
   }
 
   const logout = () => {
-    window.history.pushState({}, '', document.location.pathname)
+    clearLocationHash()
     clearClient()
   }
 

packages/react-components/src/components/Election/StatusBadge.tsx

@@ -1,8 +1,9 @@
-import { ElectionStatus, InvalidElection, PublishedElection } from '@vocdoni/sdk'
+import { ElectionStatus } from '@vocdoni/sdk'
 import { ComponentPropsWithoutRef } from 'react'
 import { useComponents } from '~components/context/useComponents'
 import { useReactComponentsLocalize } from '~i18n/localize'
 import { useElection } from '~providers'
+import { getElectionStatus, isInvalidElectionLike } from '~providers/election/normalized'
 
 export const ElectionStatusBadge = (props: ComponentPropsWithoutRef<'span'> & Record<string, unknown>) => {
   const { election } = useElection()
@@ -12,25 +13,20 @@ export const ElectionStatusBadge = (props: ComponentPropsWithoutRef<'span'> & Re
   if (!election) return null
 
   let tone: 'success' | 'warning' | 'danger' = 'success'
+  const status = getElectionStatus(election)
 
-  if (
-    election instanceof PublishedElection &&
-    [ElectionStatus.PAUSED, ElectionStatus.ENDED].includes(election.status)
-  ) {
+  if (status && ([ElectionStatus.PAUSED, ElectionStatus.ENDED] as string[]).includes(status)) {
     tone = 'warning'
   }
 
   if (
-    election instanceof InvalidElection ||
-    [ElectionStatus.CANCELED, ElectionStatus.PROCESS_UNKNOWN].includes(election.status)
+    isInvalidElectionLike(election) ||
+    (status && ([ElectionStatus.CANCELED, ElectionStatus.PROCESS_UNKNOWN] as string[]).includes(status))
   ) {
     tone = 'danger'
   }
 
-  const label =
-    election instanceof PublishedElection && election.status
-      ? localize(`statuses.${election.status.toLowerCase()}`)
-      : localize('statuses.invalid')
+  const label = status ? localize(`statuses.${status.toLowerCase()}`) : localize('statuses.invalid')
 
   return <Slot {...props} tone={tone} label={label} />
 }

packages/react-components/src/components/Election/Title.tsx

@@ -1,14 +1,14 @@
-import { PublishedElection } from '@vocdoni/sdk'
 import { ComponentPropsWithoutRef } from 'react'
 import { useComponents } from '~components/context/useComponents'
 import { useElection } from '~providers'
+import { getElectionTitle } from '~providers/election/normalized'
 
 export const ElectionTitle = (props: ComponentPropsWithoutRef<'h1'> & Record<string, unknown>) => {
   const { election } = useElection()
   const { ElectionTitle: Slot } = useComponents()
 
   if (!election) return null
 
-  const title = election instanceof PublishedElection ? election.title?.default : election.id
+  const title = getElectionTitle(election)
   return <Slot {...props} title={title} />
 }