feat: refactor home page into a modal on the navbar (#403)

* feat: add row component

* feat: add collections to nav

* feat: set home page directly to active line

frontend/src/App.tsx

@@ -6,10 +6,9 @@ import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-d
 import LineRedirect from './components/LineRedirect'
 import { SOURCES_API, TRANSLATION_SOURCES_API } from './lib/consts'
 import { TranslationSourcesContext } from './lib/contexts'
-import { getPositions } from './lib/utils'
+import { getLastOpened, getPosition } from './lib/utils'
 import NotFound from './screens/404'
 import About from './screens/About'
-import Home from './screens/Home'
 import LineView from './screens/LineView'
 import SourceView from './screens/SourceView'
 import { SourcesResponse, TranslationSourcesResponse } from './types/api'
@@ -18,7 +17,7 @@ import withContexts from './with-contexts'
 const App = () => {
   const [ sources, setSources ] = useState<SourcesResponse>( [] )
   const [ translationSources, setTranslationSources ] = useState<TranslationSourcesResponse>( [] )
-  const [ err, setErr ] = useState<Error>()
+  const [ , setErr ] = useState<Error>()
 
   useEffect( () => {
     const API_DATA = [
@@ -32,7 +31,10 @@ const App = () => {
       .catch( setErr ) )
   }, [] )
 
-  const positions = getPositions()
+  const gapTime = Date.now() - getLastOpened()
+  // const tooLong = 1.21 * ( 10 ** 9 )
+  const tooLong = 20000
+  const position = ( gapTime < ( tooLong ) ) ? getPosition() : '/sources/1/page/1/line/0'
 
   return withContexts(
     <TranslationSourcesContext.Provider value={translationSources}>
@@ -41,7 +43,7 @@ const App = () => {
           <Routes>
             <Route path="*" element={<NotFound />} />
 
-            <Route path="/" element={<Home err={err} sources={sources} positions={positions} />} />
+            <Route path="/" element={<Navigate to={position} />} />
 
             <Route path="/about" element={<About />} />
 

frontend/src/components/Nav.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 
 import theme from '../helpers/theme'
 import About from '../screens/About'
+import Collections from '../screens/Collections'
 import Interface from '../screens/Interface'
 import Content from './Content'
 import Logo from './Logo'
@@ -48,6 +49,7 @@ const useStyles = createUseStyles( {
 
 const Nav = () => {
   const classes = useStyles()
+  const [ visibleCollections, setVisibleCollections ] = useState( false )
   const [ visibleAbout, setVisibleAbout ] = useState( false )
   const [ visibleInterface, setVisibleInterface ] = useState( false )
 
@@ -59,6 +61,12 @@ const Nav = () => {
             <Logo />
           </Link>
           <div>
+            <span
+              className={classes.button}
+              onClick={() => setVisibleCollections( true )}
+            >
+              Collections
+            </span>
             <span
               className={classes.button}
               onClick={() => setVisibleAbout( true )}
@@ -74,6 +82,9 @@ const Nav = () => {
           </div>
         </div>
       </Content>
+      <Modal visible={visibleCollections} setVisible={setVisibleCollections}>
+        <Collections setVisible={setVisibleCollections} />
+      </Modal>
       <Modal visible={visibleAbout} setVisible={setVisibleAbout}>
         <About />
       </Modal>

frontend/src/components/Row.tsx

@@ -0,0 +1,71 @@
+import { ChevronRight } from 'lucide-react'
+import { ReactNode } from 'react'
+import { createUseStyles } from 'react-jss'
+import { Link } from 'react-router-dom'
+
+import theme from '../helpers/theme'
+
+const useStyles = createUseStyles( {
+  row: {
+    textDecoration: 'none',
+    color: theme.Fg,
+    boxSizing: 'border-box',
+    width: '100%',
+    minHeight: '3rem',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    '&:hover': {
+      color: theme.Blue,
+    },
+    '& + $row': {
+      borderTop: [ '1px', 'solid', theme.Separator ],
+    },
+    '& > div': {
+      display: 'flex',
+      alignItems: 'center',
+
+    },
+  },
+  disabled: {
+    cursor: 'default',
+    color: 'rgba(120, 120, 120, 0.4)',
+    '&:hover': {
+      color: 'rgba(120, 120, 120, 0.4)',
+    },
+  },
+  '@media (prefers-color-scheme: dark)': {
+    row: {
+      color: theme.FgDarkScheme,
+      '&:hover': {
+        color: theme.BlueDarkScheme,
+      },
+      '& + $row': {
+        borderTopColor: theme.SeparatorDarkScheme,
+      },
+    },
+  },
+} )
+
+type RowProps = {
+  to?: string,
+  children: ReactNode,
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>,
+  disabled?: boolean,
+}
+
+const Row = ( { to, disabled, onClick, children }: RowProps ) => {
+  const classes = useStyles()
+  return (
+    <Link
+      to={( to && !disabled ) ? to : '#'}
+      className={`${classes.row} ${disabled ? classes.disabled : ''}`}
+      onClick={( onClick && !disabled ) ? onClick : ( () => null )}
+    >
+      <div>{children}</div>
+      {to && <div><ChevronRight /></div>}
+    </Link>
+  )
+}
+
+export default Row

frontend/src/helpers/theme.ts

@@ -24,6 +24,9 @@ const theme = {
   Gap: '0.5rem',
   BlankSpace: '0.2rem',
 
+  Separator: 'rgba(87.02% 86.48% 85.43% / 40%)', // lch(88% 1.5 85)
+  SeparatorDarkScheme: 'rgba(28.38% 27.48% 27.77% / 40%)', // lch(30% 1.125 355)
+
   NavBg: 'rgb(88.77% 85.81% 86.79%)', // lch(88% 3 355)
   NavBgDarkScheme: 'rgb(15.99% 8.5% 11.42%)', // lch(10% 11 355)
 

frontend/src/lib/utils.ts

@@ -34,16 +34,11 @@ Database was \`${gurmukhi}\` on ${new Date().toISOString()}. See line in [Shabad
 
 export const getDictionaryLink = ( word: string ) => `http://www.srigranth.org/servlet/gurbani.dictionary?Param=${word}`
 
-export type Positions = {
-  [source: string]: {
-    page: number,
-    line: string,
-  },
-}
+export const getPosition = () => localStorage.getItem( 'position' ) ?? '/sources/1/page/1/line/0'
 
-export const getPositions = () => ( JSON.parse( localStorage.getItem( 'positions' ) ?? 'null' ) ?? {} ) as Positions
+export const getLastOpened = () => localStorage.getItem( 'lastOpened' ) ?? Date.now()
 
-export const savePosition = ( source: number, page: number, line: number ) => localStorage.setItem(
-  'positions',
-  JSON.stringify( { ...getPositions(), [ source ]: { page, line } } ),
-)
+export const savePosition = ( source: number, page: number, line: number ) => {
+  localStorage.setItem( 'position', `/sources/${source}/page/${page}/line/${line}` )
+  localStorage.setItem( 'lastOpened', Date.now() )
+}

frontend/src/screens/Collections.tsx

@@ -0,0 +1,47 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+
+import AsciiGurmukhi from '../components/AsciiGurmukhi'
+import Content from '../components/Content'
+import Row from '../components/Row'
+import Section from '../components/Section'
+import { SOURCES_API } from '../lib/consts'
+import { SourcesResponse } from '../types/api'
+
+type CollectionsProps = {
+  setVisibleCollections: Dispatch<SetStateAction<boolean>>,
+}
+
+const Collections = ( { setVisibleCollections }: CollectionsProps ) => {
+  const [ sources, setSources ] = useState<SourcesResponse>( [] )
+
+  useEffect( () => {
+    fetch( SOURCES_API )
+      .then( ( res ) => res.json() )
+      .then( setSources )
+      .catch( ( err: Error ) => console.error( 'Error fetching Sources', err ) )
+  }, [] )
+
+  const orderId = { 1: 0, 2: 1, 11: 3, 3: 4, 4: 5, 7: 6, 6: 7, 5: 8, 8: 9, 9: 10, 10: 11 }
+
+  return (
+    <Content>
+      <Section>
+        <h1>Collections</h1>
+
+        {sources
+          .sort( ( a, b ) => orderId[ a.id ] - orderId[ b.id ] )
+          .map( ( { id, nameGurmukhi } ) => (
+            <Row
+              key={id}
+              to={`/sources/${id}/page/1/line/1`}
+              onClick={() => setVisibleCollections( false )}
+            >
+              <AsciiGurmukhi>{nameGurmukhi}</AsciiGurmukhi>
+            </Row>
+          ) )}
+      </Section>
+    </Content>
+  )
+}
+
+export default Collections