Merge pull request #3 from ChrisUser/feature/patch-1

Add React project layout
ChrisUser · Feb 11, 2023 · 7ba8065 · 7ba8065
2 parents 431fcd1 + d832e72
commit 7ba8065
Show file tree

Hide file tree

Showing 35 changed files with 9,937 additions and 31 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,41 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
+    plugins: ['@typescript-eslint', 'react-hooks', 'prettier'],
+    parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true
+        }
+    },
+    env: {
+        browser: true,
+        node: true,
+        es6: true,
+        jest: true
+    },
+    rules: {
+        "no-control-regex": 0,
+        'no-undef': 0,
+        'no-unused-vars': 'off',
+        'react/prop-types': 0,
+        '@typescript-eslint/camelcase': 0,
+        '@typescript-eslint/no-unused-vars': 1,
+        '@typescript-eslint/no-use-before-define': 0,
+        '@typescript-eslint/ban-ts-comment': 0,
+        '@typescript-eslint/ban-ts-ignore': 0,
+        '@typescript-eslint/explicit-member-accessibility': 0,
+        '@typescript-eslint/member-delimiter-style': 0,
+        '@typescript-eslint/no-empty-function': 0,
+        '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'warn'
+    },
+    settings: {
+        react: {
+            version: 'detect'
+        }
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+
+/coverage
+
+# production
+
+/build
+
+# misc
+
+.eslintcache
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log\*
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+    "printWidth": 160,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "semi": false,
+    "trailingComma": "none",
+    "bracketSpacing": true
+}
diff --git a/gitignore b/gitignore
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "gpt-recommender",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "axios": "^1.3.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0",
+    "react-scripts": "5.0.1",
+    "sass": "^1.58.0",
+    "sass-loader": "^13.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint --cache .",
+    "format": "prettier --check ."
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    "defaults",
+    "not IE 11"
+  ],
+  "devDependencies": {
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.11.19",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "typescript": "^4.9.5"
+  },
+  "homepage": ".",
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  }
+}
diff --git a/public/.htaccess b/public/.htaccess
@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+    Options -MultiViews
+
+    RewriteEngine On
+
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.html [QSA,L]
+</IfModule>
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/scripts/main.js b/scripts/main.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/integration/react'
+import RootComponent from './RootComponent'
+import { persistor, store } from './store/reducers/store'
+
+const App: React.FC = () => {
+    return (
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <RootComponent />
+            </PersistGate>
+        </Provider>
+    )
+}
+
+export default App
diff --git a/src/RootComponent.tsx b/src/RootComponent.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
+import HomePage from './pages/HomePage'
+import NotFoundPage from './pages/NotFoundPage'
+import { ROUTES } from './resources/routes-constants'
+import './styles/main.sass'
+
+const RootComponent: React.FC = () => {
+    return (
+        <Router>
+            <Routes>
+                <Route path="*" element={<NotFoundPage />} />
+                <Route path={ROUTES.HOMEPAGE_ROUTE} element={<HomePage />} />
+            </Routes>
+        </Router>
+    )
+}
+
+export default RootComponent
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+const root = createRoot(document.getElementById('root')!) // createRoot(container!) if you use TypeScript
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+)
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister()
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const HomePage: React.FC = () => {
+    return (
+        <div style={{ position: 'relative', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+            <h1 style={{ fontSize: '4em' }}>GPT Recommender</h1>
+        </div>
+    )
+}
+
+export default HomePage
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ROUTES } from '../resources/routes-constants'
+
+const NotFoundPage: React.FC = () => {
+    const navigate = useNavigate()
+
+    /**
+     * Call this function to redirect the user to the homepage.
+     */
+    const redirectToHomePage = () => {
+        navigate(ROUTES.HOMEPAGE_ROUTE)
+    }
+
+    return (
+        <div style={{ position: 'relative', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+            <h1 style={{ fontSize: '4em' }}>Oops 404!</h1>
+            <span style={{ cursor: 'pointer' }} onClick={() => redirectToHomePage()}>
+                Homepage
+            </span>
+        </div>
+    )
+}
+
+export default NotFoundPage
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/resources/api-constants.ts b/src/resources/api-constants.ts
@@ -0,0 +1,5 @@
+const baseUrl = 'https://exampleurl'
+
+export const getData = (userId: number): string => {
+    return baseUrl + '/data/' + userId
+}
diff --git a/src/resources/routes-constants.ts b/src/resources/routes-constants.ts
@@ -0,0 +1,3 @@
+export const ROUTES = {
+    HOMEPAGE_ROUTE: '/'
+}