v1.0.4

.github/workflows/deploy.yml

@@ -0,0 +1,68 @@
+name: Deploy to Production Environment
+
+# This workflow will trigger on any tag/release created on *any* branch
+# Make sure to create tags/releases only from the "master" branch for consistency
+on:
+  release:
+    types: [published]
+
+jobs:
+  lint-client:
+    name: Lint and Export client
+    runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_BASE_PATH: ${{ secrets.NEXT_PUBLIC_BASE_PATH }}
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Use NodeJS v18.14.2
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.14.2
+      - name: Install Dependencies
+        run: |
+          cd client
+          npm install
+
+      - name: Lint Client
+        run: |
+          cd client
+          npm run lint
+
+      - name: Export static files
+        run: |
+          cd client
+          npm run export
+          mv out/404/index.html out/404.html
+
+      - name: Disable Jekyll
+        run: |
+          cd client
+          touch out/.nojekyll
+
+      - name: Archive Development Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: main-out
+          path: client/out
+          retention-days: 3
+
+  deploy-client:
+    name: Deploy client to Github Pages
+    needs: lint-client
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download Artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: main-out
+
+      - name: List files for publish
+        run: ls -l -a
+
+      - name: Deploy to Github Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./
+          publish_branch: gh-pages

README.md

@@ -32,8 +32,9 @@ The following dependecies are used for this project. Feel free to experiment usi
 ### Manual Installation and Usage
 
 1. Navigate to the **/client** directory from the commandline.
-2. Run: `npm run install`
-3. Run: `npm run dev`
+2. Create a `.env` file from the `/client/.env.example` file. Copy it's content when working on localhost.
+3. Run: `npm run install`
+4. Run: `npm run dev`
 
 ### Localhost Development Using Docker
 

client/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_PATH=''

client/.eslintrc.json

@@ -2,9 +2,15 @@
   "env": {
     "node": true,
     "browser": true,
-    "es6": true
+    "commonjs": true,
+    "es2021": true
   },
-  "extends": "next/core-web-vitals",
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
   "plugins": [
      "eslint-plugin-react", "eslint-plugin-react-hooks"
   ],
@@ -15,7 +21,10 @@
      "semi": ["error", "never"],
      "no-unused-vars": "error",
      "no-undef": "error",
-     "no-trailing-spaces": "error",
-     "no-console": ["error", { "allow": ["error"] }]
+     // "no-console": ["error", { "allow": ["error"] }],
+     "react/react-in-jsx-scope": "off",
+     "no-restricted-imports": [
+      "error", { "patterns": ["@/features/*/*"] }
+     ]
   }
-}
+}

client/.gitignore

@@ -30,3 +30,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.env

client/README.md

@@ -25,6 +25,8 @@ The following dependecies are used for this project. Feel free to experiment usi
 1. Clone this repository.<br>
 `https://github.com/weaponsforge/react-hooks-playground.git`
 
+2. Create a `.env` file from the `/client/.env.example` file. Copy it's content when working on localhost.
+
 ## Available Scripts
 
 ### `npm run dev`

client/jsconfig.json

@@ -3,10 +3,8 @@
     "paths": {
       "@/*": ["./src/*"],
       "@/hooks/*": ["./src/lib/hooks/*"],
-      "@/public/*": ["./public/*"],
-      "@/services/*": ["./src/lib/services/*"],
-      "@/store/*": ["./src/lib/store/*"],
-      "@/utils/*": ["./src/lib/utils/*"]
+      "@/public/*": ["public/*"],
+      "@/store/*": ["./src/lib/store/*"]
     }
   }
 }

client/next.config.js

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  trailingSlash: true,
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  assetPrefix: `${process.env.NEXT_PUBLIC_BASE_PATH}/`,
+  images: {
+    unoptimized: true
+  },
+  eslint: {
+    dirs: ['src']
+  }
 }
 
 module.exports = nextConfig

client/src/common/layout/page/index.js

@@ -1,6 +1,7 @@
+import PropTypes from 'prop-types'
 import HeadComponent from '../head'
 
