From ec46821808227ffde9756def1966e701b0fc5427 Mon Sep 17 00:00:00 2001
From: Harjot Singh <harjot@harkul.com>
Date: Sat, 20 Apr 2024 03:44:11 +0100
Subject: [PATCH] feat: add title to banis

Restructure content templates

Closes #287
---
 .../templates/Content/Bani/index.tsx          | 38 ++++++++++++
 .../Line.spec.tsx                             |  0
 .../{DefaultLines => GroupedLines}/Line.tsx   |  0
 .../index.spec.tsx                            |  6 +-
 .../{DefaultLines => GroupedLines}/index.tsx  |  5 +-
 .../templates/Content/Lines/index.spec.tsx    | 37 ++++++++++++
 .../templates/Content/Lines/index.tsx         | 22 +++++++
 .../templates/Content/ReaderLines/index.tsx   |  6 +-
 .../templates/Content/Shabad/index.tsx        | 22 +++++++
 .../templates/Content/index.int.spec.tsx      | 59 -------------------
 src/components/templates/Content/index.tsx    | 47 +++++----------
 src/services/data/banis.ts                    |  7 +++
 src/services/data/shabads.ts                  |  7 +++
 src/services/kv-storage/index.ts              |  1 +
 src/with-contexts.tsx                         |  5 +-
 test/providers/AtomProvider.tsx               | 29 +++++++++
 16 files changed, 191 insertions(+), 100 deletions(-)
 create mode 100644 src/components/templates/Content/Bani/index.tsx
 rename src/components/templates/Content/{DefaultLines => GroupedLines}/Line.spec.tsx (100%)
 rename src/components/templates/Content/{DefaultLines => GroupedLines}/Line.tsx (100%)
 rename src/components/templates/Content/{DefaultLines => GroupedLines}/index.spec.tsx (74%)
 rename src/components/templates/Content/{DefaultLines => GroupedLines}/index.tsx (85%)
 create mode 100644 src/components/templates/Content/Lines/index.spec.tsx
 create mode 100644 src/components/templates/Content/Lines/index.tsx
 create mode 100644 src/components/templates/Content/Shabad/index.tsx
 delete mode 100644 src/components/templates/Content/index.int.spec.tsx
 create mode 100644 test/providers/AtomProvider.tsx

diff --git a/src/components/templates/Content/Bani/index.tsx b/src/components/templates/Content/Bani/index.tsx
new file mode 100644
index 00000000..d07b5a1a
--- /dev/null
+++ b/src/components/templates/Content/Bani/index.tsx
@@ -0,0 +1,38 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { StyleSheet } from 'react-native'
+
+import Container from '~/components/atoms/Container'
+import GurmukhiLine from '~/components/molecules/GurmukhiLine'
+import { baniQuery } from '~/services/data'
+import { units } from '~/themes'
+
+import Lines from '../Lines'
+
+const styles = StyleSheet.create( {
+  header: {
+    textAlign: 'center',
+    fontSize: units.title1,
+    paddingTop: units.base * 2,
+  },
+} )
+
+type BaniProps = {
+  id: string,
+}
+
+const Bani = ( { id }: BaniProps ) => {
+  const { data } = useSuspenseQuery( baniQuery( id ) )
+
+  const header = <GurmukhiLine style={styles.header}>{data.nameGurmukhi}</GurmukhiLine>
+
+  return (
+    <Container>
+      <Lines
+        Header={() => header}
+        lines={data.lines}
+      />
+    </Container>
+  )
+}
+
+export default Bani
diff --git a/src/components/templates/Content/DefaultLines/Line.spec.tsx b/src/components/templates/Content/GroupedLines/Line.spec.tsx
similarity index 100%
rename from src/components/templates/Content/DefaultLines/Line.spec.tsx
rename to src/components/templates/Content/GroupedLines/Line.spec.tsx
diff --git a/src/components/templates/Content/DefaultLines/Line.tsx b/src/components/templates/Content/GroupedLines/Line.tsx
similarity index 100%
rename from src/components/templates/Content/DefaultLines/Line.tsx
rename to src/components/templates/Content/GroupedLines/Line.tsx
diff --git a/src/components/templates/Content/DefaultLines/index.spec.tsx b/src/components/templates/Content/GroupedLines/index.spec.tsx
similarity index 74%
rename from src/components/templates/Content/DefaultLines/index.spec.tsx
rename to src/components/templates/Content/GroupedLines/index.spec.tsx
index 391c9890..9d2afcad 100644
--- a/src/components/templates/Content/DefaultLines/index.spec.tsx
+++ b/src/components/templates/Content/GroupedLines/index.spec.tsx
@@ -3,13 +3,13 @@ import { toUnicode } from 'gurmukhi-utils'
 
 import * as factories from '~/test/factories'
 
