diff --git a/.eslintcache b/.eslintcache index aab2df7..58cf0ab 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/Users/drew/Documents/carerev-sample/src/locales/i18n.ts":"1","/Users/drew/Documents/carerev-sample/src/styles/theme/ThemeProvider.tsx":"2","/Users/drew/Documents/carerev-sample/src/app/containers/HomePage/index.tsx":"3","/Users/drew/Documents/carerev-sample/src/app/components/Link/index.ts":"4","/Users/drew/Documents/carerev-sample/src/app/containers/LanguageSwitch/messages.ts":"5","/Users/drew/Documents/carerev-sample/src/utils/request.ts":"6","/Users/drew/Documents/carerev-sample/src/app/index.tsx":"7","/Users/drew/Documents/carerev-sample/src/styles/theme/themes.ts":"8","/Users/drew/Documents/carerev-sample/src/app/containers/NotFoundPage/index.tsx":"9","/Users/drew/Documents/carerev-sample/src/index.tsx":"10","/Users/drew/Documents/carerev-sample/src/styles/theme/utils.ts":"11","/Users/drew/Documents/carerev-sample/src/styles/theme/slice.ts":"12","/Users/drew/Documents/carerev-sample/src/styles/global-styles.ts":"13","/Users/drew/Documents/carerev-sample/src/app/components/LoadingIndicator/index.tsx":"14","/Users/drew/Documents/carerev-sample/src/app/containers/NotFoundPage/P.ts":"15","/Users/drew/Documents/carerev-sample/src/store/reducers.ts":"16","/Users/drew/Documents/carerev-sample/src/app/containers/Countries/index.tsx":"17","/Users/drew/Documents/carerev-sample/src/app/components/PageWrapper/index.ts":"18","/Users/drew/Documents/carerev-sample/src/app/containers/Countries/saga.ts":"19","/Users/drew/Documents/carerev-sample/src/app/containers/Countries/reducer.tsx":"20","/Users/drew/Documents/carerev-sample/src/app/containers/Countries/selectors.ts":"21"},{"size":1124,"mtime":1609202726944,"results":"22","hashOfConfig":"23"},{"size":580,"mtime":1609202726954,"results":"24","hashOfConfig":"23"},{"size":550,"mtime":1609208694958,"results":"25","hashOfConfig":"23"},{"size":307,"mtime":1609202726893,"results":"26","hashOfConfig":"23"},{"size":232,"mtime":1609202726929,"results":"27","hashOfConfig":"23"},{"size":1434,"mtime":1609202726967,"results":"28","hashOfConfig":"23"},{"size":1192,"mtime":1609208885298,"results":"29","hashOfConfig":"23"},{"size":385,"mtime":1609208799962,"results":"30","hashOfConfig":"23"},{"size":1101,"mtime":1609208828206,"results":"31","hashOfConfig":"23"},{"size":1799,"mtime":1609202726941,"results":"32","hashOfConfig":"23"},{"size":528,"mtime":1609202726958,"results":"33","hashOfConfig":"23"},{"size":1082,"mtime":1609202726956,"results":"34","hashOfConfig":"23"},{"size":720,"mtime":1609202726952,"results":"35","hashOfConfig":"23"},{"size":1063,"mtime":1609202726895,"results":"36","hashOfConfig":"23"},{"size":187,"mtime":1609202726937,"results":"37","hashOfConfig":"23"},{"size":632,"mtime":1609202726950,"results":"38","hashOfConfig":"23"},{"size":1558,"mtime":1609209139127,"results":"39","hashOfConfig":"23"},{"size":171,"mtime":1609202726896,"results":"40","hashOfConfig":"23"},{"size":714,"mtime":1609208959579,"results":"41","hashOfConfig":"23"},{"size":630,"mtime":1609209157562,"results":"42","hashOfConfig":"23"},{"size":590,"mtime":1609207168770,"results":"43","hashOfConfig":"23"},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"kwpepp",{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"64"},{"filePath":"65","messages":"66","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"67","messages":"68","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"69"},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"76","messages":"77","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"78","messages":"79","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"80","messages":"81","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"82","messages":"83","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"84","messages":"85","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"86","messages":"87","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/drew/Documents/carerev-sample/src/locales/i18n.ts",[],"/Users/drew/Documents/carerev-sample/src/styles/theme/ThemeProvider.tsx",[],"/Users/drew/Documents/carerev-sample/src/app/containers/HomePage/index.tsx",[],"/Users/drew/Documents/carerev-sample/src/app/components/Link/index.ts",[],"/Users/drew/Documents/carerev-sample/src/app/containers/LanguageSwitch/messages.ts",[],"/Users/drew/Documents/carerev-sample/src/utils/request.ts",[],"/Users/drew/Documents/carerev-sample/src/app/index.tsx",[],"/Users/drew/Documents/carerev-sample/src/styles/theme/themes.ts",[],"/Users/drew/Documents/carerev-sample/src/app/containers/NotFoundPage/index.tsx",[],"/Users/drew/Documents/carerev-sample/src/index.tsx",[],["88","89"],"/Users/drew/Documents/carerev-sample/src/styles/theme/utils.ts",[],"/Users/drew/Documents/carerev-sample/src/styles/theme/slice.ts",[],["90","91"],"/Users/drew/Documents/carerev-sample/src/styles/global-styles.ts",[],"/Users/drew/Documents/carerev-sample/src/app/components/LoadingIndicator/index.tsx",[],"/Users/drew/Documents/carerev-sample/src/app/containers/NotFoundPage/P.ts",[],"/Users/drew/Documents/carerev-sample/src/store/reducers.ts",[],"/Users/drew/Documents/carerev-sample/src/app/containers/Countries/index.tsx",[],"/Users/drew/Documents/carerev-sample/src/app/components/PageWrapper/index.ts",[],"/Users/drew/Documents/carerev-sample/src/app/containers/Countries/saga.ts",[],"/Users/drew/Documents/carerev-sample/src/app/containers/Countries/reducer.tsx",[],"/Users/drew/Documents/carerev-sample/src/app/containers/Countries/selectors.ts",[],{"ruleId":"92","replacedBy":"93"},{"ruleId":"94","replacedBy":"95"},{"ruleId":"92","replacedBy":"96"},{"ruleId":"94","replacedBy":"97"},"no-native-reassign",["98"],"no-negated-in-lhs",["99"],["98"],["99"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"/Users/kellysample/Development/web-example/src/index.tsx":"1","/Users/kellysample/Development/web-example/src/locales/i18n.ts":"2","/Users/kellysample/Development/web-example/src/locales/translations.ts":"3","/Users/kellysample/Development/web-example/src/serviceWorker.ts":"4","/Users/kellysample/Development/web-example/src/store/configureStore.ts":"5","/Users/kellysample/Development/web-example/src/styles/theme/ThemeProvider.tsx":"6","/Users/kellysample/Development/web-example/src/store/reducers.ts":"7","/Users/kellysample/Development/web-example/src/app/index.tsx":"8","/Users/kellysample/Development/web-example/src/styles/theme/slice.ts":"9","/Users/kellysample/Development/web-example/src/styles/global-styles.ts":"10","/Users/kellysample/Development/web-example/src/styles/theme/utils.ts":"11","/Users/kellysample/Development/web-example/src/styles/theme/themes.ts":"12","/Users/kellysample/Development/web-example/src/app/containers/NotFoundPage/Loadable.tsx":"13","/Users/kellysample/Development/web-example/src/app/containers/HomePage/Loadable.tsx":"14","/Users/kellysample/Development/web-example/src/styles/StyleConstants.ts":"15","/Users/kellysample/Development/web-example/src/app/containers/Countries/index.tsx":"16","/Users/kellysample/Development/web-example/src/app/containers/NotFoundPage/index.tsx":"17","/Users/kellysample/Development/web-example/src/app/containers/HomePage/index.tsx":"18","/Users/kellysample/Development/web-example/src/app/containers/Countries/saga.ts":"19","/Users/kellysample/Development/web-example/src/app/containers/Countries/selectors.ts":"20","/Users/kellysample/Development/web-example/src/utils/loadable.tsx":"21","/Users/kellysample/Development/web-example/src/utils/redux-injectors.ts":"22","/Users/kellysample/Development/web-example/src/app/components/LoadingIndicator/index.tsx":"23","/Users/kellysample/Development/web-example/src/utils/request.ts":"24","/Users/kellysample/Development/web-example/src/app/containers/Countries/slice.ts":"25"},{"size":1778,"mtime":1648230825282,"results":"26","hashOfConfig":"27"},{"size":1115,"mtime":1648231010378,"results":"28","hashOfConfig":"27"},{"size":1123,"mtime":1648230859625,"results":"29","hashOfConfig":"27"},{"size":5251,"mtime":1648230866607,"results":"30","hashOfConfig":"27"},{"size":899,"mtime":1648230886202,"results":"31","hashOfConfig":"27"},{"size":571,"mtime":1648230959611,"results":"32","hashOfConfig":"27"},{"size":628,"mtime":1648230896361,"results":"33","hashOfConfig":"27"},{"size":1185,"mtime":1648227973401,"results":"34","hashOfConfig":"27"},{"size":1067,"mtime":1648230955096,"results":"35","hashOfConfig":"27"},{"size":717,"mtime":1648230943992,"results":"36","hashOfConfig":"27"},{"size":524,"mtime":1648230965966,"results":"37","hashOfConfig":"27"},{"size":382,"mtime":1648230962006,"results":"38","hashOfConfig":"27"},{"size":350,"mtime":1648230783294,"results":"39","hashOfConfig":"27"},{"size":561,"mtime":1648226967177,"results":"40","hashOfConfig":"27"},{"size":58,"mtime":1648222804300,"results":"41","hashOfConfig":"27"},{"size":1406,"mtime":1648233125266,"results":"42","hashOfConfig":"27"},{"size":1319,"mtime":1648227943432,"results":"43","hashOfConfig":"27"},{"size":632,"mtime":1648226986630,"results":"44","hashOfConfig":"27"},{"size":708,"mtime":1648226603007,"results":"45","hashOfConfig":"27"},{"size":532,"mtime":1648226629048,"results":"46","hashOfConfig":"27"},{"size":742,"mtime":1648230993714,"results":"47","hashOfConfig":"27"},{"size":471,"mtime":1648230996980,"results":"48","hashOfConfig":"27"},{"size":1101,"mtime":1648232169121,"results":"49","hashOfConfig":"27"},{"size":1422,"mtime":1648230997874,"results":"50","hashOfConfig":"27"},{"size":685,"mtime":1648226300241,"results":"51","hashOfConfig":"27"},{"filePath":"52","messages":"53","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"11mdaqp",{"filePath":"54","messages":"55","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"68"},{"filePath":"69","messages":"70","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"71","messages":"72","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"73","messages":"74","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"75","messages":"76","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"77","messages":"78","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"79","messages":"80","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"68"},{"filePath":"81","messages":"82","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"68"},{"filePath":"83","messages":"84","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"85","messages":"86","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"68"},{"filePath":"87","messages":"88","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"68"},{"filePath":"89","messages":"90","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"68"},{"filePath":"91","messages":"92","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"68"},{"filePath":"93","messages":"94","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"95","messages":"96","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"97","messages":"98","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"99","messages":"100","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"101","messages":"102","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"68"},"/Users/kellysample/Development/web-example/src/index.tsx",[],"/Users/kellysample/Development/web-example/src/locales/i18n.ts",[],"/Users/kellysample/Development/web-example/src/locales/translations.ts",[],"/Users/kellysample/Development/web-example/src/serviceWorker.ts",[],"/Users/kellysample/Development/web-example/src/store/configureStore.ts",[],"/Users/kellysample/Development/web-example/src/styles/theme/ThemeProvider.tsx",[],"/Users/kellysample/Development/web-example/src/store/reducers.ts",[],"/Users/kellysample/Development/web-example/src/app/index.tsx",[],["103","104"],"/Users/kellysample/Development/web-example/src/styles/theme/slice.ts",[],"/Users/kellysample/Development/web-example/src/styles/global-styles.ts",[],"/Users/kellysample/Development/web-example/src/styles/theme/utils.ts",[],"/Users/kellysample/Development/web-example/src/styles/theme/themes.ts",[],"/Users/kellysample/Development/web-example/src/app/containers/NotFoundPage/Loadable.tsx",[],"/Users/kellysample/Development/web-example/src/app/containers/HomePage/Loadable.tsx",[],"/Users/kellysample/Development/web-example/src/styles/StyleConstants.ts",[],"/Users/kellysample/Development/web-example/src/app/containers/Countries/index.tsx",[],"/Users/kellysample/Development/web-example/src/app/containers/NotFoundPage/index.tsx",[],"/Users/kellysample/Development/web-example/src/app/containers/HomePage/index.tsx",[],"/Users/kellysample/Development/web-example/src/app/containers/Countries/saga.ts",[],"/Users/kellysample/Development/web-example/src/app/containers/Countries/selectors.ts",[],"/Users/kellysample/Development/web-example/src/utils/loadable.tsx",[],"/Users/kellysample/Development/web-example/src/utils/redux-injectors.ts",[],"/Users/kellysample/Development/web-example/src/app/components/LoadingIndicator/index.tsx",[],"/Users/kellysample/Development/web-example/src/utils/request.ts",[],"/Users/kellysample/Development/web-example/src/app/containers/Countries/slice.ts",[],{"ruleId":"105","replacedBy":"106"},{"ruleId":"107","replacedBy":"108"},"no-native-reassign",["109"],"no-negated-in-lhs",["110"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index b88daf7..9d251ea 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,9 +1,9 @@ { - "printWidth": 80, + "arrowParens": "avoid", + "bracketSpacing": true, + "semi": false, "tabWidth": 2, - "useTabs": false, - "semi": true, "singleQuote": true, "trailingComma": "all", - "arrowParens": "avoid" + "useTabs": false } diff --git a/README.md b/README.md index 7f0bf87..69b2dbf 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,9 @@ This is a simple web app that based on the [react-boilerplate CRA template](http It currently has two pages, an index and a `/countries` page which downloads a list of countries from the CareRev API and displays links to a country detail page. Right now the link leads to a 404. Your task is to add the missing route which will download the details for the selected country and display them. -**NOTE:** The task is broken up into smaller steps and shouldn't take more than an hour or two in total. If you find yourself stuck on any step, simply note where you ran into any problems and what you were trying to do so we can discuss it later, then move on to the next step. +**NOTE:** If you find yourself stuck on any step, simply note where you ran into any problems and what you were trying to do so we can discuss it later, then move on to the next step. -1. Get the app running with `yarn install` and `yarn start` +1. Get the app running with `npm install` and `npm start` 2. Add a route for `/country/:id` @@ -20,6 +20,12 @@ It currently has two pages, an index and a `/countries` page which downloads a l 7. Display that country's name and currency code in the container when it loads, using the selector(s). -8. Bonus (optional): Add an error view in case the data fetching has a problem. +8. Add an error view in case the data fetching has a problem. -This added container should function roughly like the existing `Countries` container. In the interview, we'll discuss this app, ways to improve it, architectural concepts, best practices and what ideas you think are important in making a strong, reliable and easy to use app. \ No newline at end of file +9. Style the page with tailwind. + +10. Ensure the page meets accessibility standards. + +11. Add unit tests. + +This added container should function roughly like the existing `Countries` container. In the interview, we'll discuss this app, ways to improve it, architectural concepts, best practices and what ideas you think are important in making a strong, reliable and easy to use app. diff --git a/internals/startingTemplate/src/locales/i18n.ts b/internals/startingTemplate/src/locales/i18n.ts index 417e005..689d2b3 100644 --- a/internals/startingTemplate/src/locales/i18n.ts +++ b/internals/startingTemplate/src/locales/i18n.ts @@ -1,18 +1,18 @@ -import i18next from 'i18next'; -import { initReactI18next } from 'react-i18next'; -import LanguageDetector from 'i18next-browser-languagedetector'; +import i18next from 'i18next' +import { initReactI18next } from 'react-i18next' +import LanguageDetector from 'i18next-browser-languagedetector' -import en from './en/translation.json'; -import { convertLanguageJsonToObject } from './translations'; +import en from './en/translation.json' +import { convertLanguageJsonToObject } from './translations' export const translationsJson = { en: { translation: en, }, -}; +} // Create the 'translations' object to provide full intellisense support for the static json files. -convertLanguageJsonToObject(en); +convertLanguageJsonToObject(en) export const i18n = i18next // pass the i18n instance to react-i18next. @@ -31,4 +31,4 @@ export const i18n = i18next interpolation: { escapeValue: false, // not needed for react as it escapes by default }, - }); + }) diff --git a/src/app/__tests__/__snapshots__/index.test.tsx.snap b/src/app/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index d44ae9f..0000000 --- a/src/app/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,33 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render and match the snapshot 1`] = ` - - - - - - - - - - -`; diff --git a/src/app/__tests__/index.test.tsx b/src/app/__tests__/index.test.tsx deleted file mode 100644 index 7d3cd5b..0000000 --- a/src/app/__tests__/index.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import { createRenderer } from 'react-test-renderer/shallow'; - -import { App } from '../index'; - -const renderer = createRenderer(); - -describe('', () => { - it('should render and match the snapshot', () => { - renderer.render(); - const renderedOutput = renderer.getRenderOutput(); - expect(renderedOutput).toMatchSnapshot(); - }); -}); diff --git a/src/app/components/A/__tests__/index.test.tsx b/src/app/components/A/__tests__/index.test.tsx deleted file mode 100644 index dd1cfcc..0000000 --- a/src/app/components/A/__tests__/index.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; - -import { A } from '../index'; -import { themes } from 'styles/theme/themes'; -import { DefaultTheme } from 'styled-components'; - -const renderWithTheme = (theme?: DefaultTheme) => - render(); - -describe('', () => { - it('should render an tag', () => { - const a = renderWithTheme(); - expect(a.container.querySelector('a')).toBeInTheDocument(); - }); - - it('should have theme', () => { - const a = renderWithTheme(); - expect(a.container.firstChild).toHaveStyle( - `color: ${themes.light.primary}`, - ); - }); -}); diff --git a/src/app/components/A/index.ts b/src/app/components/A/index.ts deleted file mode 100644 index 389b4aa..0000000 --- a/src/app/components/A/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components/macro'; - -export const A = styled.a` - color: ${p => p.theme.primary}; - text-decoration: none; - - &:hover { - text-decoration: underline; - opacity: 0.8; - } - - &:active { - opacity: 0.4; - } -`; diff --git a/src/app/components/FormLabel/__tests__/index.test.tsx b/src/app/components/FormLabel/__tests__/index.test.tsx deleted file mode 100644 index ae147ba..0000000 --- a/src/app/components/FormLabel/__tests__/index.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; - -import { FormLabel } from '../index'; -import { themes } from 'styles/theme/themes'; -import { DefaultTheme } from 'styled-components'; - -const renderWithTheme = (theme?: DefaultTheme) => - render(); - -describe('', () => { - it('should render an - HeaderLink - -`; diff --git a/src/app/components/Link/__tests__/index.test.tsx b/src/app/components/Link/__tests__/index.test.tsx deleted file mode 100644 index cf1a912..0000000 --- a/src/app/components/Link/__tests__/index.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; - -import { Link } from '../index'; -import { themes } from 'styles/theme/themes'; -import { DefaultTheme } from 'styled-components'; -import { MemoryRouter } from 'react-router-dom'; - -const renderWithTheme = (theme?: DefaultTheme) => { - return render( - - - HeaderLink - - , - ); -}; - -describe('', () => { - it('should match snapshot', () => { - const link = renderWithTheme(); - expect(link.container.firstChild).toMatchSnapshot(); - }); - - it('should have theme', () => { - const link = renderWithTheme(); - expect(link.container.firstChild).toHaveStyle( - `color: ${themes.light.primary}`, - ); - }); - - it('should have a class attribute', () => { - const link = renderWithTheme(); - expect(link.queryByText('HeaderLink')).toHaveAttribute('class'); - }); -}); diff --git a/src/app/components/Link/index.ts b/src/app/components/Link/index.ts deleted file mode 100644 index 845d30b..0000000 --- a/src/app/components/Link/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import styled from 'styled-components/macro'; -import { Link as RouterLink } from 'react-router-dom'; - -export const Link = styled(RouterLink)` - color: ${p => p.theme.primary}; - text-decoration: none; - - &:hover { - text-decoration: underline; - opacity: 0.8; - } - - &:active { - opacity: 0.4; - } -`; diff --git a/src/app/components/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index befa3ee..0000000 --- a/src/app/components/LoadingIndicator/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,67 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should match snapshot 1`] = ` -.c0 { - -webkit-animation: cqkDSr 2.625s linear infinite; - animation: cqkDSr 2.625s linear infinite; - height: 3rem; - width: 3rem; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -.c1 { - -webkit-animation: caVMmK 1.5s ease-in-out infinite; - animation: caVMmK 1.5s ease-in-out infinite; - stroke: rgba(215,113,88,1); - stroke-linecap: round; -} - - - - -`; - -exports[` should match snapshot when props changed 1`] = ` -.c0 { - -webkit-animation: cqkDSr 2.625s linear infinite; - animation: cqkDSr 2.625s linear infinite; - height: 1.25rem; - width: 1.25rem; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -.c1 { - -webkit-animation: caVMmK 1.5s ease-in-out infinite; - animation: caVMmK 1.5s ease-in-out infinite; - stroke: rgba(215,113,88,1); - stroke-linecap: round; -} - - - - -`; diff --git a/src/app/components/LoadingIndicator/__tests__/index.test.tsx b/src/app/components/LoadingIndicator/__tests__/index.test.tsx deleted file mode 100644 index 4e2c128..0000000 --- a/src/app/components/LoadingIndicator/__tests__/index.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; - -import { LoadingIndicator } from '../index'; -import { themes } from 'styles/theme/themes'; -import { DefaultTheme, ThemeProvider } from 'styled-components'; - -const renderWithTheme = ( - props: Parameters[number] = {}, - theme?: DefaultTheme, -) => - render( - - - , - ); - -describe('', () => { - it('should match snapshot', () => { - const loadingIndicator = renderWithTheme(); - expect(loadingIndicator.container.firstChild).toMatchSnapshot(); - }); - - it('should match snapshot when props changed', () => { - const loadingIndicator = renderWithTheme({ small: true }); - expect(loadingIndicator.container.firstChild).toMatchSnapshot(); - }); - - it('should have theme', () => { - const loadingIndicator = renderWithTheme(); - expect(loadingIndicator.container.querySelector('circle')).toHaveStyle( - `stroke: ${themes.light.primary}`, - ); - }); -}); diff --git a/src/app/components/LoadingIndicator/index.tsx b/src/app/components/LoadingIndicator/index.tsx index e92e973..9ba18ea 100644 --- a/src/app/components/LoadingIndicator/index.tsx +++ b/src/app/components/LoadingIndicator/index.tsx @@ -1,21 +1,25 @@ -import * as React from 'react'; -import styled, { keyframes } from 'styled-components/macro'; +import * as React from 'react' +import styled, { keyframes } from 'styled-components/macro' interface Props extends SvgProps {} export const LoadingIndicator = (props: Props) => ( - + -); +) -const speed = 1.5; +const speed = 1.5 const rotate = keyframes` 100% { transform: rotate(360deg); } -`; +` const dash = keyframes` 0% { @@ -30,10 +34,10 @@ const dash = keyframes` stroke-dasharray: 0, 150; stroke-dashoffset: -124; } -`; +` interface SvgProps { - small?: boolean; + small?: boolean } const Svg = styled.svg` @@ -41,10 +45,10 @@ const Svg = styled.svg` height: ${p => (p.small ? '1.25rem' : '3rem')}; width: ${p => (p.small ? '1.25rem' : '3rem')}; transform-origin: center; -`; +` const Circle = styled.circle` animation: ${dash} ${speed}s ease-in-out infinite; stroke: ${p => p.theme.primary}; stroke-linecap: round; -`; +` diff --git a/src/app/components/PageWrapper/index.ts b/src/app/components/PageWrapper/index.ts deleted file mode 100644 index d37be74..0000000 --- a/src/app/components/PageWrapper/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components/macro'; - -export const PageWrapper = styled.div` - width: 960px; - margin: 0 auto; - padding: 0 1.5rem; - box-sizing: content-box; -`; diff --git a/src/app/components/Radio/index.tsx b/src/app/components/Radio/index.tsx deleted file mode 100644 index 3093c09..0000000 --- a/src/app/components/Radio/index.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React, { memo } from 'react'; -import styled from 'styled-components/macro'; - -type InputProps = React.DetailedHTMLProps< - React.InputHTMLAttributes, - HTMLInputElement ->; - -interface Props extends InputProps { - id: string; - label: string; - className?: string; - isSelected?: boolean; -} - -export const Radio = memo( - ({ id, label, className, isSelected, ...restOf }: Props) => { - return ( - - - - - ); - }, -); - -const Wrapper = styled.div` - input[type='radio'] { - margin: 0; - opacity: 0; - width: 0; - height: 0; - padding: 0; - - + label { - margin: 0; - display: inline-block; - padding-left: 1.375rem; - padding-top: 0.0625rem; - position: relative; - cursor: pointer; - font-size: 0.875rem; - color: ${p => p.theme.text}; - z-index: 1; - - a { - color: ${p => p.theme.text}; - text-decoration: none; - } - - &::before { - position: absolute; - top: 0.25rem; - left: 0; - display: inline-block; - width: 1rem; - height: 1rem; - border-radius: 50%; - background-color: ${p => p.theme.background}; - content: ''; - border: 2px solid ${p => p.theme.border}; - transition: all 0.1s; - } - - &::after { - display: none; - content: ''; - position: absolute; - display: inline-block; - width: 0.375rem; - height: 0.375rem; - border-radius: 50%; - top: 0.5625rem; - left: 0.3125rem; - background-color: ${p => p.theme.background}; - } - - &:hover { - &::before { - border-color: ${p => p.theme.primary}; - } - } - } - - &:disabled { - + label { - opacity: 0.6; - cursor: auto; - - &:hover { - &::before { - border-color: ${p => p.theme.border}; - } - } - } - } - - &:focus { - + label { - &::before { - box-shadow: 0 0 0 3px - ${p => - p.theme.primary.replace( - /rgba?(\(\s*\d+\s*,\s*\d+\s*,\s*\d+)(?:\s*,.+?)?\)/, - 'rgba$1,0.2)', - )}; - } - } - } - - &:checked { - + label { - &::before { - background-color: ${p => p.theme.primary}; - border-color: ${p => p.theme.primary}; - } - - &::after { - display: inline-block; - } - } - } - } -`; diff --git a/src/app/containers/Countries/actions.tsx b/src/app/containers/Countries/actions.tsx deleted file mode 100644 index 6f92e1a..0000000 --- a/src/app/containers/Countries/actions.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { createAction } from '@reduxjs/toolkit'; - -const fetchCountries = createAction('FETCH_COUNTRIES_REQUEST'); - -const fetchCountriesSuccess = createAction( - 'FETCH_COUNTRIES_SUCCESS', - countries => { - return { - payload: { - countries, - }, - }; - }, -); - -const fetchCountriesError = createAction('FETCH_COUNTRIES_ERROR', error => { - return { - payload: { - error, - }, - }; -}); - -export const actions = { - fetchCountries, - fetchCountriesSuccess, - fetchCountriesError, -}; diff --git a/src/app/containers/Countries/index.tsx b/src/app/containers/Countries/index.tsx index 29ef29d..c6981d0 100644 --- a/src/app/containers/Countries/index.tsx +++ b/src/app/containers/Countries/index.tsx @@ -1,53 +1,48 @@ -import React, { useEffect } from 'react'; -import styled from 'styled-components/macro'; -import { useSelector, useDispatch } from 'react-redux'; -import { useInjectReducer, useInjectSaga } from 'utils/redux-injectors'; -import { saga } from './saga'; -import { key, countriesReducer } from './reducer'; -import { actions } from './actions'; -import { selectCountries, selectLoading, selectError } from './selectors'; -import { LoadingIndicator } from 'app/components/LoadingIndicator'; -import { Link } from 'app/components/Link'; -import { PageWrapper } from 'app/components/PageWrapper'; +import React, { useEffect } from 'react' +import { useSelector, useDispatch } from 'react-redux' +import { Link } from 'react-router-dom' +import { useInjectReducer, useInjectSaga } from 'utils/redux-injectors' +import { saga } from './saga' +import { key, reducer, actions } from './slice' +import { selectCountries, selectLoading, selectError } from './selectors' +import { LoadingIndicator } from 'app/components/LoadingIndicator' -export function Countries() { - useInjectReducer({ key: key, reducer: countriesReducer }); - useInjectSaga({ key: key, saga }); +export const Countries = () => { + useInjectReducer({ key: key, reducer: reducer }) + useInjectSaga({ key: key, saga }) - const countries = useSelector(selectCountries); - const isLoading = useSelector(selectLoading); - const error = useSelector(selectError); + const countries = useSelector(selectCountries) + const isLoading = useSelector(selectLoading) + const error = useSelector(selectError) - const dispatch = useDispatch(); + const dispatch = useDispatch() useEffect(() => { - dispatch(actions.fetchCountries()); - }, [dispatch]); + dispatch(actions.fetchCountries()) + }, [dispatch]) return ( - +

Countries

{isLoading && } - {countries?.length > 0 ? ( - + {countries?.length > 0 && ( +
    {countries.map(country => ( - - {country.name} - +
  • + + {country.name} + +
  • ))} - - ) : error ? ( - {error} - ) : null} - - ); +
+ )} + {error &&
{error}
} +
+ ) } - -const Country = styled.li` - color: blue; -`; - -const ErrorText = styled.span` - color: ${p => p.theme.text}; -`; - -const List = styled.div``; diff --git a/src/app/containers/Countries/reducer.tsx b/src/app/containers/Countries/reducer.tsx deleted file mode 100644 index 3ed1f86..0000000 --- a/src/app/containers/Countries/reducer.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { createReducer } from '@reduxjs/toolkit'; -import { CountriesState } from './types'; - -export const key = 'countries'; - -export const initialState: CountriesState = { - countries: [], - error: undefined, - isLoading: false, -}; - -export const countriesReducer = createReducer(initialState, { - FETCH_COUNTRIES_REQUEST: (state, action) => { - state.isLoading = true; - }, - FETCH_COUNTRIES_SUCCESS: (state, action) => { - state.isLoading = false; - state.countries = action.payload.countries; - }, - FETCH_COUNTRIES_ERROR: (state, action) => { - state.isLoading = false; - state.error = action.payload.error; - }, -}); diff --git a/src/app/containers/Countries/saga.ts b/src/app/containers/Countries/saga.ts index bd06be5..a135a7a 100644 --- a/src/app/containers/Countries/saga.ts +++ b/src/app/containers/Countries/saga.ts @@ -1,20 +1,20 @@ -import { call, put, takeLatest } from 'redux-saga/effects'; -import { request } from 'utils/request'; -import { actions } from './actions'; +import { call, put, takeLatest } from 'redux-saga/effects' +import { getErrorMessage, request } from 'utils/request' +import { actions } from './slice' export function* fetchCountries() { - const requestURL = `https://api.carerev.com/api/v1/countries`; + const requestURL = `https://api.carerev.com/api/v1/countries` try { - const { countries } = yield call(request, requestURL); + const { countries } = yield call(request, requestURL) if (countries?.length > 0) { - yield put(actions.fetchCountriesSuccess(countries)); + yield put(actions.fetchCountriesSuccess(countries)) } else { - yield put(actions.fetchCountriesError('No countries found.')); + yield put(actions.fetchCountriesError('No countries found.')) } } catch (err) { - yield put(actions.fetchCountriesError(err.toString())); + yield put(actions.fetchCountriesError(getErrorMessage(err))) } } @@ -22,5 +22,5 @@ export function* fetchCountries() { * Root saga manages watcher lifecycle */ export function* saga() { - yield takeLatest(actions.fetchCountries.type, fetchCountries); + yield takeLatest(actions.fetchCountries.type, fetchCountries) } diff --git a/src/app/containers/Countries/selectors.ts b/src/app/containers/Countries/selectors.ts index b0d5638..c462938 100644 --- a/src/app/containers/Countries/selectors.ts +++ b/src/app/containers/Countries/selectors.ts @@ -1,22 +1,21 @@ -import { createSelector } from '@reduxjs/toolkit'; +import { createSelector } from '@reduxjs/toolkit' -import { RootState } from 'types'; -import { initialState } from './reducer'; +import { RootState } from 'types' +import { initialState } from './slice' -// First select the relevant part from the state -const selectDomain = (state: RootState) => state.countries || initialState; +const selectDomain = (state: RootState) => state.countries || initialState export const selectLoading = createSelector( [selectDomain], countriesState => countriesState.isLoading, -); +) export const selectError = createSelector( [selectDomain], countriesState => countriesState.error, -); +) export const selectCountries = createSelector( [selectDomain], countriesState => countriesState.countries, -); +) diff --git a/src/app/containers/Countries/slice.ts b/src/app/containers/Countries/slice.ts new file mode 100644 index 0000000..4acab95 --- /dev/null +++ b/src/app/containers/Countries/slice.ts @@ -0,0 +1,31 @@ +import { createSlice } from '@reduxjs/toolkit' +import { CountriesState } from './types' + +const initialState: CountriesState = { + countries: [], + error: undefined, + isLoading: false, +} + +const key = 'countries' +const slice = createSlice({ + name: key, + initialState, + reducers: { + fetchCountries: state => { + state.isLoading = true + }, + fetchCountriesSuccess: (state, { payload }) => { + state.isLoading = false + state.countries = payload + }, + fetchCountriesError: (state, { payload: error }) => { + state.isLoading = false + state.error = error + }, + }, +}) + +const { actions, reducer } = slice + +export { actions, reducer, initialState, key } diff --git a/src/app/containers/Countries/tests/Countries.test.tsx b/src/app/containers/Countries/tests/Countries.test.tsx new file mode 100644 index 0000000..3fb7a39 --- /dev/null +++ b/src/app/containers/Countries/tests/Countries.test.tsx @@ -0,0 +1,110 @@ +import React from 'react' +import { render, screen } from '@testing-library/react' +import '@testing-library/jest-dom' +import { MemoryRouter } from 'react-router-dom' +import * as redux from 'react-redux' +import * as injectors from 'utils/redux-injectors' +import { Countries } from '../index' + +const mockState = { + countries: { + countries: [ + { + id: 'mock-id', + name: 'United States of America', + }, + ], + error: undefined, + isLoading: false, + }, +} + +describe('Countries', () => { + beforeEach(() => { + jest.spyOn(injectors, 'useInjectReducer').mockImplementation(() => void 0) + jest.spyOn(injectors, 'useInjectSaga').mockImplementation(() => void 0) + jest.spyOn(redux, 'useDispatch').mockImplementation(() => jest.fn()) + jest + .spyOn(redux, 'useSelector') + .mockImplementation(callback => callback(mockState)) + + render( + + + , + ) + }) + + it('renders the page title', () => { + expect(screen.getByText('Countries')).toBeInTheDocument() + }) + + it('renders an individual Country name', () => { + expect(screen.getByTestId('country')).toHaveTextContent( + 'United States of America', + ) + }) + + it('does not render the Loading indicator when isLoading is false', () => { + expect(screen.queryByTestId('loading-indicator')).toBeNull() + }) + + it('does not render an error container by default', () => { + expect(screen.queryByTestId('error')).toBeNull() + }) +}) + +describe('Countries - loading', () => { + const loadingState = { + countries: { + isLoading: true, + }, + } + + beforeEach(() => { + jest.spyOn(injectors, 'useInjectReducer').mockImplementation(() => void 0) + jest.spyOn(injectors, 'useInjectSaga').mockImplementation(() => void 0) + jest.spyOn(redux, 'useDispatch').mockImplementation(() => jest.fn()) + jest + .spyOn(redux, 'useSelector') + .mockImplementation(callback => callback(loadingState)) + + render( + + + , + ) + }) + + it('renders the Loading indicator when isLoading is true', () => { + expect(screen.getByTestId('loading-indicator')).toBeInTheDocument() + }) +}) + +describe('Countries - error', () => { + const errorState = { + countries: { + isLoading: false, + error: 'Something went wrong!', + }, + } + + beforeEach(() => { + jest.spyOn(injectors, 'useInjectReducer').mockImplementation(() => void 0) + jest.spyOn(injectors, 'useInjectSaga').mockImplementation(() => void 0) + jest.spyOn(redux, 'useDispatch').mockImplementation(() => jest.fn()) + jest + .spyOn(redux, 'useSelector') + .mockImplementation(callback => callback(errorState)) + + render( + + + , + ) + }) + + it('renders an error container', () => { + expect(screen.getByTestId('error')).toBeInTheDocument() + }) +}) diff --git a/src/app/containers/Countries/types.ts b/src/app/containers/Countries/types.ts index cbddf09..ef3316c 100644 --- a/src/app/containers/Countries/types.ts +++ b/src/app/containers/Countries/types.ts @@ -1,8 +1,8 @@ -import { Country } from 'types/Country'; +import { Country } from 'types/Country' /* --- STATE --- */ export interface CountriesState { - isLoading: boolean; - error?: string; - countries: Country[]; + isLoading: boolean + error?: string + countries: Country[] } diff --git a/src/app/containers/HomePage/Loadable.tsx b/src/app/containers/HomePage/Loadable.tsx index ff81604..456cff0 100644 --- a/src/app/containers/HomePage/Loadable.tsx +++ b/src/app/containers/HomePage/Loadable.tsx @@ -2,27 +2,26 @@ * Asynchronously loads the component for HomePage */ -import * as React from 'react'; -import { lazyLoad } from 'utils/loadable'; -import { LoadingIndicator } from 'app/components/LoadingIndicator'; -import styled from 'styled-components/macro'; - -const LoadingWrapper = styled.div` - width: 100%; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; -`; +import * as React from 'react' +import { lazyLoad } from 'utils/loadable' +import { LoadingIndicator } from 'app/components/LoadingIndicator' export const HomePage = lazyLoad( () => import('./index'), module => module.HomePage, { fallback: ( - +
- +
), }, -); +) diff --git a/src/app/containers/HomePage/Logos.tsx b/src/app/containers/HomePage/Logos.tsx deleted file mode 100644 index bafe936..0000000 --- a/src/app/containers/HomePage/Logos.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components/macro'; -import { ReactComponent as CRALogo } from './assets/cra-logo.svg'; -import { ReactComponent as RPLogo } from './assets/rp-logo.svg'; -import { ReactComponent as PlusSign } from './assets/plus-sign.svg'; - -export function Logos() { - return ( - - - - - - ); -} - -const Wrapper = styled.div` - display: flex; - align-items: center; - color: ${p => p.theme.border}; - - .logo { - width: 4.5rem; - height: 4.5rem; - } - - .sign { - width: 2rem; - height: 2rem; - margin: 0 2rem; - } -`; diff --git a/src/app/containers/HomePage/Masthead.tsx b/src/app/containers/HomePage/Masthead.tsx deleted file mode 100644 index 10ddc42..0000000 --- a/src/app/containers/HomePage/Masthead.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components/macro'; -import { Logos } from './Logos'; -import { Title } from 'app/containers/HomePage/components/Title'; -import { Lead } from 'app/containers/HomePage/components/Lead'; -import { A } from 'app/components/A'; - -export function Masthead() { - return ( - - - React Boilerplate meets CRA - - Now you can use the{' '} - - React Boilerplate - {' '} - as a{' '} - - Create React App - {' '} - template. - - - ); -} - -const Wrapper = styled.main` - height: 60vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 320px; -`; diff --git a/src/app/containers/HomePage/__tests__/Features.test.tsx b/src/app/containers/HomePage/__tests__/Features.test.tsx deleted file mode 100644 index 0fcb416..0000000 --- a/src/app/containers/HomePage/__tests__/Features.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; -import { createRenderer } from 'react-test-renderer/shallow'; -import { Features } from '../Features'; -import i18next from 'i18next'; - -const shallowRenderer = createRenderer(); - -describe('', () => { - it('should render with en translations', () => { - i18next.changeLanguage('en'); - shallowRenderer.render(); - const renderedOutput = shallowRenderer.getRenderOutput(); - expect(renderedOutput).toMatchSnapshot(); - }); - - it('should render with de translations', () => { - i18next.changeLanguage('de'); - shallowRenderer.render(); - const renderedOutput = shallowRenderer.getRenderOutput(); - expect(renderedOutput).toMatchSnapshot(); - }); - - it('should render different after language change', () => { - i18next.changeLanguage('en'); - shallowRenderer.render(); - const renderedOutput1 = shallowRenderer.getRenderOutput(); - - i18next.changeLanguage('de'); - shallowRenderer.render(); - const renderedOutput2 = shallowRenderer.getRenderOutput(); - - expect(renderedOutput1).not.toEqual(renderedOutput2); - }); -}); diff --git a/src/app/containers/HomePage/__tests__/Logos.test.tsx b/src/app/containers/HomePage/__tests__/Logos.test.tsx deleted file mode 100644 index 68a198f..0000000 --- a/src/app/containers/HomePage/__tests__/Logos.test.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import { Logos } from '../Logos'; -import { render } from '@testing-library/react'; -import { ThemeProvider, DefaultTheme } from 'styled-components'; - -import { themes } from 'styles/theme/themes'; - -const renderLogos = (theme: DefaultTheme) => - render( - - - , - ); -describe('', () => { - it('should render and match the snapshot', () => { - const logos = renderLogos(themes.light); - expect(logos.asFragment()).toMatchSnapshot(); - }); - - it('should use theme from props', () => { - let logos = renderLogos(themes.light); - expect(logos.container.firstChild).toHaveStyle( - `color: ${themes.light.border}`, - ); - logos = renderLogos(themes.dark); - expect(logos.container.firstChild).toHaveStyle( - `color: ${themes.dark.border}`, - ); - }); -}); diff --git a/src/app/containers/HomePage/__tests__/Masthead.test.tsx b/src/app/containers/HomePage/__tests__/Masthead.test.tsx deleted file mode 100644 index 2295a6d..0000000 --- a/src/app/containers/HomePage/__tests__/Masthead.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import { Masthead } from '../Masthead'; -import { createRenderer } from 'react-test-renderer/shallow'; - -const shallowRenderer = createRenderer(); - -describe('', () => { - it('should render and match the snapshot', () => { - shallowRenderer.render(); - const renderedOutput = shallowRenderer.getRenderOutput(); - expect(renderedOutput).toMatchSnapshot(); - }); -}); diff --git a/src/app/containers/HomePage/__tests__/__snapshots__/Logos.test.tsx.snap b/src/app/containers/HomePage/__tests__/__snapshots__/Logos.test.tsx.snap deleted file mode 100644 index a70c4ff..0000000 --- a/src/app/containers/HomePage/__tests__/__snapshots__/Logos.test.tsx.snap +++ /dev/null @@ -1,48 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render and match the snapshot 1`] = ` - - .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: rgba(58,52,51,0.12); -} - -.c0 .logo { - width: 4.5rem; - height: 4.5rem; -} - -.c0 .sign { - width: 2rem; - height: 2rem; - margin: 0 2rem; -} - -
- - - plus-sign.svg - - -
-
-`; diff --git a/src/app/containers/HomePage/__tests__/__snapshots__/Masthead.test.tsx.snap b/src/app/containers/HomePage/__tests__/__snapshots__/Masthead.test.tsx.snap deleted file mode 100644 index 60573cf..0000000 --- a/src/app/containers/HomePage/__tests__/__snapshots__/Masthead.test.tsx.snap +++ /dev/null @@ -1,33 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render and match the snapshot 1`] = ` - - - - React Boilerplate meets CRA - - - Now you can use the - - - React Boilerplate - - - as a - - - Create React App - - - template. - - -`; diff --git a/src/app/containers/HomePage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/containers/HomePage/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index acce254..0000000 --- a/src/app/containers/HomePage/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,23 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render and match the snapshot 1`] = ` - - - - Home Page - - - - - - - - - -`; diff --git a/src/app/containers/HomePage/__tests__/index.test.tsx b/src/app/containers/HomePage/__tests__/index.test.tsx deleted file mode 100644 index db55958..0000000 --- a/src/app/containers/HomePage/__tests__/index.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import { createRenderer } from 'react-test-renderer/shallow'; - -import { HomePage } from '..'; - -const shallowRenderer = createRenderer(); - -describe('', () => { - it('should render and match the snapshot', () => { - shallowRenderer.render(); - const renderedOutput = shallowRenderer.getRenderOutput(); - expect(renderedOutput).toMatchSnapshot(); - }); -}); diff --git a/src/app/containers/HomePage/assets/code-analysis.svg b/src/app/containers/HomePage/assets/code-analysis.svg deleted file mode 100644 index b16a4e7..0000000 --- a/src/app/containers/HomePage/assets/code-analysis.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/app/containers/HomePage/assets/cra-logo.svg b/src/app/containers/HomePage/assets/cra-logo.svg deleted file mode 100644 index c0bb732..0000000 --- a/src/app/containers/HomePage/assets/cra-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/app/containers/HomePage/assets/css.svg b/src/app/containers/HomePage/assets/css.svg deleted file mode 100644 index 57dfe5b..0000000 --- a/src/app/containers/HomePage/assets/css.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/app/containers/HomePage/assets/instant-feedback.svg b/src/app/containers/HomePage/assets/instant-feedback.svg deleted file mode 100644 index 7e38f0e..0000000 --- a/src/app/containers/HomePage/assets/instant-feedback.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/app/containers/HomePage/assets/intl.svg b/src/app/containers/HomePage/assets/intl.svg deleted file mode 100644 index 86c771f..0000000 --- a/src/app/containers/HomePage/assets/intl.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/app/containers/HomePage/assets/offline-first.svg b/src/app/containers/HomePage/assets/offline-first.svg deleted file mode 100644 index 04e7d6e..0000000 --- a/src/app/containers/HomePage/assets/offline-first.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/app/containers/HomePage/assets/plus-sign.svg b/src/app/containers/HomePage/assets/plus-sign.svg deleted file mode 100644 index 0cd16e1..0000000 --- a/src/app/containers/HomePage/assets/plus-sign.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/app/containers/HomePage/assets/route.svg b/src/app/containers/HomePage/assets/route.svg deleted file mode 100644 index 72d76f5..0000000 --- a/src/app/containers/HomePage/assets/route.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/app/containers/HomePage/assets/rp-logo.svg b/src/app/containers/HomePage/assets/rp-logo.svg deleted file mode 100644 index 1aae1ed..0000000 --- a/src/app/containers/HomePage/assets/rp-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/app/containers/HomePage/assets/scaffolding.svg b/src/app/containers/HomePage/assets/scaffolding.svg deleted file mode 100644 index e8f907c..0000000 --- a/src/app/containers/HomePage/assets/scaffolding.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/app/containers/HomePage/assets/seo.svg b/src/app/containers/HomePage/assets/seo.svg deleted file mode 100644 index f94e1e8..0000000 --- a/src/app/containers/HomePage/assets/seo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/app/containers/HomePage/assets/state.svg b/src/app/containers/HomePage/assets/state.svg deleted file mode 100644 index 3d8712e..0000000 --- a/src/app/containers/HomePage/assets/state.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/app/containers/HomePage/assets/ts.svg b/src/app/containers/HomePage/assets/ts.svg deleted file mode 100644 index 2fa5730..0000000 --- a/src/app/containers/HomePage/assets/ts.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/app/containers/HomePage/components/Lead.ts b/src/app/containers/HomePage/components/Lead.ts deleted file mode 100644 index f8d44e2..0000000 --- a/src/app/containers/HomePage/components/Lead.ts +++ /dev/null @@ -1,13 +0,0 @@ -import styled from 'styled-components/macro'; - -export const Lead = styled.p` - font-size: 1.5rem; - font-weight: 300; - line-height: 1.5; - color: ${p => p.theme.textSecondary}; - margin: 0 0 1.5rem 0; - - strong { - color: ${p => p.theme.text}; - } -`; diff --git a/src/app/containers/HomePage/components/P.ts b/src/app/containers/HomePage/components/P.ts deleted file mode 100644 index f1eceb5..0000000 --- a/src/app/containers/HomePage/components/P.ts +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components/macro'; - -export const P = styled.p` - font-size: 1rem; - line-height: 1.5; - color: ${p => p.theme.textSecondary}; - margin: 0.625rem 0 1.5rem 0; -`; diff --git a/src/app/containers/HomePage/components/SubTitle.ts b/src/app/containers/HomePage/components/SubTitle.ts deleted file mode 100644 index b3be5e4..0000000 --- a/src/app/containers/HomePage/components/SubTitle.ts +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components/macro'; - -export const SubTitle = styled.h3` - font-size: 1.25rem; - margin: 0; - color: ${p => p.theme.text}; -`; diff --git a/src/app/containers/HomePage/components/Title.ts b/src/app/containers/HomePage/components/Title.ts deleted file mode 100644 index 7dadd28..0000000 --- a/src/app/containers/HomePage/components/Title.ts +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components/macro'; - -export const Title = styled.h1` - font-size: 32px; - font-weight: bold; - color: ${p => p.theme.text}; - margin: 1rem 0; -`; diff --git a/src/app/containers/HomePage/components/__tests__/Lead.test.tsx b/src/app/containers/HomePage/components/__tests__/Lead.test.tsx deleted file mode 100644 index a64873d..0000000 --- a/src/app/containers/HomePage/components/__tests__/Lead.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { DefaultTheme } from 'styled-components'; -import { themes } from 'styles/theme/themes'; -import { Lead } from '../Lead'; - -const renderWithTheme = (theme: DefaultTheme) => render(); - -describe('', () => { - it('should render and match the snapshot', () => { - const lead = renderWithTheme(themes.light); - expect(lead.container.firstChild).toMatchSnapshot(); - }); - - it('should use theme from props', () => { - let lead = renderWithTheme(themes.light); - expect(lead.container.firstChild).toHaveStyle( - `color: ${themes.light.textSecondary}`, - ); - lead = renderWithTheme(themes.dark); - expect(lead.container.firstChild).toHaveStyle( - `color: ${themes.dark.textSecondary}`, - ); - }); -}); diff --git a/src/app/containers/HomePage/components/__tests__/P.test.tsx b/src/app/containers/HomePage/components/__tests__/P.test.tsx deleted file mode 100644 index 142c2a8..0000000 --- a/src/app/containers/HomePage/components/__tests__/P.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { DefaultTheme } from 'styled-components'; -import { themes } from 'styles/theme/themes'; -import { P } from '../P'; - -const renderWithTheme = (theme: DefaultTheme) => render(

); - -describe('

', () => { - it('should render and match the snapshot', () => { - const p = renderWithTheme(themes.light); - expect(p.container.firstChild).toMatchSnapshot(); - }); - - it('should use theme from props', () => { - let p = renderWithTheme(themes.light); - expect(p.container.firstChild).toHaveStyle( - `color: ${themes.light.textSecondary}`, - ); - p = renderWithTheme(themes.dark); - expect(p.container.firstChild).toHaveStyle( - `color: ${themes.dark.textSecondary}`, - ); - }); -}); diff --git a/src/app/containers/HomePage/components/__tests__/Subtitle.test.tsx b/src/app/containers/HomePage/components/__tests__/Subtitle.test.tsx deleted file mode 100644 index 8748c68..0000000 --- a/src/app/containers/HomePage/components/__tests__/Subtitle.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { DefaultTheme } from 'styled-components'; -import { themes } from 'styles/theme/themes'; -import { SubTitle } from '../SubTitle'; - -const renderWithTheme = (theme: DefaultTheme) => - render(); - -describe('', () => { - it('should render and match the snapshot', () => { - const comp = renderWithTheme(themes.light); - expect(comp.container.firstChild).toMatchSnapshot(); - }); - - it('should use theme from props', () => { - let comp = renderWithTheme(themes.light); - expect(comp.container.firstChild).toHaveStyle( - `color: ${themes.light.text}`, - ); - comp = renderWithTheme(themes.dark); - expect(comp.container.firstChild).toHaveStyle(`color: ${themes.dark.text}`); - }); -}); diff --git a/src/app/containers/HomePage/components/__tests__/Title.test.tsx b/src/app/containers/HomePage/components/__tests__/Title.test.tsx deleted file mode 100644 index 86a95c9..0000000 --- a/src/app/containers/HomePage/components/__tests__/Title.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { DefaultTheme } from 'styled-components'; -import { themes } from 'styles/theme/themes'; -import { Title } from '../Title'; - -const renderWithTheme = (theme: DefaultTheme) => - render(); - -describe('<Title />', () => { - it('should render and match the snapshot', () => { - const comp = renderWithTheme(themes.light); - expect(comp.container.firstChild).toMatchSnapshot(); - }); - - it('should use theme from props', () => { - let comp = renderWithTheme(themes.light); - expect(comp.container.firstChild).toHaveStyle( - `color: ${themes.light.text}`, - ); - comp = renderWithTheme(themes.dark); - expect(comp.container.firstChild).toHaveStyle(`color: ${themes.dark.text}`); - }); -}); diff --git a/src/app/containers/HomePage/components/__tests__/__snapshots__/Lead.test.tsx.snap b/src/app/containers/HomePage/components/__tests__/__snapshots__/Lead.test.tsx.snap deleted file mode 100644 index 8d6103f..0000000 --- a/src/app/containers/HomePage/components/__tests__/__snapshots__/Lead.test.tsx.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Lead /> should render and match the snapshot 1`] = ` -.c0 { - font-size: 1.5rem; - font-weight: 300; - line-height: 1.5; - color: rgba(58,52,51,0.7); - margin: 0 0 1.5rem 0; -} - -.c0 strong { - color: rgba(58,52,51,1); -} - -<p - class="c0" -/> -`; diff --git a/src/app/containers/HomePage/components/__tests__/__snapshots__/P.test.tsx.snap b/src/app/containers/HomePage/components/__tests__/__snapshots__/P.test.tsx.snap deleted file mode 100644 index f533d1a..0000000 --- a/src/app/containers/HomePage/components/__tests__/__snapshots__/P.test.tsx.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<P /> should render and match the snapshot 1`] = ` -.c0 { - font-size: 1rem; - line-height: 1.5; - color: rgba(58,52,51,0.7); - margin: 0.625rem 0 1.5rem 0; -} - -<p - class="c0" -/> -`; diff --git a/src/app/containers/HomePage/components/__tests__/__snapshots__/Subtitle.test.tsx.snap b/src/app/containers/HomePage/components/__tests__/__snapshots__/Subtitle.test.tsx.snap deleted file mode 100644 index 6081c03..0000000 --- a/src/app/containers/HomePage/components/__tests__/__snapshots__/Subtitle.test.tsx.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Subtitle /> should render and match the snapshot 1`] = ` -.c0 { - font-size: 1.25rem; - margin: 0; - color: rgba(58,52,51,1); -} - -<h3 - class="c0" -/> -`; diff --git a/src/app/containers/HomePage/components/__tests__/__snapshots__/Title.test.tsx.snap b/src/app/containers/HomePage/components/__tests__/__snapshots__/Title.test.tsx.snap deleted file mode 100644 index 363787a..0000000 --- a/src/app/containers/HomePage/components/__tests__/__snapshots__/Title.test.tsx.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Title /> should render and match the snapshot 1`] = ` -.c0 { - font-size: 32px; - font-weight: bold; - color: rgba(58,52,51,1); - margin: 1rem 0; -} - -<h1 - class="c0" -/> -`; diff --git a/src/app/containers/HomePage/index.tsx b/src/app/containers/HomePage/index.tsx index 7ecda73..3880c64 100644 --- a/src/app/containers/HomePage/index.tsx +++ b/src/app/containers/HomePage/index.tsx @@ -1,22 +1,28 @@ -import * as React from 'react'; -import { Helmet } from 'react-helmet-async'; -import { PageWrapper } from 'app/components/PageWrapper'; -import { Link } from 'app/components/Link'; +import * as React from 'react' +import { Helmet } from 'react-helmet-async' +import { Link } from 'react-router-dom' -export function HomePage() { +export const HomePage = () => { return ( <> <Helmet> <title>Home Page - -

CareRev Sample App

+
+

CareRev Currency App

Show Countries - +
- ); + ) } diff --git a/src/app/containers/HomePage/messages.ts b/src/app/containers/HomePage/messages.ts deleted file mode 100644 index 7eb15e4..0000000 --- a/src/app/containers/HomePage/messages.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * This file is only need if you want to extract messages into JSON files in locales folder - * AND if you are also using the object syntax instead of string syntax. \ - * Check the documentation section i18n for details - */ - -import { translations } from 'locales/translations'; -import { _t } from 'utils/messages'; - -export const messages = { - routingTitle: _t( - translations.routingFeature.title, - 'Industry-standard Routing', // you can set the default value when extracting - ), - routingDescription: _t(translations.routingFeature.description), - feedbackTitle: _t(translations.feedbackFeature.title), - feedbackDescription: _t(translations.feedbackFeature.description), - scaffoldingTitle: _t(translations.scaffoldingFeature.title), - scaffoldingDescription: _t(translations.scaffoldingFeature.description), - i18nTitle: _t(translations.i18nFeature.title), - i18nDescription: _t(translations.i18nFeature.description), -}; diff --git a/src/app/containers/LanguageSwitch/__tests__/index.test.tsx b/src/app/containers/LanguageSwitch/__tests__/index.test.tsx deleted file mode 100644 index c70faae..0000000 --- a/src/app/containers/LanguageSwitch/__tests__/index.test.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import { render, fireEvent } from '@testing-library/react'; -import i18next from 'i18next'; -import { ThemeProvider, DefaultTheme } from 'styled-components'; - -import { LanguageSwitch } from '..'; -import { themes } from 'styles/theme/themes'; -import { i18n } from 'locales/i18n'; -import { translations } from 'locales/translations'; - -const renderLanguageSwitch = (theme?: DefaultTheme) => - render( - - - , - ); -describe('', () => { - it('should have 2 radio buttons', () => { - const languageSwitch = renderLanguageSwitch(); - expect(languageSwitch.queryAllByRole('radio').length).toBe(2); - }); - - it('should have translated FormLabel ', async () => { - const t = await i18n; - - i18next.changeLanguage('en'); - - let languageSwitch = renderLanguageSwitch(); - let label = languageSwitch.queryByText( - t(translations.i18nFeature.selectLanguage), - ); - expect(label).toBeInTheDocument(); - - languageSwitch.unmount(); - i18next.changeLanguage('de'); - - languageSwitch = renderLanguageSwitch(); - label = languageSwitch.queryByText( - t(translations.i18nFeature.selectLanguage), - ); - expect(label).toBeInTheDocument(); - }); - - it('should change language on click', async () => { - i18next.changeLanguage('en'); - const languageSwitch = renderLanguageSwitch(); - const radio2 = languageSwitch.queryAllByRole('radio')[1]; - fireEvent.click(radio2); - expect(i18next.language).toEqual('de'); - }); -}); diff --git a/src/app/containers/LanguageSwitch/index.tsx b/src/app/containers/LanguageSwitch/index.tsx deleted file mode 100644 index 1773cfd..0000000 --- a/src/app/containers/LanguageSwitch/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import { FormLabel } from 'app/components/FormLabel'; -import { Radio } from 'app/components/Radio'; -import styled from 'styled-components/macro'; -import { useTranslation } from 'react-i18next'; -import { messages } from './messages'; - -export function LanguageSwitch() { - const { t, i18n } = useTranslation(); - const handleLanguageChange = (event: React.ChangeEvent) => { - const language = event.target.value; - i18n.changeLanguage(language); - }; - - return ( - - {t(...messages.selectLanguage)} - - - - - - ); -} - -const Wrapper = styled.div` - display: flex; - flex-direction: column; - ${FormLabel} { - margin-bottom: 0.625rem; - } -`; -const Languages = styled.div` - display: flex; - - .radio { - margin-right: 1.5rem; - } -`; diff --git a/src/app/containers/LanguageSwitch/messages.ts b/src/app/containers/LanguageSwitch/messages.ts deleted file mode 100644 index 03bb059..0000000 --- a/src/app/containers/LanguageSwitch/messages.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { translations } from 'locales/translations'; -import { _t } from 'utils/messages'; - -export const messages = { - selectLanguage: _t( - translations.i18nFeature.selectLanguage, - 'Select Language', // default value - ), -}; diff --git a/src/app/containers/NavBar/Logo.tsx b/src/app/containers/NavBar/Logo.tsx deleted file mode 100644 index 6cfdffc..0000000 --- a/src/app/containers/NavBar/Logo.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components/macro'; - -export function Logo() { - return ( - - React Boilerplate - Create React App Template - - ); -} - -const Wrapper = styled.div` - display: flex; - align-items: center; -`; - -const Title = styled.div` - font-size: 1.25rem; - color: ${p => p.theme.text}; - font-weight: bold; - margin-right: 1rem; -`; - -const Description = styled.div` - font-size: 0.875rem; - color: ${p => p.theme.textSecondary}; - font-weight: normal; -`; diff --git a/src/app/containers/NavBar/Nav.tsx b/src/app/containers/NavBar/Nav.tsx deleted file mode 100644 index f92dac1..0000000 --- a/src/app/containers/NavBar/Nav.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components/macro'; -import { ReactComponent as DocumentationIcon } from './assets/documentation-icon.svg'; -import { ReactComponent as GithubIcon } from './assets/github-icon.svg'; - -export function Nav() { - return ( - - - - Documentation - - - - Github - - - ); -} - -const Wrapper = styled.nav` - display: flex; - margin-right: -1rem; -`; - -const Item = styled.a` - color: ${p => p.theme.primary}; - cursor: pointer; - text-decoration: none; - display: flex; - padding: 0.25rem 1rem; - font-size: 0.875rem; - font-weight: 500; - align-items: center; - - &:hover { - opacity: 0.8; - } - - &:active { - opacity: 0.4; - } - - .icon { - margin-right: 0.25rem; - } -`; diff --git a/src/app/containers/NavBar/__tests__/Logo.test.tsx b/src/app/containers/NavBar/__tests__/Logo.test.tsx deleted file mode 100644 index 354d961..0000000 --- a/src/app/containers/NavBar/__tests__/Logo.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { Logo } from '../Logo'; - -describe('', () => { - it('should match snapshot', () => { - const logo = render(); - expect(logo.container.firstChild).toMatchSnapshot(); - }); -}); diff --git a/src/app/containers/NavBar/__tests__/Nav.test.tsx b/src/app/containers/NavBar/__tests__/Nav.test.tsx deleted file mode 100644 index 9d47a58..0000000 --- a/src/app/containers/NavBar/__tests__/Nav.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { Nav } from '../Nav'; -import { MemoryRouter } from 'react-router-dom'; - -describe('