-export default function Page ({ children }) {
+function Page ({ children }) {
   return (
     <div style={{
       height: '100vh',
@@ -11,3 +12,10 @@ export default function Page ({ children }) {
     </div>
   )
 }
+
+Page.propTypes = {
+  children: PropTypes.node
+}
+
+export default Page
+

client/src/common/ui/card/index.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import styles from './Card.module.css'
 
 function Card ({ children }) {
@@ -8,4 +9,8 @@ function Card ({ children }) {
   )
 }
 
+Card.propTypes = {
+  children: PropTypes.node
+}
+
 export default Card

client/src/components/home/items.json

@@ -10,5 +10,13 @@
   {
     "name": "useState",
     "link": "/usestate"
+  },
+  {
+    "name": "users",
+    "link": "/users"
+  },
+  {
+    "name": "useReducer",
+    "link": "/usereducer"
   }
 ]

client/src/features/redux/index.js

@@ -0,0 +1,7 @@
+import Redux from './reduxcontainer'
+import TodoListComponent from './todolist'
+
+export {
+  Redux,
+  TodoListComponent
+}

client/src/features/redux/reduxcontainer/index.js

@@ -0,0 +1,27 @@
+import { useDispatch } from 'react-redux'
+import { todoReceived, todoDelete } from '@/lib/store/todos/todoSlice'
+
+import ReduxComponent from './redux'
+
+function Redux () {
+  const dispatch = useDispatch()
+
+  const addTodo = () => {
+    dispatch(todoReceived({
+      text: 'Hello, world!'
+    }))
+  }
+
+  const deleteTodo = (id) => {
+    dispatch(todoDelete(id))
+  }
+
+  return (
+    <ReduxComponent
+      addTodo={addTodo}
+      deleteTodo={deleteTodo}
+    />
+  )
+}
+
+export default Redux

client/src/components/redux/index.js → client/src/features/redux/reduxcontainer/redux.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import Page from '@/common/layout/page'
 import Card from '@/common/ui/card'
-import TodoListComponent from '@/domain/redux/todolist'
+import TodoListComponent from '../todolist'
 
 function ReduxComponent ({
   addTodo,

client/src/features/usereducer/components/contactform/index.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types'
+
+function ContactForm ({ submitForm }) {
+  return (
+    <form onSubmit={submitForm}>
+      <h4>Add Todo</h4>
+      <input type="text" id="title" placeholder="Enter title" /><br />
+      <button type="submit">Add</button>
+    </form>
+  )
+}
+
+ContactForm.propTypes = {
+  submitForm: PropTypes.func
+}
+
+export default ContactForm

client/src/features/usereducer/components/counter/index.js

@@ -0,0 +1,18 @@
+import { useState } from 'react'
+
+function Counter () {
+  const [count, setCount] = useState(0)
+  console.log('counter render')
+
+  return (
+    <div>
+      <h3>Counter</h3>
+      <p>{count}</p>
+      <button onClick={() => setCount(prev => prev += 1)}>
+        Increment
+      </button>
+    </div>
+  )
+}
+
+export default Counter

client/src/features/usereducer/components/counterlist/index.js

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import TodoList from '../todolist'
+
+// Shows unoptimized rerenders from TodoList
+function CounterList () {
+  const [count, setCount] = useState(0)
+  console.log('counter render')
+
+  return (
+    <div>
+      <h3>CounterList</h3>
+      <p>Features a Todo list using useReducer and a counter increment button/display. The Todo List component is a child of the Counter component.</p>
+
+      <h3>Count</h3>
+      <p>{count}</p>
+      <button onClick={() => setCount(prev => prev += 1)}>
+        Increment
+      </button>
+
+      <TodoList />
+    </div>
+  )
+}
+
+export default CounterList

client/src/features/usereducer/components/counterlistmemo/index.js

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import TodoListMemo from '../todolistmemo'
+
+// Optimize rerenders by wrapping TodoListMemo in a memo() function
+// Even it the containing parent's local states changes
+function CounterListMemo () {
+  const [count, setCount] = useState(0)
+  console.log('counter render')
+
+  return (
+    <div>
+      <h3>CounterListMemo</h3>
+      <p>Features a Todo list using useReducer and a counter increment button/display. The Todo List component is a child of the Counter component. The TodoList component is wrapped by React.memo().</p>
+
+      <h3>Count</h3>
+      <p>{count}</p>
+      <button onClick={() => setCount(prev => prev += 1)}>
+        Increment
+      </button>
+
+      <TodoListMemo />
+    </div>
+  )
+}
+
+export default CounterListMemo

client/src/features/usereducer/components/counterlistoptimized/index.js

@@ -0,0 +1,17 @@
+import Counter from '../counter'
+import TodoList from '../todolist'
+
+// Optimized rendering by lowering the states
+function CounterListOptimized () {
+  return (
+    <div>
+      <h3>CounterListOptimized</h3>
+      <p>Features a Todo list using useReducer and a counter increment button/display. The Todo List component and Counter component are children of a parent component.</p>
+
+      <Counter />
+      <TodoList />
+    </div>
+  )
+}
+
+export default CounterListOptimized

client/src/features/usereducer/components/todolist/actions.js

@@ -0,0 +1,13 @@
+const ACTION_TYPES = {
+  CREATE: 'create',
+  READ: 'read',
+  UPDATE: 'update',
+  DELETE: 'delete',
+  LIST: 'list',
+  CLEAR_LIST: 'clear_list',
+  RESET_LIST: 'reset_list'
+}
+
+export {
+  ACTION_TYPES
+}