chore: Refactor - group similar components in a features directory.

Author: weaponsforge

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/.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/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 renamed to 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,