Change to TypeScript

Author: JT501

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "env": {
+        "browser": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "standard"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-use-before-define": "off"
+    }
+}

package-lock.json

@@ -7,15 +7,21 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/classnames": "^2.2.10",
+    "@types/jest": "^26.0.14",
+    "@types/node": "^14.11.2",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
     "classnames": "^2.2.6",
-    "date-fns": "^2.12.0",
+    "date-fns": "^2.16.1",
     "faker": "^4.1.0",
     "miragejs": "^0.1.35",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^3.4.3",
     "seedrandom": "^3.0.5",
     "txtgen": "^2.2.4"
   },
@@ -41,6 +47,12 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.0.2"
+    "@types/react-router-dom": "^5.1.5",
+    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@typescript-eslint/parser": "^4.3.0",
+    "eslint": "^6.6.0",
+    "prettier": "^2.0.2",
+    "standardx": "^5.0.0",
+    "typescript": "^4.0.3"
   }
 }

package.json

@@ -1,5 +1,4 @@
 module.exports = {
-    "semi": false,
-    "singleQuote": true
+  semi: false,
+  singleQuote: true
 }
-  

prettier.config.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Redirect
+} from 'react-router-dom'
+
+import { Navbar } from './app/Navbar'
+import { PostsList } from './features/posts/PostsList'
+import { AddPostForm } from './features/posts/AddPostForm'
+import { SinglePostPage } from './features/posts/SinglePostPage'
+import { EditPostForm } from './features/posts/EditPostForm'
+import UserPage from './features/users/UserPage'
+import { NotificationsList } from './features/notifications/notificationList'
+import UsersList from './features/users/UsersList'
+
+function App () {
+  return (
+    <Router>
+      <Navbar />
+      <div className='App'>
+        <Switch>
+          <Route
+            exact
+            path='/'
+            render={() => (
+              <>
+                <AddPostForm />
+                <PostsList />
+              </>
+            )}
+          />
+          <Route exact path='/posts/:postId' component={SinglePostPage} />
+          <Route exact path='/editPost/:postId' component={EditPostForm} />
+          <Route exact path='/users' component={UsersList} />
+          <Route exact path='/users/:userId' component={UserPage} />
+          <Route exact path='/notifications' component={NotificationsList} />
+          <Redirect to='/' />
+        </Switch>
+      </div>
+    </Router>
+  )
+}
+
+export default App

src/App.js

@@ -1,16 +1,16 @@
 // A tiny wrapper around fetch(), borrowed from
 // https://kentcdodds.com/blog/replace-axios-with-a-simple-custom-fetch-wrapper
 
-export async function client(endpoint, { body, ...customConfig } = {}) {
+export async function client (endpoint, { body, ...customConfig } = {}) {
   const headers = { 'Content-Type': 'application/json' }
 
   const config = {
     method: body ? 'POST' : 'GET',
     ...customConfig,
     headers: {
       ...headers,
-      ...customConfig.headers,
-    },
+      ...customConfig.headers
+    }
   }
 
   if (body) {

src/App.tsx

@@ -5,7 +5,7 @@ import {
   belongsTo,
   hasMany,
   association,
-  RestSerializer,
+  RestSerializer
 } from 'miragejs'
 
 import { nanoid } from '@reduxjs/toolkit'
@@ -16,14 +16,14 @@ import { parseISO } from 'date-fns'
 import seedrandom from 'seedrandom'
 
 const IdSerializer = RestSerializer.extend({
-  serializeIds: 'always',
+  serializeIds: 'always'
 })
 
 // Set up a seeded random number generator, so that we get
 // a consistent set of users / entries each time the page loads.
 // This can be reset by deleting this localStorage value,
 // or turned off by setting `useSeededRNG` to false.
-let useSeededRNG = true
+const useSeededRNG = true
 
 let rng = seedrandom()
 
@@ -44,7 +44,7 @@ if (useSeededRNG) {
   faker.seed(seedDate.getTime())
 }
 
-function getRandomInt(min, max) {
+function getRandomInt (min, max) {
   min = Math.ceil(min)
   max = Math.floor(max)
   return Math.floor(rng() * (max - min + 1)) + min
@@ -58,14 +58,15 @@ const randomFromArray = (array) => {
 const notificationTemplates = [
   'poked you',
   'says hi!',
-  `is glad we're friends`,
-  'sent you a gift',
+  'is glad we\'re friends',
+  'sent you a gift'
 ]
 
+// eslint-disable-next-line no-new
 new Server({
-  routes() {
+  routes () {
     this.namespace = 'fakeApi'
-    //this.timing = 2000
+    this.timing = 2000
 
     this.resource('users')
     this.resource('posts')
@@ -120,7 +121,7 @@ new Server({
           message: template,
           user: user.id,
           read: false,
-          isNew: true,
+          isNew: true
         }
       })
 
@@ -129,86 +130,86 @@ new Server({
   },
   models: {
     user: Model.extend({
-      posts: hasMany(),
+      posts: hasMany()
     }),
     post: Model.extend({
       user: belongsTo(),
-      comments: hasMany(),
+      comments: hasMany()
     }),
     comment: Model.extend({
-      post: belongsTo(),
+      post: belongsTo()
     }),
-    notification: Model.extend({}),
+    notification: Model.extend({})
   },
   factories: {
     user: Factory.extend({
-      id() {
+      id () {
         return nanoid()
       },
-      firstName() {
+      firstName () {
         return faker.name.firstName()
       },
-      lastName() {
+      lastName () {
         return faker.name.lastName()
       },
-      name() {
+      name () {
         return faker.name.findName(this.firstName, this.lastName)
       },
-      username() {
+      username () {
         return faker.internet.userName(this.firstName, this.lastName)
       },
 
-      afterCreate(user, server) {
+      afterCreate (user, server) {
         server.createList('post', 3, { user })
-      },
+      }
     }),
     post: Factory.extend({
-      id() {
+      id () {
         return nanoid()
       },
-      title() {
+      title () {
         return sentence()
       },
-      date() {
+      date () {
         return faker.date.recent(7)
       },
-      content() {
+      content () {
         return article(1)
       },
-      reactions() {
+      reactions () {
         return {
           thumbsUp: 0,
           hooray: 0,
           heart: 0,
           rocket: 0,
-          eyes: 0,
+          eyes: 0
         }
       },
-      afterCreate(post, server) {
-        //server.createList('comment', 3, { post })
+      afterCreate (post, server) {
+        // server.createList('comment', 3, { post })
       },
 
-      user: association(),
+      user: association()
     }),
     comment: Factory.extend({
-      id() {
+      id () {
         return nanoid()
       },
-      date() {
+      date () {
         return faker.date.past(2)
       },
-      text() {
+      text () {
         return paragraph()
       },
-      post: association(),
-    }),
+      post: association()
+    })
   },
   serializers: {
     user: IdSerializer,
     post: IdSerializer,
-    comment: IdSerializer,
+    comment: IdSerializer
   },
-  seeds(server) {
+  seeds (server) {
     server.createList('user', 3)
-  },
+  }
 })