-import DefaultLines from '.'
+import GroupedLines from '.'
 
-describe( '<DefaultLines />', () => {
+describe( '<GroupedLines />', () => {
   const lines = factories.line.buildList( 15 )
 
   it( 'should render lines', () => {
-    render( <DefaultLines lines={lines} /> )
+    render( <GroupedLines lines={lines} /> )
 
     expect( screen.queryByText( toUnicode( lines[ 0 ].gurmukhi ) ) ).toBeTruthy()
   } )
diff --git a/src/components/templates/Content/DefaultLines/index.tsx b/src/components/templates/Content/GroupedLines/index.tsx
similarity index 85%
rename from src/components/templates/Content/DefaultLines/index.tsx
rename to src/components/templates/Content/GroupedLines/index.tsx
index b878230c..0eb34f60 100644
--- a/src/components/templates/Content/DefaultLines/index.tsx
+++ b/src/components/templates/Content/GroupedLines/index.tsx
@@ -1,4 +1,5 @@
 import { FlashList } from '@shopify/flash-list'
+import { ComponentType } from 'react'
 import { StyleSheet, View } from 'react-native'
 
 import { units } from '~/themes'
@@ -30,14 +31,16 @@ const renderLine = ( { item: { gurmukhi, translations } }: RenderItem ) => (
 )
 
 export type NormalLinesProps = {
+  Header?: ComponentType,
   lines: LineData[],
 }
 
-const NormalLines = ( { lines }: NormalLinesProps ) => (
+const NormalLines = ( { lines, Header }: NormalLinesProps ) => (
   <View style={styles.root}>
     <FlashList
       contentContainerStyle={styles.container}
       keyExtractor={( { id } ) => id}
+      ListHeaderComponent={Header}
       data={lines}
       renderItem={renderLine}
       estimatedItemSize={120}
diff --git a/src/components/templates/Content/Lines/index.spec.tsx b/src/components/templates/Content/Lines/index.spec.tsx
new file mode 100644
index 00000000..d84427b2
--- /dev/null
+++ b/src/components/templates/Content/Lines/index.spec.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react-native'
+
+import { settings } from '~/services/settings'
+import * as factories from '~/test/factories'
+import AtomProvider from '~/test/providers/AtomProvider'
+
+import Lines from '.'
+
+describe( '<Lines />', () => {
+  describe( 'given reader mode is off', () => {
+    it( 'should load and render lines in grouped mode', () => {
+      const lines = factories.line.buildList( 15 )
+
+      render(
+        <AtomProvider initialValues={[ [ settings.readerMode, false ] ]}>
+          <Lines lines={lines} />
+        </AtomProvider>
+      )
+
+      expect( screen.queryByText( lines[ 0 ].translations[ 0 ].translation ) ).toBeTruthy()
+    } )
+  } )
+
+  describe( 'given reader mode is on', () => {
+    it( 'should load and render lines in reader mode', () => {
+      const lines = factories.line.buildList( 15 )
+
+      render(
+        <AtomProvider initialValues={[ [ settings.readerMode, true ] ]}>
+          <Lines lines={lines} />
+        </AtomProvider>
+      )
+
+      expect( screen.queryByText( lines[ 0 ].translations[ 0 ].translation ) ).toBeFalsy()
+    } )
+  } )
+} )
diff --git a/src/components/templates/Content/Lines/index.tsx b/src/components/templates/Content/Lines/index.tsx
new file mode 100644
index 00000000..57d0dc36
--- /dev/null
+++ b/src/components/templates/Content/Lines/index.tsx
@@ -0,0 +1,22 @@
+import { ComponentType } from 'react'
+
+import { settings, useSetting } from '~/services/settings'
+import { LineData } from '~/types/data'
+
+import GroupedLines from '../GroupedLines'
+import ReaderLines from '../ReaderLines'
+
+type LinesProps = {
+  lines: LineData[],
+  Header?: ComponentType,
+}
+
+const Lines = ( { lines, Header }: LinesProps ) => {
+  const [ isReaderMode ] = useSetting( settings.readerMode )
+
+  return isReaderMode
+    ? <ReaderLines lines={lines} Header={Header} />
+    : <GroupedLines lines={lines} Header={Header} />
+}
+
+export default Lines
diff --git a/src/components/templates/Content/ReaderLines/index.tsx b/src/components/templates/Content/ReaderLines/index.tsx
index a8db72b6..7bc5fb2d 100644
--- a/src/components/templates/Content/ReaderLines/index.tsx
+++ b/src/components/templates/Content/ReaderLines/index.tsx
@@ -1,5 +1,5 @@
 import { FlashList } from '@shopify/flash-list'
-import { useMemo } from 'react'
+import { ComponentType, useMemo } from 'react'
 import { StyleSheet, View } from 'react-native'
 
 import { getLineSections } from '~/helpers/lines'
@@ -19,14 +19,16 @@ const renderLineSection = ( { item }: RenderItem ) => <Section lines={item} />
 
 export type ReaderLinesProps = {
   lines: LineData[],
+  Header?: ComponentType,
 }
 
-const ReaderLines = ( { lines }: ReaderLinesProps ) => {
+const ReaderLines = ( { lines, Header }: ReaderLinesProps ) => {
   const groupedLines = useMemo( () => getLineSections( lines ), [ lines ] )
 
   return (
     <View style={styles.root}>
       <FlashList
+        ListHeaderComponent={Header}
         data={groupedLines}
         renderItem={renderLineSection}
         estimatedItemSize={200}
diff --git a/src/components/templates/Content/Shabad/index.tsx b/src/components/templates/Content/Shabad/index.tsx
new file mode 100644
index 00000000..049541c8
--- /dev/null
+++ b/src/components/templates/Content/Shabad/index.tsx
@@ -0,0 +1,22 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+import Container from '~/components/atoms/Container'
+import { shabadQuery } from '~/services/data'
+
+import Lines from '../Lines'
+
+type ShabadProps = {
+  id: string,
+}
+
+const Shabad = ( { id }: ShabadProps ) => {
+  const { data } = useSuspenseQuery( shabadQuery( id ) )
+
+  return (
+    <Container>
+      <Lines lines={data.lines} />
+    </Container>
+  )
+}
+
+export default Shabad
diff --git a/src/components/templates/Content/index.int.spec.tsx b/src/components/templates/Content/index.int.spec.tsx
deleted file mode 100644
index 62056cf1..00000000
--- a/src/components/templates/Content/index.int.spec.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native'
-import { toUnicode } from 'gurmukhi-utils'
-import { atom } from 'jotai'
-import { Suspense } from 'react'
-import { Text } from 'react-native'
-
-import * as shabads from '~/services/data/shabads'
-import { settings } from '~/services/settings'
-import * as factories from '~/test/factories'
-import { wrapperOptions } from '~/test/utils/wrapper'
-import { ShabadData } from '~/types/data'
-
-import ContentTemplate from '.'
-
-type SetupOptions = {
-  shabad?: ShabadData,
-  readerMode?: boolean,
-}
-
-const setup = async ( {
-  shabad = factories.shabad.build(),
-  readerMode = false,
-}: SetupOptions = {} ) => {
-  settings.readerMode = atom( readerMode )
-  jest.spyOn( shabads, 'getShabad' ).mockResolvedValue( shabad )
-
-  const container = render(
-    <Suspense fallback={<Text>Loading</Text>}>
-      <ContentTemplate id="1" type="shabad" />
-    </Suspense>,
-    wrapperOptions( { navigationContainer: true } )
-  )
-
-  await waitForElementToBeRemoved( () => screen.queryByText( 'Loading' ) )
-
-  return container
-}
-
-describe( '<ContentTemplate />', () => {
-  describe( 'on mount', () => {
-    it( 'should load and render a target shabad', async () => {
-      const shabad = factories.shabad.build()
-      await setup( { shabad } )
-
-      expect( await screen.findByText( toUnicode( shabad.lines[ 0 ].gurmukhi ) ) ).toBeTruthy()
-      expect( screen.queryByText( shabad.lines[ 0 ].translations[ 0 ].translation ) ).toBeTruthy()
-    } )
-  } )
-
-  describe( 'given reader mode is enabled', () => {
-    it( 'should load and render a target shabad in reader mode', async () => {
-      const shabad = factories.shabad.build()
-      await setup( { shabad, readerMode: true } )
-
-      expect( await screen.findByText( toUnicode( shabad.lines[ 0 ].gurmukhi ) ) ).toBeTruthy()
-      expect( screen.queryByText( shabad.lines[ 0 ].translations[ 0 ].translation ) ).toBeFalsy()
-    } )
-  } )
-} )
diff --git a/src/components/templates/Content/index.tsx b/src/components/templates/Content/index.tsx
index 9b252ef2..6ebe221e 100644
--- a/src/components/templates/Content/index.tsx
+++ b/src/components/templates/Content/index.tsx
@@ -1,46 +1,27 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { ComponentType } from 'react'
 
-import Container from '~/components/atoms/Container'
-import { getBani, getShabad } from '~/services/data'
-import { settings, useSetting } from '~/services/settings'
-import { ContentType, LineData } from '~/types/data'
+import Empty from '~/components/atoms/Empty'
+import { ContentType } from '~/types/data'
 
-import DefaultLines from './DefaultLines'
-import ReaderLines from './ReaderLines'
+import Bani from './Bani'
+import Shabad from './Shabad'
 
-type Loaders = {
-  [screen in ContentType]: ( id: string ) => Promise<{ id: string, lines: LineData[] }>
-}
-
-// ? Loaders return a common interface. Is there a better way to deal with specifics of each type?
-const loaders: Loaders = {
-  shabad: ( id: string ) => getShabad( id ),
-  bani: ( id: string ) => getBani( id ),
-  ang: () => Promise.resolve( { id: '', lines: [] } ),
-}
+// Maybe these should be moved into their own standalone templates entirely
+const templates = {
+  ang: Empty,
+  bani: Bani,
+  shabad: Shabad,
+} satisfies Record<ContentType, ComponentType<{ id: string }>>
 
 type ContentTemplateProps = {
   id: string,
   type: ContentType,
 }
 
-const ContentTemplate = ( {
-  id,
-  type,
-}: ContentTemplateProps ) => {
-  const { data } = useSuspenseQuery( {
-    queryKey: [ 'content', type, id ],
-    queryFn: () => loaders[ type ]( id ),
-  } )
-
-  const [ isReaderMode ] = useSetting( settings.readerMode )
-  const Lines = isReaderMode ? ReaderLines : DefaultLines
+const ContentTemplate = ( { id, type }: ContentTemplateProps ) => {
+  const Template = templates[ type ]
 
-  return (
-    <Container>
-      <Lines key={data.id} lines={data.lines} />
-    </Container>
-  )
+  return <Template id={id} />
 }
 
 export default ContentTemplate
diff --git a/src/services/data/banis.ts b/src/services/data/banis.ts
index 71ff1061..e4490b73 100644
--- a/src/services/data/banis.ts
+++ b/src/services/data/banis.ts
@@ -1,3 +1,5 @@
+import { useQuery } from '@tanstack/react-query'
+
 import { languages } from '~/helpers/languages'
 import * as gurbaniNow from '~/services/gurbaninow'
 import { BaniData } from '~/types/data'
@@ -44,3 +46,8 @@ export const getBani = async ( id: string ): Promise<BaniData> => {
     } ) ),
   }
 }
+
+export const baniQuery = ( id: string ) => ( {
+  queryFn: () => getBani( id ),
+  queryKey: [ 'content', 'bani', id ],
+} )
diff --git a/src/services/data/shabads.ts b/src/services/data/shabads.ts
index bcaf0ec1..cade58e3 100644
--- a/src/services/data/shabads.ts
+++ b/src/services/data/shabads.ts
@@ -1,3 +1,5 @@
+import { useQuery } from '@tanstack/react-query'
+
 import { languages } from '~/helpers/languages'
 import * as gurbaniNow from '~/services/gurbaninow'
 import { ShabadData } from '~/types/data'
@@ -44,3 +46,8 @@ export const getShabad = async ( id: string ): Promise<ShabadData> => {
     } ) ),
   }
 }
+
+export const shabadQuery = ( id: string ) => ( {
+  queryKey: [ 'shabad', id ],
+  queryFn: () => getShabad( id ),
+} )
diff --git a/src/services/kv-storage/index.ts b/src/services/kv-storage/index.ts
index 3e6a89c1..67e478c4 100644
--- a/src/services/kv-storage/index.ts
+++ b/src/services/kv-storage/index.ts
@@ -1 +1,2 @@
 export { default as atomWithKvStorage } from './atom-with-kv-storage'
+export { default as mmkv } from './mmkv'
diff --git a/src/with-contexts.tsx b/src/with-contexts.tsx
index bbc52f83..915d6373 100644
--- a/src/with-contexts.tsx
+++ b/src/with-contexts.tsx
@@ -1,7 +1,7 @@
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
 import { ThemeProvider } from '@react-navigation/native'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { Provider } from 'jotai'
+import { createStore, Provider } from 'jotai'
 import { PostHogProvider, PostHogProviderProps } from 'posthog-react-native'
 import { ElementType } from 'react'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
@@ -12,6 +12,7 @@ import configuration from '~/services/configuration'
 import { reactNavigationTheme } from './themes'
 
 export const queryClient = new QueryClient()
+export const atomStore = createStore()
 
 const getPostHogProviderProps = () => ( configuration.postHog.enabled
   ? { apiKey: configuration.postHog.apiKey }
@@ -22,7 +23,7 @@ const getPostHogProviderProps = () => ( configuration.postHog.enabled
 
 const withContexts = ( Component: ElementType ) => {
   const WithContexts = () => (
-    <Provider>
+    <Provider store={atomStore}>
       <SafeAreaProvider>
         <ThemeProvider value={reactNavigationTheme}>
           <GestureHandlerRootView style={{ flex: 1 }}>
diff --git a/test/providers/AtomProvider.tsx b/test/providers/AtomProvider.tsx
new file mode 100644
index 00000000..60ae8969
--- /dev/null
+++ b/test/providers/AtomProvider.tsx
@@ -0,0 +1,29 @@
+import { Provider, WritableAtom } from 'jotai'
+import { INTERNAL_InferAtomTuples } from 'jotai/react/utils/useHydrateAtoms'
+import { useHydrateAtoms } from 'jotai/utils'
+import { ReactNode } from 'react'
+
+type HydrateAtomsProps<T> = {
+  initialValues: INTERNAL_InferAtomTuples<T>,
+  children?: ReactNode,
+}
+
+const HydrateAtoms = <T extends ( readonly [
+  WritableAtom<unknown, never[], unknown>,
+  unknown,
+] )[],>( { initialValues, children }: HydrateAtomsProps<T> ) => {
+  useHydrateAtoms( initialValues )
+
+  return children
+}
+
+const AtomProvider = <T extends ( readonly [
+  WritableAtom<unknown, never[], unknown>,
+  unknown,
+] )[],>( { initialValues, children }: HydrateAtomsProps<T> ) => (
+  <Provider>
+    <HydrateAtoms initialValues={initialValues}>{children}</HydrateAtoms>
+  </Provider>
+)
+
+export default AtomProvider