feat(codestyle): refactored code to use package by feature

README.md

@@ -2,6 +2,34 @@
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+## Project Structure
+
+```shell
+./src
+├── assets # assets folder contains all the static files (images, fonts, etc).
+├── components # shared components
+├── config # global configuration, env variables etc.
+│   ├── Env.ts
+│   └── i18n 
+├── features
+│   ├── feature # 'feature'
+│   │   ├── api # API folder contains http service calls 
+│   │   ├── assets # 'feature' assets folder
+│   │   ├── components # 'feature' components
+│   │   ├── hooks # 'feature' hooks
+│   │   ├── index.ts # entry point for 'feature' public API
+│   │   ├── store # 'feature' state stores contains slices, sagas, etc.
+│   │   └── types # 'feature' typescript types  
+│   └── another_feature # 'another_feature'
+├── hooks # shared hooks
+├── libs  # libraries imported or exported that can be used in different projects 
+│   └── ui
+├── pages  # contains all application pages
+├── routes # routes configuration
+├──  store # root store and store settings
+└── App.tsx # Application entrypoint  
+```
+
 ## Getting Started
 
 ### Development
@@ -72,7 +100,6 @@ npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
 
 [//]: # (TODO:  add readme for release via Standard Version)
 
-
 ## References
 
 * [React documentation](https://reactjs.org/)
@@ -100,4 +127,5 @@ npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
 * [React Hook Form - typescript Support](https://react-hook-form.com/ts)
 * [Redux Style Guide](https://redux.js.org/style-guide/style-guide#write-action-types-as-domaineventname)
 * [MUI - theme switcher](https://mui.com/customization/dark-mode/)
-* [Level up your CSS linting using Stylelint](https://blog.logrocket.com/using-stylelint-improve-lint-css-scss-sass/)
+* [Level up your CSS linting using Stylelint](https://blog.logrocket.com/using-stylelint-improve-lint-css-scss-sass/)
+* [Create React App: A quick setup guide](https://blog.logrocket.com/create-react-app-a-quick-setup-guide-b812f0aad03c/)

src/store/api/post.api.ts → src/features/posts/api/index.ts

@@ -1,5 +1,5 @@
-import { Env } from '../../constants/Env'
-import { Post } from '../../libs/models/post.model'
+import { Env } from '../../../config/Env'
+import { Post } from '../types'
 
 export const getPosts = async (): Promise<Post[]> =>
   fetch(`${Env.POSTS_API_BASE_URL}`).then(res => res.json())

src/components/Posts/PostCardView.tsx → src/features/posts/components/PostCardView.tsx

@@ -3,15 +3,16 @@ import Typography from '@mui/material/Typography'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Post } from '../../libs/models/post.model'
+import logoImage from '../assets/imgs/logo192.png'
+import { Post } from '../types'
 
-type PostCardViewProps = {
+export type PostCardViewProps = {
   post: Post
   onDeleteClick: (post: Post) => void
   onUpdateClick: (post: Post) => void
 }
 
-const PostCardView = (props: PostCardViewProps) => {
+export const PostCardView = (props: PostCardViewProps) => {
   const { t } = useTranslation()
 
   const { post, onDeleteClick, onUpdateClick } = props
@@ -25,7 +26,7 @@ const PostCardView = (props: PostCardViewProps) => {
   return (
     <>
       <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-        <CardMedia component="img" image="https://source.unsplash.com/random" alt="random" />
+        <CardMedia component="img" src={logoImage} alt="random" />
         <CardContent sx={{ flexGrow: 1 }}>
           <Typography gutterBottom variant="h5" component="h2">
             {post.title}
@@ -44,5 +45,3 @@ const PostCardView = (props: PostCardViewProps) => {
     </>
   )
 }
-
-export default PostCardView

src/containers/PostContainer.tsx → src/features/posts/components/PostContainer.tsx

@@ -1,11 +1,12 @@
 import Container from '@mui/material/Container'
 import React, { useEffect } from 'react'
 
-import PostForm from '../components/Posts/PostForm'
-import PostList from '../components/Posts/PostList'
 import { usePostService } from '../hooks'
 
-const PostContainer = () => {
+import { PostForm } from './PostForm'
+import { PostList } from './PostList'
+
+export const PostContainer = () => {
   const { posts, deletePost, updatePost, fetchAllPosts, createPost } = usePostService()
 
   useEffect(() => {
@@ -22,5 +23,3 @@ const PostContainer = () => {
     </>
   )
 }
-
-export default PostContainer

src/components/Posts/PostForm.tsx → src/features/posts/components/PostForm.tsx

@@ -6,19 +6,15 @@ import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import * as Yup from 'yup'
 
-import { FormTextField } from '../../libs/ui/FormTextField'
+import { FormTextField } from '../../../libs/ui/components/FormTextField'
+import { PostFormInput } from '../types'
 
-type PostFormProps = {
+export type PostFormProps = {
   defaultValues?: PostFormInput
   onSubmitClick(data: PostFormInput): void
 }
 
-export interface PostFormInput {
-  title: string
-  body: string
-}
-
-const PostForm = (props: PostFormProps) => {
+export const PostForm = (props: PostFormProps) => {
   const { t } = useTranslation()
 
   const {
@@ -55,5 +51,3 @@ const PostForm = (props: PostFormProps) => {
     </Stack>
   )
 }
-
-export default PostForm

src/components/Posts/PostList.tsx → src/features/posts/components/PostList.tsx

@@ -1,17 +1,17 @@
 import { Grid } from '@mui/material'
 import React from 'react'
 
-import { Post } from '../../libs/models/post.model'
+import { Post } from '../types'
 
-import PostCardView from './PostCardView'
+import { PostCardView } from './PostCardView'
 
-type PostListProps = {
+export type PostListProps = {
   posts: Post[]
   onDeletePost: (post: Post) => void
   onUpdatePost: (post: Post) => void
 }
 
-const PostList = (props: PostListProps) => {
+export const PostList = (props: PostListProps) => {
   const { posts, onDeletePost, onUpdatePost } = props
 
   return (
@@ -26,5 +26,3 @@ const PostList = (props: PostListProps) => {
     </>
   )
 }
-
-export default PostList

src/features/posts/components/index.ts

@@ -0,0 +1,4 @@
+export * from './PostForm'
+export * from './PostList'
+export * from './PostCardView'
+export * from './PostContainer'

src/hooks/usePostService.ts → src/features/posts/hooks/usePostService.ts

@@ -1,11 +1,10 @@
 import { useCallback } from 'react'
 
-import { PostFormInput } from '../components/Posts/PostForm'
-import { Post } from '../libs/models/post.model'
-import { postsActions, selectPosts } from '../store/features/posts/posts.slice'
-import { useAppDispatch, useAppSelector } from '../store/hooks'
+import { useAppDispatch, useAppSelector } from '../../../store/hooks'
+import { postsActions, selectPosts } from '../store'
+import { Post, PostFormInput } from '../types'
 
-type PostServiceOperators = {
+export type PostServiceOperators = {
   posts: Post[]
   createPost: (data: PostFormInput) => void
   fetchAllPosts: () => void

src/features/posts/index.ts

@@ -0,0 +1,4 @@
+export * from './hooks'
+export * from './store'
+export * from './types'
+export * from './components'

src/features/posts/store/index.ts

@@ -0,0 +1,2 @@
+export * from './posts.sagas'
+export * from './posts.slice'

src/store/features/posts/posts.sagas.ts → src/features/posts/store/posts.sagas.ts

@@ -1,7 +1,7 @@
 import { put, takeEvery } from 'redux-saga/effects'
 
-import { Post } from '../../../libs/models/post.model'
-import { createPost, deletePost, getPosts, updatePost } from '../../api/post.api'
+import { createPost, deletePost, getPosts, updatePost } from '../api'
+import { Post } from '../types'
 
 import { postsActions } from './posts.slice'
 

src/store/features/posts/posts.slice.ts → src/features/posts/store/posts.slice.ts

@@ -1,8 +1,8 @@
 // DUCKS pattern
 import { createAction, createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
 
-import { Post } from '../../../libs/models/post.model'
-import type { RootState } from '../../store'
+import type { RootState } from '../../../store/store'
+import { Post } from '../types'
 
 interface PostsState {
   posts: Post[]

src/features/posts/types/index.ts

@@ -0,0 +1,10 @@
+export type Post = {
+  id?: string
+  title: string
+  body: string
+}
+
+export type PostFormInput = {
+  title: string
+  body: string
+}

src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 import App from './App'
-import './i18n'
+import './config/i18n'
 import './index.css'
 import reportWebVitals from './reportWebVitals'
 

src/pages/AboutPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import TitleTypography from '../libs/ui/TitleTypography'
+import TitleTypography from '../libs/ui/components/TitleTypography'
 
 const AboutPage = () => {
   const { t } = useTranslation()

src/pages/HomePage.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import '../App.css'
-import PostContainer from '../containers/PostContainer'
-import TitleTypography from '../libs/ui/TitleTypography'
+import { PostContainer } from '../features/posts'
+import TitleTypography from '../libs/ui/components/TitleTypography'
 
 const HomePage = () => {
   const { t } = useTranslation()

src/routes/index.tsx

@@ -1,18 +1,22 @@
+import React, { Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
 
 import Layout from '../components/Layout'
-import AboutPage from '../pages/AboutPage'
-import HomePage from '../pages/HomePage'
+
+const HomePage = React.lazy(() => import('../pages/HomePage'))
+const AboutPage = React.lazy(() => import('../pages/AboutPage'))
 
 const AppRoutes = () => (
   <>
-    <Routes>
-      <Route element={<Layout />}>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/posts" element={<HomePage />} />
-        <Route path="/about" element={<AboutPage />} />
-      </Route>
-    </Routes>
+    <Suspense fallback={<div>Loading</div>}>
+      <Routes>
+        <Route element={<Layout />}>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/posts" element={<HomePage />} />
+          <Route path="/about" element={<AboutPage />} />
+        </Route>
+      </Routes>
+    </Suspense>
   </>
 )
 

src/store/rootSaga.ts

@@ -1,6 +1,6 @@
 import { all, fork } from 'redux-saga/effects'
 
-import { postsWatcherSaga } from './features/posts/posts.sagas'
+import { postsWatcherSaga } from '../features/posts/store/posts.sagas'
 
 export function* rootSaga() {
   yield all([fork(postsWatcherSaga)])

src/store/store.ts

@@ -4,9 +4,9 @@ import { createBrowserHistory } from 'history'
 import { createReduxHistoryContext } from 'redux-first-history'
 import logger from 'redux-logger'
 
-import { Env } from '../constants/Env'
+import { Env } from '../config/Env'
+import postsReducer from '../features/posts/store/posts.slice'
 
-import postsReducer from './features/posts/posts.slice'
 import { rootSaga } from './rootSaga'
 
 const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({