fix: 🐛 fix problem ssr with persist Gate - Improve services int (#13)

* fix: 🐛 fix problem ssr with persist GAte - Improve services int

* feat: 🎸 completelly remove redux-persist from project

Author: dfiedlerx

.husky/pre-commit

@@ -2,4 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 npx --no-install commitlint --edit $1
+npm run lint:fix
 npx lint-staged

commitlint.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional']
+  extends: ['@commitlint/config-conventional'],
 }

package-lock.json

@@ -9,6 +9,7 @@
     "test": "jest --forceExit --coverage --no-cache --detectOpenHandles --passWithNoTests",
     "test:dev": "jest --watch --forceExit --coverage --no-cache --detectOpenHandles --passWithNoTests",
     "lint": "next lint",
+    "lint:fix": "eslint --fix --ext .js,.jsx,.tsx,.ts .",
     "prepare": "husky install"
   },
   "dependencies": {
@@ -22,7 +23,6 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",
     "react-redux": "^8.1.2",
-    "redux-persist": "^6.0.0",
     "tailwind-variants": "^0.1.13",
     "tailwindcss": "3.3.3"
   },
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/node": "20.4.5",
+    "@types/node": "20.4.6",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
@@ -44,15 +44,15 @@
     "commitlint": "^17.6.7",
     "eslint": "^8.46.0",
     "eslint-config-next": "13.4.12",
-    "eslint-config-prettier": "^8.9.0",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^13.2.3",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "typescript": "5.1.6",
     "web-vitals": "^3.4.0",
     "webpack": "^5.88.2"

package.json

@@ -1,44 +1,8 @@
-'use client'
-
 import { ReactElement } from 'react'
-import Image from 'next/image'
-
-import { api } from '@/redux/api/api'
-import User from '@/types/user/user.type'
-
-export default function Page(): ReactElement {
-  const { isLoading, isFetching, data, error } = api.useGetUsersQuery(null)
 
-  return (
-    <main style={{ maxWidth: 1200, marginInline: 'auto', padding: 20 }}>
-      {error && <p>Oh no, there was an error</p>}
+import ServiceExampleScreen from '@/screens/service-example-screen/service-example-screen'
+import fetchFromApi from '@/utils/fetchFromApi'
 
-      {isLoading || (isFetching && <p>Loading...</p>)}
-      {data && (
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr 1fr 1fr',
-            gap: 20,
-          }}
-        >
-          {data.map((user: User) => (
-            <div
-              key={user.id}
-              style={{ border: '1px solid #ccc', textAlign: 'center' }}
-            >
-              <Image
-                src={`https://robohash.org/${user.id}?set=set2&size=180x180`}
-                alt={user.name}
-                height="180"
-                width="180"
-                style={{ margin: 'auto' }}
-              />
-              <h3>{user.name}</h3>
-            </div>
-          ))}
-        </div>
-      )}
-    </main>
-  )
+export default async function Page(): Promise<ReactElement> {
+  return <ServiceExampleScreen ssdata={(await fetchFromApi('getUsers')).data} />
 }

src/app/(redux)/redux-persist-example/page.test.tsx

@@ -18,6 +18,7 @@ const DarkModeButton = (): ReactElement | null => {
   return (
     <button
       className="absolute right-4 bottom-4"
+      aria-label="Dark/Light Mode"
       onClick={() => (theme === 'dark' ? setTheme('light') : setTheme('dark'))}
     >
       {theme === 'dark' ? <FaMoon /> : <FaSun />}

src/app/(redux)/redux-persist-example/page.tsx

@@ -2,21 +2,13 @@
 
 import { ReactElement, ReactNode } from 'react'
 import { Provider } from 'react-redux'
-import { PersistGate } from 'redux-persist/integration/react'
 
-import { persistor } from '@/redux/persistor/persistor'
 import getStore from '@/redux/store/store'
 
 export default function ReduxProvider({
   children,
 }: {
   children: ReactNode
 }): ReactElement {
-  return (
-    <Provider store={getStore()}>
-      <PersistGate loading={null} persistor={persistor}>
-        {children}
-      </PersistGate>
-    </Provider>
-  )
+  return <Provider store={getStore()}>{children}</Provider>
 }