First bit of work:

* login
* login state management
* API baseline code
* load tracks
* show tracks
* basic routing
* basic styling
* add react-semantic-ui
* add typescript

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.eslintcache

package.json

@@ -6,13 +6,27 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.25",
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.0",
+    "node-sass": "^4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "redux": "^4.0.5",
+    "redux-localstorage": "^0.4.1",
+    "rxjs": "^6.6.3",
+    "rxjs-hooks": "^0.6.2",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.0.2",
+    "typescript": "^4.1.4",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -34,5 +48,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "proxy": "http://localhost:3000",
+  "port": 3001,
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.7"
   }
 }

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +1,196 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import {connect} from 'react-redux'
+import {Item, Tab, Button, Loader, Pagination, Icon} from 'semantic-ui-react'
+import {useObservable} from 'rxjs-hooks'
+import {BrowserRouter as Router, Switch, Route, Link, useParams, useHistory, useRouteMatch} from 'react-router-dom'
+import {of, from, concat} from 'rxjs'
+import {map, switchMap, distinctUntilChanged, debounceTime} from 'rxjs/operators'
+import _ from 'lodash'
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import {Page} from './components'
+import styles from './App.module.scss'
+import api from './api'
+
+import {LoginPage, LogoutPage, NotFoundPage} from './pages'
+import {useQueryParam, stringifyParams} from './query.ts'
+
+function TracksPageTabs() {
+  const history = useHistory()
+  const panes = React.useMemo(
+    () => [
+      {menuItem: 'Global Feed', url: '/'},
+      {menuItem: 'Your Feed', url: '/my-tracks'},
+    ],
+    []
+  )
+
+  const onTabChange = React.useCallback(
+    (e, data) => {
+      history.push(panes[data.activeIndex].url)
+    },
+    [history, panes]
+  )
+
+  const isFeedPage = useRouteMatch('/my-tracks')
+  const activeIndex = isFeedPage ? 1 : 0
+
+  return <Tab menu={{secondary: true, pointing: true}} {...{panes, onTabChange, activeIndex}} />
 }
 
-export default App;
+function TrackList({path}) {
+  const [page, setPage] = useQueryParam('page', 1)
+
+  const privateFeed = path === '/my-tracks'
+  const pageSize = 20
+
+  const data = useObservable(
+    (_$, inputs$) =>
+      inputs$.pipe(
+        map(([page, privateFeed]) => {
+          const url = '/tracks' + (privateFeed ? '/feed' : '')
+          const params = {limit: pageSize, offset: pageSize * (page - 1)}
+          return {url, params}
+        }),
+        debounceTime(100),
+        distinctUntilChanged(_.isEqual),
+        switchMap((request) => concat(of(null), from(api.fetch(request.url + '?' + stringifyParams(request.params)))))
+      ),
+    null,
+    [page, privateFeed]
+  )
+
+  const {tracks, trackCount} = data || {}
+  const loading = !data
+
+  const totalPages = trackCount / pageSize
+
+  return (
+    <div>
+      <Loader content="Loading" active={loading} />
+      {!loading && totalPages > 1 && <Pagination activePage={page} onPageChange={setPage} totalPages={totalPages} />}
+
+      {tracks && (
+        <Item.Group divided>
+          {tracks.map((track) => (
+            <Item key={track.slug}>
+              <Item.Image size="tiny" src={track.author.image} />
+              <Item.Content>
+                <Item.Header as="a">{track.title}</Item.Header>
+                <Item.Meta>
+                  Created by {track.author.username} on {track.createdAt}
+                </Item.Meta>
+                <Item.Description>{track.description}</Item.Description>
+                <Item.Extra>
+                  {track.visible ? (
+                    <>
+                      <Icon color="blue" name="eye" fitted /> Public
+                    </>
+                  ) : (
+                    <>
+                      <Icon name="eye slash" fitted /> Private
+                    </>
+                  )}
+                </Item.Extra>
+              </Item.Content>
+            </Item>
+          ))}
+        </Item.Group>
+      )}
+    </div>
+  )
+}
+
+function PublicTracksPage({login}) {
+  return (
+    <Page>
+      {login ? <TracksPageTabs /> : null}
+      <TrackList path="/" />
+    </Page>
+  )
+}
+
+function OwnTracksPage({login}) {
+  return (
+    <Page>
+      {login ? <TracksPageTabs /> : null}
+      <TrackList path="/my-tracks" />
+    </Page>
+  )
+}
+
+function Track() {
+  let {slug} = useParams()
+  return <h3>Track {slug}</h3>
+}
+
+const App = connect((state) => ({login: state.login}))(function App({login}) {
+  // update the API header on each render, the App is rerendered when the login changes
+  if (login) {
+    api.setAuthorizationHeader('Token ' + login.token)
+  } else {
+    api.setAuthorizationHeader(null)
+  }
+
+  return (
+    <Router>
+      <div>
+        <header className={styles.header}>
+          <div className={styles.pageTitle}>OpenBikeSensor</div>
+          <nav className={styles.menu}>
+            <ul>
+              <li>
+                <Link to="/">Feed</Link>
+              </li>
+              <li>
+                <Link to="https://openbikesensor.org/">About</Link>
+              </li>
+              {login ? (
+                <>
+                  <li>
+                    <Link to="/settings">Settings</Link>
+                  </li>
+                  <li>
+                    <Button as={Link} to="/logout">
+                      Logout
+                    </Button>
+                  </li>
+                </>
+              ) : (
+                <>
+                  <li>
+                    <Button as={Link} to="/login">
+                      Login
+                    </Button>
+                  </li>
+                </>
+              )}
+            </ul>
+          </nav>
+        </header>
+
+        <Switch>
+          <Route path="/" exact>
+            <PublicTracksPage {...{login}} />
+          </Route>
+          <Route path="/my-tracks">
+            <OwnTracksPage {...{login}} />
+          </Route>
+          <Route path={`/track/:slug`}>
+            <Track />
+          </Route>
+          <Route path="/login">
+            <LoginPage />
+          </Route>
+          <Route path="/logout">
+            <LogoutPage />
+          </Route>
+          <Route>
+            <NotFoundPage />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  )
+})
+
+export default App

