Add save / load state to / from localStorage

src/components/forum/forumComments.js

@@ -22,7 +22,6 @@ const ForumComments = ({
   const [formDiv, setFormDiv] = useState(false)
 
   const addCommentTextArea = React.createRef()
-  const updateCommentTextArea = React.createRef()
 
   const addNewComment = (event) => {
     event.preventDefault()

src/pages/index.js

@@ -2,13 +2,13 @@ import React from "react";
 
 import IndexInterface from "../components/indexInterface"
 
-import store from "../stores/store";
+import { store } from "../stores/store";
 import { Provider } from "react-redux";
 
 import '../styles/general.scss'
 
 const IndexPage = () => (
-  <Provider store={store}>
+  <Provider store={ store }>
     <IndexInterface />
   </Provider>
 )

src/stores/apiAddress.js

@@ -0,0 +1 @@
+export const address = 'http://localhost:9090'//'http://tbs093a.pythonanywhere.com'

src/stores/comments/duck/operations.js

@@ -1,8 +1,9 @@
 import actions from './actions'
+import { address } from './../../apiAddress'
 
 const fetchRatingsComment = async (comment) => {
   const response = await
-    fetch ('http://localhost:8001/index/comment/' + comment.id + '/rating', {
+    fetch (address + '/index/comment/' + comment.id + '/rating', {
       method: 'GET',
       credentials: 'same-origin'
     });
@@ -10,7 +11,7 @@ const fetchRatingsComment = async (comment) => {
 }
 
 const fetchAddRating = async (data) => {
-  fetch ('http://localhost:8001/index/comment/' + data.comment_id + '/rating', {
+  fetch (address + '/index/comment/' + data.comment_id + '/rating', {
     method: 'POST',
     credentials: 'same-origin',
     body: JSON.stringify(data)
@@ -18,7 +19,7 @@ const fetchAddRating = async (data) => {
 }
 
 const fetchUpdateRating = async (rating) => {
-  fetch ('http://localhost:8001/index/rating/' + rating.id, {
+  fetch (address + '/index/rating/' + rating.id, {
     method: 'PUT',
     credentials: 'same-origin',
     body: JSON.stringify(rating)
@@ -48,7 +49,7 @@ export const updateRatingComment = (data) =>
   }
 
 const fetchAddComment = async (data) => {
-  fetch ('http://localhost:8001/index/subject/' + data.subject_id + '/comment', {
+  fetch (address + '/index/subject/' + data.subject_id + '/comment', {
     method: 'POST',
     credentials: 'same-origin',
     body: JSON.stringify(data)
@@ -56,7 +57,7 @@ const fetchAddComment = async (data) => {
 }
 
 const fetchUpdateComment = async (data) => {
-  fetch ('http://localhost:8001/index/comment/' + data.id, {
+  fetch (address + '/index/comment/' + data.id, {
     method: 'PUT',
     credentials: 'same-origin',
     body: JSON.stringify(data)
@@ -64,7 +65,7 @@ const fetchUpdateComment = async (data) => {
 }
 
 const fetchDeleteComment = async (data) => {
-  fetch ('http://localhost:8001/index/comment/' + data.id, {
+  fetch (address + '/index/comment/' + data.id, {
     method: 'Delete',
     credentials: 'same-origin',
     body: JSON.stringify(data)

src/stores/exchange/duck/operations.js

@@ -1,9 +1,10 @@
 import actions from './actions'
+import { address } from './../../apiAddress'
 
 const fetchGetChart = async () => {
   const response = await
     fetch (
-      'http://localhost:8001/index/exchange/' + 1800, {
+      address + '/index/exchange/' + 1800, {
         method: 'GET',
         credential: 'same-origin'
       })
@@ -14,7 +15,7 @@ const fetchGetChart = async () => {
 const fetchGetUserTriggers = async (userID) => {
   const response = await
     fetch (
-      'http://localhost:8001/index/user/' + userID + '/trigger', {
+      address + '/index/user/' + userID + '/trigger', {
         method: 'GET',
         credential: 'same-origin'
       })
@@ -25,7 +26,7 @@ const fetchGetUserTriggers = async (userID) => {
 const fetchGetUserTransactions = async (userID) => {
   const response = await
     fetch (
-      'http://localhost:8001/index/user/' + userID + '/transaction', {
+      address + '/index/user/' + userID + '/transaction', {
         method: 'GET',
         credential: 'same-origin'
       })
@@ -36,7 +37,7 @@ const fetchGetUserTransactions = async (userID) => {
 const fetchGetUserNotifications = async (userID) => {
   const response = await
     fetch (
-      'http://localhost:8001/index/user/' + userID + '/notification', {
+      address + '/index/user/' + userID + '/notification', {
         method: 'GET',
         credential: 'same-origin'
       })
@@ -46,7 +47,7 @@ const fetchGetUserNotifications = async (userID) => {
 
 const fetchAddTrigger = async (data) => {
   fetch (
-    'http://localhost:8001/index/user/' + data.user_id + '/trigger', {
+    address + '/index/user/' + data.user_id + '/trigger', {
       method: 'POST',
       credential: 'same-origin',
       body: JSON.stringify(data)
@@ -56,7 +57,7 @@ const fetchAddTrigger = async (data) => {
 
 const fetchPrognosis = async (data) => {
     const response = await fetch (
-    'http://localhost:8001/index/exchange/1800/prognosis/' + data.price, {
+    address + '/index/exchange/1800/prognosis/' + data.price, {
       method: 'GET',
       credential: 'same-origin'
     }
@@ -67,7 +68,7 @@ const fetchPrognosis = async (data) => {
 
 const fetchDeleteNotification = async (data) => {
     const response = await fetch (
-    'http://localhost:8001/index/notification/' + data.id, {
+    address + '/index/notification/' + data.id, {
       method: 'DELETE',
       credential: 'same-origin',
       body: JSON.stringify(data)

src/stores/localStorage.js

@@ -0,0 +1,23 @@
+export const loadState = () => {
+    try {
+      const serializedState = localStorage.getItem('state');
+  
+      if (serializedState === null) {
+        return undefined;
+      }
+  
+      return JSON.parse(serializedState);
+  
+    } catch (err) {
+      return undefined;
+    }
+  };
+  
+  export const saveState = (state) => {
+    try {
+      const serializedState = JSON.stringify(state);
+      localStorage.setItem('state', serializedState);
+    } catch (err) {
+      console.log('save in local storage error');
+    }
+  };

src/stores/reducers.js

@@ -14,7 +14,6 @@ const rootReducer = combineReducers({
   subjects: subjectReducer,
   comments: commentReducer,
   movements: movementsReducer,
-
   exchange: exchangeReducer
 })
 

src/stores/store.js

@@ -1,10 +1,40 @@
 import { createStore, applyMiddleware } from 'redux'
 import { composeWithDevTools } from 'redux-devtools-extension'
-import rootReducer from './reducers'
 import thunk from 'redux-thunk'
+import rootReducer from './reducers'
+import { saveState, loadState } from './localStorage';
+import lodash from 'lodash';
 
-const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
+//const store = createStore(rootReducer) //, composeWithDevTools(applyMiddleware(thunk))
 
-window.store = store
+const persistedState = loadState();
 
-export default store
+export const store = createStore(rootReducer, persistedState, composeWithDevTools(applyMiddleware(thunk)))
+
+console.log(store.getState())
+
+store.subscribe(() => {
+  saveState({
+    user: store.getState().user,
+    exchange: store.getState().exchange,
+    comments: store.getState().comments,
+    subjects: store.getState().subjects,
+    threads: store.getState().threads,
+    movements: store.getState().movements
+  });
+});
+
+store.subscribe(lodash.throttle(() => {
+  saveState({
+    user: store.getState().user,
+    exchange: store.getState().exchange,
+    comments: store.getState().comments,
+    subjects: store.getState().subjects,
+    threads: store.getState().threads,
+    movements: store.getState().movements
+  });
+}, 1000));
+
+export default preloadedState => {
+  return createStore(rootReducer, preloadedState)
+}

src/stores/subjects/duck/operations.js

@@ -1,8 +1,9 @@
 import actions from './actions'
+import { address } from './../../apiAddress'
 
 const fetchSubjectComments = async (subject) => {
   const response = await
-    fetch('http://localhost:8001/index/subject/' + subject.id + '/comment', {
+    fetch(address + '/index/subject/' + subject.id + '/comment', {
       method: 'GET',
       credentials: 'same-origin'
     });
@@ -24,7 +25,7 @@ export const getSubjectComments = (data) =>
 
 const fetchAddSubject = async (data) => {
   const response = await
-    fetch('http://localhost:8001/index/thread/' + data.thread_id + '/subject', {
+    fetch(address + '/index/thread/' + data.thread_id + '/subject', {
         method: 'POST',
         credentials: 'same-origin',
         body: JSON.stringify(data)
@@ -39,7 +40,7 @@ const fetchAddSubject = async (data) => {
 
 const fetchPutSubject = async (data) => {
   const response = await
-    fetch('http://localhost:8001/index/subject/' + data.id, {
+    fetch(address + '/index/subject/' + data.id, {
         method: 'PUT',
         credentials: 'same-origin',
         body: JSON.stringify(data)
@@ -54,7 +55,7 @@ const fetchPutSubject = async (data) => {
 
 const fetchDeleteSubject = async (data) => {
   const response = await
-    fetch('http://localhost:8001/index/subject/' + data.subject_id, {
+    fetch(address + '/index/subject/' + data.subject_id, {
         method: 'DELETE',
         credentials: 'same-origin',
         body: JSON.stringify(data)

src/stores/threads/duck/operations.js

@@ -1,9 +1,10 @@
 import actions from './actions'
+import { address } from './../../apiAddress'
 
 const fetchGetAll = async () => {
   const response = await
     fetch (
-      'http://localhost:8001/index/thread', {
+      address + '/index/thread', {
         method: 'GET',
         credential: 'same-origin'
       }
@@ -14,7 +15,7 @@ const fetchGetAll = async () => {
 const fetchGetSubjects = async (threadID) => {
   const response = await
   fetch(
-    'http://localhost:8001/index/thread/' + threadID + '/subject', {
+    address + '/index/thread/' + threadID + '/subject', {
       method: 'GET',
       credential: 'same-origin'
     }
@@ -25,7 +26,7 @@ const fetchGetSubjects = async (threadID) => {
 const fetchAddThread = async (data) => {
   const response = await
   fetch(
-    'http://localhost:8001/index/thread', {
+    address + '/index/thread', {
       method: 'POST',
       credential: 'same-origin',
       body: JSON.stringify(data)
@@ -37,7 +38,7 @@ const fetchAddThread = async (data) => {
 const fetchUpdateThread = async (data) => {
   const response = await
   fetch(
-    'http://localhost:8001/index/thread/' + data.id, {
+    address + '/index/thread/' + data.id, {
       method: 'PUT',
       credential: 'same-origin',
       body: JSON.stringify(data)
@@ -49,7 +50,7 @@ const fetchUpdateThread = async (data) => {
 const fetchDeleteThread = async (data) => {
   const response = await
   fetch(
-    'http://localhost:8001/index/thread/' + data.thread_id, {
+    address + '/index/thread/' + data.thread_id, {
       method: 'DELETE',
       credential: 'same-origin',
       body: JSON.stringify(data)

src/stores/user/duck/operations.js

@@ -1,11 +1,15 @@
+import { saveState, loadState } from '../../localStorage'
+import { store } from '../../store'
+import lodash from 'lodash'
 import actions from './actions'
+import { address } from './../../apiAddress'
 
 var jwtDecode = require('jwt-decode')
 
 const fetchLogin = async (user) => {
   const response = await
     fetch (
-      'http://localhost:8001/index/authUser', {
+      address + '/index/authUser', {
         method: 'POST',
         credential: 'same-origin',
         body: JSON.stringify(user),
@@ -16,7 +20,7 @@ const fetchLogin = async (user) => {
 
 const fetchLogout = async (userToken) => {
   fetch (
-    'http://localhost:8001/index/authUser', {
+    address + '/index/authUser', {
       method: 'DELETE',
       credential: 'same-origin',
       body: JSON.stringify(userToken),
@@ -26,7 +30,7 @@ const fetchLogout = async (userToken) => {
 
 const fetchUpdate = async (user) => {
   fetch (
-    'http://localhost:8001/index/user/' + user.id, {
+    address + '/index/user/' + user.id, {
       method: 'PUT',
       credential: 'same-origin',
       body: JSON.stringify(user),
@@ -35,7 +39,7 @@ const fetchUpdate = async (user) => {
 
 const fetchRegister = async (user) => {
   fetch (
-    'http://localhost:8001/index/user', {
+    address + '/index/user', {
       method: 'POST',
       credential: 'same-origin',
       body: JSON.stringify(user),
@@ -46,7 +50,7 @@ const fetchRegister = async (user) => {
 const fetchGetAllUsers = async () => {
   const response = await
   fetch (
-    'http://localhost:8001/index/user', {
+    address + '/index/user', {
       method: 'GET',
       credential: 'same-origin'
     }
@@ -73,10 +77,22 @@ export const createSession = (data) =>
     }
 
     dispatch(actions.login(userFull))
+
+    store.subscribe(() => {
+      saveState({
+        auth: store.getState().auth
+      });
+    });
+    
+    store.subscribe(lodash.throttle(() => {
+      saveState({
+        auth: store.getState().auth
+      });
+    }, 1000));
   }
 
 export const updateSession = (data) =>
-  async (dispatch) => {
+  async () => {
     await fetchUpdate(data)
   }
 
@@ -87,6 +103,6 @@ export const deleteSession = (data) =>
   }
 
 export const registerUser = (data) =>
-  async (dispatch) => {
+  async () => {
     await fetchRegister(data)
   }

src/styles/elements.scss

@@ -32,7 +32,7 @@
   border: 0px;
   border-radius: 10px;
   font-size: 12pt;
-  color: rgba(117,82,29,1);
+  color: rgba(148,104,36,1); //rgba(117,82,29,1)
   background-color: rgba(22,28,29,1);
   transition-duration: 0.5s;
 
@@ -47,8 +47,11 @@
   }
 }
 
+@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,700);
+
 @mixin fontStyle {
-  color: rgba(117,82,29,1);
+  color: rgba(148,104,36,1); //rgba(117,82,29,1)
+  font-family: 'Ubuntu';
   font-size: 20px;
   margin-top: 0;
   margin-bottom: 10px;