update v1.1

Author: Akkarapon Phikulsri

.babelrc

@@ -0,0 +1,24 @@
+{
+	"presets": [
+	  "next/babel"
+	],
+	"plugins": [
+	  "inline-dotenv",
+	  ["styled-components", { "ssr": true }],
+	  ["module-resolver", {
+		"root": ["./src"]
+	  }]
+	],
+	"env": {
+	  "test": {
+		"presets": [
+		  ["next/babel", {
+			 "preset-env": {
+				"modules": "commonjs"
+			  }
+		  }]
+		]
+	  }
+	}
+  }
+  

.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_ENDPOINT=https://raw.githubusercontent.com/billowdev/json/main/
+NEXT_PUBLIC_NODE_ENV=production

package.json

@@ -5,13 +5,16 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build-html": "next build && next export",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest --watch"
+    "test": "jest --watch",
+    "clean": "rimraf node_modules/.cache .next"
   },
   "dependencies": {
     "axios": "^0.27.2",
     "next": "12.1.6",
+    "next-redux-wrapper": "^7.0.5",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-redux": "^8.0.1",
@@ -22,6 +25,12 @@
     "@babel/core": "^7.17.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^28.1.0",
+    "babel-plugin-inline-dotenv": "^1.7.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-styled-components": "^2.0.7",
     "eslint": "8.15.0",
     "eslint-config-next": "12.1.6",
     "jest": "^28.1.0"

pages/_app.jsx

@@ -1,16 +1,11 @@
 import "../styles/globals.css";
-import { Provider } from "react-redux";
-import { configureStore } from "../redux/store";
-import services from "../services";
-
+import { wrapper } from "redux/store";
 const App = ({ Component, pageProps }) => {
   return (
     <>
-      <Provider store={configureStore(services)}>
-        <Component {...pageProps} />
-      </Provider>
+      <Component {...pageProps} />
     </>
   );
 };
 
-export default App;
+export default wrapper.withRedux(App);

pages/index.jsx

@@ -3,24 +3,19 @@ import Image from "next/image";
 import styles from "../styles/Home.module.css";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { pageLoaded } from "../redux/actions/ui";
-import { loadArticles } from "../redux/actions/aticles";
-import {
-  getArticlesData,
-  getArticlesIncluded,
-} from "../redux/selectors/articles";
-import { loadLocalStorage } from "../helpers/useLocalStorage";
+import { pageLoaded } from "redux/actions/ui";
+import { loadArticles } from "redux/actions/aticles";
+import { getArticlesData, getArticlesIncluded } from "redux/selectors/articles";
+import { loadLocalStorage } from "helpers/useLocalStorage";
 
 export default function Home() {
   const dispatch = useDispatch();
   const articleData = useSelector(getArticlesData);
   const articleIncluded = useSelector(getArticlesIncluded);
   const [dataLocal, setDataLocal] = useState("");
   useEffect(() => {
-    return () => {
-      dispatch(pageLoaded);
-      dispatch(loadArticles());
-    };
+    dispatch(pageLoaded);
+    dispatch(loadArticles());
   }, [dispatch]);
 
   useEffect(() => {

redux/store.js

@@ -0,0 +1,22 @@
+import { compose, applyMiddleware, createStore } from "redux";
+import rootReducers from "./reducers"
+import middleware from "./middleware";
+import config from "../../config";
+import services from "../services"
+import { createWrapper } from "next-redux-wrapper";
+
+
+const composeEnhancers = (
+	config.env === "development"
+		&&
+		(typeof window !== "undefined") ?
+		window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+		: f => f) || compose;
+
+const initialStore = () => {
+	return createStore(rootReducers, composeEnhancers(
+		applyMiddleware(...middleware.map(f => f(services)))))
+}
+
+export const wrapper = createWrapper(initialStore)
+

components/Layout.jsx renamed to src/components/Layout.jsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import config from "../../config"
+import config from "../../../config"
 const BASE_URL = config.API_ENDPOINT;
 export default {
 	getArticles: async () => {

helpers/useLocalStorage.js renamed to src/helpers/useLocalStorage.js

@@ -1,7 +1,7 @@
 import consoleLogger from "./logger/console";
 import elasticSearch from "./logger/elasticSearch"
 import api from "./api"
-import config from "../config";
+import config from "../../config";
 
 const services = {
 	log: config.env === "development" ? consoleLogger : elasticSearch,