src/App.module.scss

@@ -0,0 +1,49 @@
+@import "styles.scss";
+
+.App {
+  text-align: center;
+}
+
+.header {
+  @include container;
+  height: 56px;
+  display: flex;
+  align-items: center;
+}
+
+.pageTitle {
+  font-family: "Roboto Slab";
+  font-weight: 600;
+  font-size: 18pt;
+}
+
+.menu {
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex: 1 0 auto;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    justify-content: flex-end;
+    align-items: baseline;
+
+    li {
+      padding: 1rem;
+      display: block;
+
+      a {
+        color: #877;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/api.js

@@ -0,0 +1,21 @@
+class API {
+  setAuthorizationHeader(authorization) {
+    this.authorization = authorization
+  }
+
+  async fetch(url, options = {}) {
+    const response = await window.fetch('/api' + url, {
+      ...options,
+      headers: {
+        ...(options.headers || {}),
+        Authorization: this.authorization,
+      },
+    })
+
+    return await response.json()
+  }
+}
+
+const api = new API()
+
+export default api

src/components/Page/Page.module.scss

@@ -0,0 +1,6 @@
+@import "../../styles.scss";
+
+.page {
+  @include container;
+  margin-top: 32px;
+}

src/components/Page/index.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import styles from './Page.module.scss'
+
+export default function Page({children}) {
+  return <main className={styles.page}>{children}</main>
+}

src/components/index.js

@@ -0,0 +1 @@
+export {default as Page} from './Page'

src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: "Noto Sans", "Roboto", -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: "Noto Sans Mono", source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

src/index.js

@@ -1,17 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import 'semantic-ui-css/semantic.min.css'
+import './index.css'
+import App from './App'
+
+import {Provider} from 'react-redux'
+import {compose, createStore} from 'redux'
+import persistState from 'redux-localstorage'
+
+import rootReducer from './reducers'
+
+const enhancer = compose(persistState(['login']))
+
+const store = createStore(rootReducer, undefined, enhancer)
 
 ReactDOM.render(
-  <React.StrictMode>
+  <Provider store={store}>
     <App />
-  </React.StrictMode>,
+  </Provider>,
   document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+)

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/pages/LoginPage.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {Form, Button} from 'semantic-ui-react'
+import {Redirect} from 'react-router-dom'
+
+import {login as loginAction} from '../reducers/login'
+import styles from './LoginPage.module.scss'
+import {Page} from '../components'
+
+async function fetchLogin(email, password) {
+  const response = await window.fetch('/api/users/login', {
+    body: JSON.stringify({user: {email, password}}),
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+  })
+
+  const result = await response.json()
+
+  if (result.user) {
+    return result.user
+  } else {
+    throw new Error('invalid credentials')
+  }
+}
+
+const LoginPage = connect(
+  (state) => ({loggedIn: Boolean(state.login)}),
+  (dispatch) => ({
+    dispatchLogin: (user) => dispatch(loginAction(user)),
+  })
+)(function LoginPage({loggedIn, dispatchLogin}) {
+  const [email, setEmail] = React.useState('')
+  const [password, setPassword] = React.useState('')
+  const onChangeEmail = React.useCallback((e) => setEmail(e.target.value), [])
+  const onChangePassword = React.useCallback((e) => setPassword(e.target.value), [])
+
+  const onSubmit = React.useCallback(() => fetchLogin(email, password).then(dispatchLogin), [
+    email,
+    password,
+    dispatchLogin,
+  ])
+
+  return loggedIn ? (
+    <Redirect to="/" />
+  ) : (
+    <Page>
+      <Form className={styles.loginForm} onSubmit={onSubmit}>
+        <h2>Login</h2>
+        <Form.Field>
+          <label>e-Mail</label>
+          <input value={email} onChange={onChangeEmail} />
+        </Form.Field>
+        <Form.Field>
+          <label>Password</label>
+          <input type="password" value={password} onChange={onChangePassword} />
+        </Form.Field>
+        <Button type="submit">Submit</Button>
+      </Form>
+    </Page>
+  )
+})
+
+export default LoginPage

src/pages/LoginPage.module.scss

@@ -0,0 +1,4 @@
+.loginForm.loginForm {
+  max-width: 400px;
+  margin: 0 auto;
+}

src/pages/LogoutPage.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {Redirect} from 'react-router-dom'
+
+import {logout as logoutAction} from '../reducers/login'
+
+const LogoutPage = connect(
+  (state) => ({loggedIn: Boolean(state.login)}),
+  (dispatch) => ({
+    dispatchLogout: () => dispatch(logoutAction()),
+  })
+)(function LogoutPage({loggedIn, dispatchLogout}) {
+  React.useEffect(() => {
+    dispatchLogout()
+  })
+
+  return loggedIn ? null : <Redirect to="/" />
+})
+
+export default LogoutPage

src/pages/NotFoundPage.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Button} from 'semantic-ui-react'
+import {useHistory} from 'react-router-dom'
+
+import {Page} from '../components'
+
+export default function NotFoundPage() {
+  const history = useHistory()
+  return (
+    <Page>
+      <h2>Page not found</h2>
+      <p>You know what that means...</p>
+      <Button onClick={history.goBack.bind(history)}>Go back</Button>
+    </Page>
+  )
+}

src/pages/index.js

@@ -0,0 +1,3 @@
+export {default as LoginPage} from './LoginPage'
+export {default as LogoutPage} from './LogoutPage'
+export {default as NotFoundPage} from './NotFoundPage'

src/query.ts

@@ -0,0 +1,81 @@
+import {useMemo} from 'react'
+import {useHistory} from 'react-router-dom'
+
+type QueryValue = string | number
+type QueryParams = {[key: string]: QueryValue}
+
+export function parseValue(value: string): null | QueryValue {
+  // empty or `-` values should be represented as `null`
+  if (value === '-' || value === '') {
+    return null
+  }
+
+  // `isNaN` understands numeric strings as numbers, but also detects empty
+  // strings and `null` as such. We only want to parse strings that are
+  // numeric and not empty, therefore this check is a bit more complicated.
+  if (typeof value === 'string' && value !== '' && !isNaN(Number(value))) {
+    return parseFloat(value)
+  }
+
+  return value
+}
+
+export function parseQuery(search: string): QueryParams {
+  const result: QueryParams = {}
+
+  const params = new URLSearchParams(search)
+  for (const entry of params.entries()) {
+    const [key, value_] = entry
+    const v = parseValue(value_)
+    if (v != null) {
+      result[key] = v
+    }
+  }
+  return result
+}
+
+export const stringifyParams = (params: Record<string, any>) => {
+  if (!params) {
+    return ''
+  }
+
+  const usp = new URLSearchParams()
+  for (const [key, value] of Object.entries(params)) {
+    usp.append(key, typeof value === 'object' ? JSON.stringify(value) : value)
+  }
+  return usp.toString()
+}
+
+export function useQueryParam<T extends QueryValue>(
+  name: string,
+  defaultValue: T | null = null,
+  convert: (t: T | null) => T | null = (x) => x
+): [T, (newValue: T) => void] {
+  const history = useHistory()
+  const {[name]: value = defaultValue} = (parseQuery(history.location.search) as unknown) as {
+    [name: string]: T
+  }
+  const setter = useMemo(
+    () => (newValue: T) => {
+      // We're re-parsing the query here, because it might have been
+      // changed simulatenously with this call, and the
+      // history.location.search will already be updated, but react might
+      // not have rerendered yet. Yes, this is access to some global
+      // state, but that is okay, since there is just one browser history
+      // at any time.
+      const {[name]: _oldValue, ...queryParams} = parseQuery(history.location.search)
+
+      const newQueryParams = {
+        ...queryParams,
+        ...(newValue == null || (newValue as any) === defaultValue ? {} : {[name]: newValue}),
+      }
+
+      const queryString = stringifyParams(newQueryParams)
+      history.replace({...history.location, search: '?' + queryString})
+    },
+    [name, history, defaultValue]
+  )
+
+  const result: T = (convert(value) ?? defaultValue) as any
+  return [result, setter]
+}

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/reducers/index.js

@@ -0,0 +1,5 @@
+import {combineReducers} from 'redux'
+
+import login from './login'
+
+export default combineReducers({login})

src/reducers/login.js

@@ -0,0 +1,20 @@
+const initialState = null
+
+export function login(user) {
+  return {type: 'LOGIN.LOGIN', payload: {user}}
+}
+
+export function logout() {
+  return {type: 'LOGIN.LOGOUT'}
+}
+
+export default function loginReducer(state = initialState, action) {
+  switch (action.type) {
+    case 'LOGIN.LOGIN':
+      return action.payload.user
+    case 'LOGIN.LOGOUT':
+      return null
+    default:
+      return state
+  }
+}

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/styles.scss

@@ -0,0 +1,4 @@
+@mixin container {
+  max-width: 1000px;
+  margin: 0 auto;
+}

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "downlevelIteration": true
+  },
+  "include": [
+    "src"
+  ]
+}