Skip to content

Commit

Permalink
Karina/review-edit -summary-pages (#82)
Browse files Browse the repository at this point in the history
* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* .eslintrc.json: extend nava eslint config

* package.json: add eslint-config-nava

* add ts check to all js files

* add dev note regarding incremental type checking

* add TS-specific eslint

* update read me with development typecheck and linting tips

* update read me with development typecheck and linting tips

* add and setup prettier

* WMDP-26 Set Up PR Template (#2)

Changes
added a .github folder which should store all github related processes (e.g. github actions, and templates)
added PR template
Context for reviewers
We want to establish a consistent pull request template that we’ll use.

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add eslintrc.js

* add stories dir and examples

* .eslint.js: prettier updates to eslint file

* add storybook dependencies

* Fix pull request template conflict (#8)

- Fixed the filename case conflict between `.github/PULL_REQUEST_TEMPLATE.md` and `.github/pull_request_template.md`
- Updated the pull request template to be slightly more generic

* Karina/wmdp 61 initial nextjs setup (#4)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* setup jest-axe

* add new lines add end of files

* Karina/wmdp 35 setup test suite (#5)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* setup jest-axe

* add new lines add end of files

* jest.config.js: add inline comments

* README: add tsconfig documentation

* README: add test script documentation

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Karina/wmdp 33 linter typechecker (#6)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* .eslintrc.json: extend nava eslint config

* package.json: add eslint-config-nava

* add ts check to all js files

* add dev note regarding incremental type checking

* add TS-specific eslint

* update read me with development typecheck and linting tips

* update read me with development typecheck and linting tips

* add and setup prettier

* Update app/.babelrc

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update package.json

add scripts to package.json

* run prettier

* add checkJs to tsconfig, remove duplicate code from js files

* add typescript parser and implement type information with linting

* eslintrc: add prettier recommended plugin

* preettierrc: add trailing comma check, remove redundant code

* README: add auto-generated modified note

* Update app/README.md

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* add testRegex and testPathIgnorePatterns

* re-add localesubpaths to next.config.js

* tsconfig.json: remove inline comment

* README: add docimentation for eslint and tsconfig

* setup jest-axe

* add new lines add end of files

* jest.config.js: add inline comments

* README - add documentation for test

* README: add tsconfig documentation

* README: add test script documentation

* README: add documentation for dependencies

* yarn.lock

* Update app/__mocks__/styleMock.js

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* fix eslint errors

* WIP

* Create a separate tsconfig file to specify jsx mode for ts-jest vs next.js (#9)

Create a separate tsconfig file to specify jsx mode.

Next.js requires the typescript jsx mode to be `preserve`, but ts-jest
needs it to be a flavor of `react`. See:

- https://www.typescriptlang.org/docs/handbook/jsx.html
- https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig
- kulshekhar/ts-jest#63 (comment)
- vercel/next.js#19155 (reply in thread)

* add home page story and uswds dependency

* update dependencies

* add uswds

* support sass in storybook

* fix eslint errors (#10)

* fix eslint errors

* update prettier and linting rules so that they're compatible

* add new eslint rule to README

* WIP - debugging uswds storybook with Rocket

* add storybook static to git ignore

* Remove storybook-static.

* Dockerize the application.

* Create LICENSE.md using Apache 2.0 (#13)

* Dockerize the application (#12)

* WIP.

* Both next.js and storybook working.

* USWDS 3.x instructions require uswds-compile. Can't use next.js or storybook sass without more unknown glue.

* Clean up unnecessary WIP stuff.

* Refactor to use same naming convention for all uswds assets. Add comments.

* Update dockerization to better support local development.

* Remove extraneous yarn command.

* Run formatter.

* Write some brief documentation.

* Fix typo.

* setup CI for NextJS template app (#16)

* Let prettier format project files.

* Run prettier via yarn format.

* Let prettier format project files (#17)

* yarn: add next.intl

* add messages directory with english and spanish json messages pages

* .storybook/preview: set up next-intl with storybook

* next.config: update next local config for itnernationalization

* app.tsx: add next-intl local/messages provider for internationalization

* tests: add nextintlprovider to jest tests, update snapshots

* update gulp

* create src directories -- move src folders

* add tests and stories for Layout and Index

* add scss loading for storybook

* run linter and prettier

* run prettier

* run prettier and lint

* update yarn.lock

* add prettier alphabetize imports -- add storybook-static to prettier ignore

* show compile warnigns

* remove space

* add container background

* WIP: successfully leveraging built-in nextjs sass compiling.

* Working storybook + nextjs + sass + uswds build.

- Drops support for [CSS
  modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css)
- Drops requirement for Gulp and USWDS compile
- Requires postcss and postcss-loader, which storybook says should be
  deprecated

* wip

* delete deprecated flies, add yarn.lock

* add welcome and eligibility page

* update ci.yml (#19)

* Run prettier.

* Update packages.

* Simplify docker. Update README. Use postinstalll script.

* Fix postinstall command.

* Tell prettier to ignore USWDS static assets.

* Disable nextjs telemetry.

* refactor

* jest

* test wip

* Add -p flag to creating public dir so mkdir doesn't error.

* Change comment style so we don't get unnecessary indents.

* Refactor which files storybook recognizes as stories.

* Use storybook lazy compilation.

* Remove no longer needed gulpfile.

* Unpin package versions; use at least instead.

* Remove no longer needed css import.

* add stories

* run prettier, no trailing comma

* correct linting errors

* Remove storybook lazy compilation. Not working.

* Remove non-essential storybook dependencies.

* Don't bind mount node_modules.

* delete depracated code

* host fonts locally for easier sb and jest setup and wider browser support

* support tsconfig module imports in jest and sb

* Switch base image to alpine.

* Run yarn format.

* Update README about node_modules in docker.

* setup next-i18next in project, jest, and sb -- todo: get sb globe to render

* Run formatter.

* Streamline docker build even more.

* Remove no longer installed storybook addons.

* Remove storybook-addon-i18next.

* Run formatter.

* Try storybook-i18n addon. Not quite right.

* Match eslint rule for space before parens to rule as described in README.

* Match prettier and eslint for trailing commas.

* Use the storybook-react-i18next addon for internationalization in storybook.

* Remove wip test of fs package.

* Restore homepage to previous state.

* Document i18n config.

* add storybook-static to git ignore

* add import order to prettier

* add src/ - move pages to src

* app- update import

* public: update translations

* _app.tsx: add Layout to app

* add components dir and Layout component

* index: update deprecated index layout

* update template styles

* update index story

* apply title class to template title

* update tests and stories

* run prettier - add prettier-plugin-sort-imports

* run eslint - add JSX global to linter

* fix translation

* yarn format and delete dead code

* run lint

* Copy over application-template-nextjs at ca2cc15.

Install and configure storybook, sass, and USWDS 3.0 [#15](navapbc/template-application-nextjs#15)

- Install and configure storybook
- Create the first story
- Install and configure [USWDS 3.0](https://designsystem.digital.gov/) as the design system
- Modify `Dockerfile` and `docker-compose.yml` to support USWDS and storybook
- Gitignore storybook, uswds assets, and compiled css
- Prettier ignore uswds assets
- Use postinstall hook to copy uswds static assets
- Stop using CSS modules
- Update some package dependencies
- Switch Docker base image to use alpine for increased speed

* Copy over application-template-nextjs at cd06ba6.

Setup i18n for next.js, jest, and storybook [#24](navapbc/template-application-nextjs#24)

- Install and configure [next-i18next](https://github.com/i18next/next-i18next) for Next.js internationalization
- Move next.js i18n config out of `next.config.js` and into `next-i18next.config.js`
- Modify `pages/_app.tsx` and `pages/index.tsx` to support i18n
- Move jest i18n config into `/tests/jest-i18n.ts`
- Install and configure [storybook-react-i18next](https://storybook.js.org/addons/storybook-react-i18next) for storybook internationalization
- Add support for `<em>` tags in react-i18next in both next.js and storybook.

Extras:
- Remove `space-before-function-paren` eslint rule
- Update eslint to follow prettier's rules
- Rename `test` dir to `tests` (plural)

* Copy over application-template-nextjs at cfe7c3d.

Adds a src dir, layout component, alphabetizes imports [#26](navapbc/template-application-nextjs#26)

- adds `src/` directory for project's webpack compilable JS and JSON files (this update is supported out of the box by [NextJS](https://nextjs.org/docs/advanced-features/src-directory) and pfml also uses this folder structure)
   - moves `api/`, `pages/` and `messages/` directories to `src/`
   - creates `components` directory and adds template `Layout` component

Extras:
- sets up prettier alphabetize imports
- adds storybook-static to prettier ignore
- sets $theme-show-compile-warnings to true for uswds

* Copy over application-template-nextjs at 0a349fa.

Enable dependabot version updates and codeql security scanning as CI jobs [#29](navapbc/template-application-nextjs#29)

- Enable and configure [dependabot version updates](https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuring-dependabot-version-updates)
- Enable and configure [codeql security scanning](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning)

Note: These features were already enabled in this repo, so this commit
is just bringing in stylistic updates to make the two repos identical.

* en/common.json: add contact questions

* add contact page

* remove dead code

* contact: add contact page basic styling and copy

* create TextInput component -- add tests and storybook for contact page and textinput component

* Copy over application-template-nextjs at f59d2ac.

 Add layout styles missing from PR #26.
[#37](navapbc/template-application-nextjs#37)

* fix tests

* update tests

* wip

* fix tests

* run lint and format

* address rocket's comments

* update yarn.lock

* update eslint.json

* update eslintrc

* update textinput types for build

* run prettier

* add number-format

* fix bug

* en: update copy for header and index page

* Layout: update header to match new design

* remove depracated font imports

* pages: add clinic page, update contact page to route to clinic page

* add clinic.json to public directory

* add search.svg: magnifying glass for uswds search button

* tsconfig: add public module import

* update keys

* wip

* public: add clinic page copy

* ButtonLink: add disabled prop

* pages: handle clinic selection and disable button if clinic isn't selected

* unselect if research is reset

* add income page

* add jest tests

* add stories

* update income table styling

* Update app/jest.config.js

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/package.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/public/locales/en/common.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/public/locales/en/common.json

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* Update app/src/components/Dropdown.tsx

Co-authored-by: Rocket <rocketnova@users.noreply.github.com>

* update tests

* add accordion storybook test

* add jest tests for conditional alternate page routing from eligibility page

* add alternate jest test

* update styles

* add review page

* run prettier and lint

* update tests

* Update app/src/pages/clinic.tsx

Co-authored-by: Tomas Apodaca <thomas.apodaca@gsa.gov>

* Update app/src/pages/clinic.tsx

Co-authored-by: Tomas Apodaca <thomas.apodaca@gsa.gov>

* add numberOfClinicsToReturn

* add numberOfClinicsToReturn

* add Table component and summary page

* wip

* wip

* wip

* wip

* wip

* add localStorage hook to persist data across refresh - add conditional continue button to contact page

* eligibility: add conditional review routing

* wip

* clinic: address type bug

* add Alert story

* add summary and review story

* dangerouslyset inner html of alert

* update tests

* prepoluate selected clinic from review page

* add Table story

* eligibility: add NOTE to useEffect

* eligibility: remove numbering

* package.json undo json format check change

* address merge conflicts with main

* remove dead code

* update snapshot

Co-authored-by: Alsia Plybeah <alsia@navapbc.com>
Co-authored-by: Rocket <rocketnova@users.noreply.github.com>
Co-authored-by: Shawn VanderJagt <91338100+shawnvanderjagt@users.noreply.github.com>
Co-authored-by: Tomas Apodaca <thomas.apodaca@gsa.gov>
  • Loading branch information
5 people committed Sep 16, 2022
1 parent e513407 commit f31be1e
Show file tree
Hide file tree
Showing 30 changed files with 660 additions and 82 deletions.
1 change: 1 addition & 0 deletions app/.eslintrc.json
Expand Up @@ -17,6 +17,7 @@
"plugins": ["@typescript-eslint", "jest"],
"root": true,
"rules": {
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/no-unused-vars": "error",
"comma-dangle": ["error", "only-multiline"],
Expand Down
1 change: 1 addition & 0 deletions app/jest.config.js
Expand Up @@ -7,6 +7,7 @@ module.exports = {
'\\.(css|scss)$': '<rootDir>/tests/__mocks__/styleMock.js', // sets up routing to mocks style sheet
'^@clinics/*': '<rootDir>/public/clinic-output/clinics-zip-code-lookup$1',
'^@components(.*)$': '<rootDir>/src/components$1',
'^@context(.*)$': '<rootDir>/src/context$1',
'^@pages(.*)$': '<rootDir>/src/pages$1', //allows module imports of page components
'^@public(.*)$': '<rootDir>/public$1',
'^@styles(.*)$': '<rootDir>/styles$1',
Expand Down
22 changes: 17 additions & 5 deletions app/public/locales/en/common.json
Expand Up @@ -18,14 +18,14 @@
"Contact": {
"button": "Submit",
"firstName": "First name",
"header": "Contact information",
"lastName": "Last name",
"name": "What's your name?",
"other": "Is there anything else you'd like to share with us?",
"otherLabel": "Comments, questions, other information",
"phone": "What's the best phone number to reach you at?",
"phoneAlert": "Your chosen WIC clinic will contact you via phone to set up a time for a certification appointment during business hours.",
"phoneLabel": "Phone number"
"phoneLabel": "Phone number",
"title": "Contact information"
},
"Eligibility": {
"accordionBody": "There are multiple categories of eligibility, and your answers here help us understand what benefits you and/or your family may qualify for.",
Expand Down Expand Up @@ -56,8 +56,8 @@
"helper": "If someone in your household is pregnant and applying for WIC benefits and is determined to be ineligible based on your household income, you may then increase your household size by the number of expected births.",
"householdSize": "What is your household size?",
"notEnrolled": "If you are not currently enrolled in one or more of those programs, you will have to show proof your income is within a certain level.",
"title": "To be eligible for WIC, your <strong>household income before taxes</strong> must be <strong>at</strong> or <strong>below</strong> a certain income level.",
"unsure": "<strong>If you are unsure about your income, please continue to apply.</strong> A WIC staff member can answer more specific questions about your situation."
"title": "To be eligible for WIC, your <b>household income before taxes</b> must be <b>at</b> or <b>below</b> a certain income level.",
"unsure": "<b>If you are unsure about your income, please continue to apply.</b> A WIC staff member can answer more specific questions about your situation."
},
"Index": {
"benefits": "There are many benefits including healthy food, breastfeeding support, nutrition education, and connections to local resources.",
Expand Down Expand Up @@ -86,6 +86,18 @@
"header": "Apply for WIC in Montana",
"menu": "Menu"
},
"Review": {
"button": "Submit",
"clinicSelected": "You selected this WIC Clinic to visit",
"eligibilityTitle": "Eligibility questions",
"subHeader": "Review the information on this page before submitting. If you want to make changes, select \"Edit\" to go to the section you want to change.",
"title": "Review and submit your information"
},
"Summary": {
"body": "Thank you for submitting your information. If you're eligible, you should hear from WIC staff at your chosen clinic within 20 days.",
"title": "Your confirmation"
},
"asterisk": "All required questions are marked with an asterisk",
"continue": "Continue"
"continue": "Continue",
"updateAndReturn": "Update and return to review"
}
113 changes: 113 additions & 0 deletions app/src/components/OverviewTables.tsx
@@ -0,0 +1,113 @@
import { useAppContext } from '@context/state'
import { useTranslation } from 'next-i18next'
import { ReactElement } from 'react'

import Table from '@components/Table'

type Category = 'pregnant' | 'baby' | 'child' | 'guardian' | 'loss'

type Program = 'insurance' | 'snap' | 'tanf'

interface Props {
editable?: boolean
}

const OverviewTables = (props: Props): ReactElement => {
const { t } = useTranslation('common')
const { session } = useAppContext()
const { editable } = props
const categoryKeys: Category[] = [
'pregnant',
'baby',
'child',
'guardian',
'loss',
]
const programKeys: Program[] = ['insurance', 'snap', 'tanf']

const formatClinic = (): string => {
const clinic = session?.clinic

return `
${clinic?.clinic || ''}
<br />
${clinic?.clinicAddress || ''}
<br />
${clinic?.clinicTelephone || ''}
`
}

const formatEligibilitySelections = (
keys: (Category | Program)[]
): string => {
let returnVal = ''

keys.forEach((key: Category | Program) => {
if (session.eligibility[key]) {
returnVal = returnVal.concat(t(`Eligibility.${key}`), '<br /> ')
}
})

return returnVal
}

return (
<>
<Table
editable={editable}
editLink="eligibility"
title={t('Review.eligibilityTitle')}
rows={[
{
header: t('Eligibility.residential'),
body: session?.eligibility.residential || '',
},
{
header: t('Eligibility.categorical'),
body: formatEligibilitySelections(categoryKeys),
},
{
header: t('Eligibility.programs'),
body: formatEligibilitySelections(programKeys),
},
]}
/>
<Table
editable={editable}
editLink="/clinic"
title={t('Clinic.title')}
rows={[
{
header: t('Review.clinicSelected'),
body: (session?.clinic && formatClinic()) || '',
},
]}
/>
<Table
editable={editable}
editLink="/contact"
title={t('Contact.title')}
rows={[
{
header: t('Contact.firstName'),
body: session?.contact.firstName || '',
},
{
header: t('Contact.lastName'),
body: session?.contact.lastName || '',
},
{
header: t('Contact.phoneLabel'),
body: session?.contact.phone || '',
},
{
header: t('Contact.otherLabel'),
body: session?.contact.other || '',
},
]}
/>
</>
)
}

export default OverviewTables
45 changes: 45 additions & 0 deletions app/src/components/Table.tsx
@@ -0,0 +1,45 @@
import Link from 'next/link'
import { ReactElement } from 'react'

interface Props {
editable?: boolean
editLink?: string
rows: {
header: string
body: string
}[]
title: string
}

const Table = (props: Props): ReactElement => {
const { editable, editLink, rows, title } = props

return (
<div className="width-mobile">
<table className="usa-table usa-table--stacked usa-table--borderless">
<h2>{title}</h2>
{editable && editLink && (
<Link href={editLink}>
<button className="usa-button usa-button--secondary usa-button--unstyled">
Edit
</button>
</Link>
)}
<thead></thead>
<tbody>
<tr>
{rows.map((row, i) => (
<td
data-label={row.header}
key={i}
dangerouslySetInnerHTML={{ __html: row.body }}
/>
))}
</tr>
</tbody>
</table>
</div>
)
}

export default Table
63 changes: 63 additions & 0 deletions app/src/context/state.tsx
@@ -0,0 +1,63 @@
import clinics from '@public/clinic-output/clinics-with-ids.json'
import { Dispatch, SetStateAction, createContext, useContext } from 'react'

export type DefaultState = {
clinic: typeof clinics[0] | undefined
contact: {
firstName: string
lastName: string
phone: string
other: string
}
eligibility: {
residential: string
pregnant: boolean
baby: boolean
child: boolean
guardian: boolean
none: boolean
loss: boolean
insurance: boolean
snap: boolean
tanf: boolean
fdpir: boolean
none2: boolean
}
}
interface AppContextType {
session: DefaultState
setSession: Dispatch<SetStateAction<DefaultState>> | (() => unknown)
}

export const AppContext = createContext<AppContextType>({
session: {
clinic: undefined,
contact: {
firstName: '',
lastName: '',
phone: '',
other: '',
},
eligibility: {
residential: '',
pregnant: false,
baby: false,
child: false,
guardian: false,
none: false,
loss: false,
insurance: false,
snap: false,
tanf: false,
fdpir: false,
none2: false,
},
},
setSession: () => {
console.log('default context')
},
})

export function useAppContext() {
return useContext(AppContext)
}
49 changes: 49 additions & 0 deletions app/src/hooks/useLocalStorage.tsx
@@ -0,0 +1,49 @@
import { DefaultState } from '@context/state'
import { useState } from 'react'

// Custom hook to persist state across page refresh
export default function useLocalStorage(
key: string,
initialValue: DefaultState
) {
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState<DefaultState>(() => {
if (typeof window === 'undefined') {
return initialValue
}
try {
// Get from local storage by key
const item: string | null = window.localStorage.getItem(key)

// TODO: refactor type casting
const state: DefaultState = item
? (JSON.parse(item) as DefaultState)
: initialValue

return state
} catch (error) {
// TODO: error handling
console.log(error)
return initialValue
}
})
// Return a wrapped version of useState's setter function that persists the new value to localStorage.
const setValue = (value: DefaultState) => {
try {
// Allow value to be a function so we have same API as useState

// TODO: refactor type casting
const valueToStore: DefaultState =
value instanceof Function ? (value(storedValue) as DefaultState) : value
// Save state
setStoredValue(valueToStore)
// Save to local storage
if (typeof window !== 'undefined') {
window.localStorage.setItem(key, JSON.stringify(valueToStore))
}
} catch (error) {
console.log(error)
}
}
return [storedValue, setValue]
}
35 changes: 32 additions & 3 deletions app/src/pages/_app.tsx
@@ -1,15 +1,44 @@
import { AppContext } from '@context/state'
import { appWithTranslation } from 'next-i18next'
import type { AppProps } from 'next/app'
import useLocalStorage from 'src/hooks/useLocalStorage'

import Layout from '@components/Layout'

import '@styles/styles.scss'

function MyApp({ Component, pageProps }: AppProps) {
const [session, setSession] = useLocalStorage('session', {
clinic: undefined,
contact: {
firstName: '',
lastName: '',
phone: '',
other: '',
},
eligibility: {
residential: '',
pregnant: false,
baby: false,
child: false,
guardian: false,
none: false,
loss: false,
insurance: false,
snap: false,
tanf: false,
fdpir: false,
none2: false,
},
})

return (
<Layout>
<Component {...pageProps} />
</Layout>
// @ts-ignore
<AppContext.Provider value={{ session, setSession }}>
<Layout>
<Component {...pageProps} />
</Layout>
</AppContext.Provider>
)
}

Expand Down

0 comments on commit f31be1e

Please sign in to comment.