Merge pull request #125 from CreateThrive/hotfix/internationalization-cookies

Hotfix: User locale now persist in local storage

Author: TOPOFGR

README.md

@@ -15,7 +15,6 @@ Boilerplate with React ⚛️ and Firebase 🔥designed to quickly spin up a ful
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [What is this?](#what-is-this)
 - [Why should I use it?](#why-should-i-use-it)
 - [Features](#features)
@@ -132,9 +131,8 @@ React Firebase Admin is our in-house admin dashboard boilerplate, used in many o
 - [React-spinners](https://github.com/davidhu2000/react-spinners) (★ 1.2k) a collection of loading spinner components for React.
 - [Firebase](https://firebase.google.com/) for serverless architecture - CDN Hosting, Realtime Database, Authentication, Storage and Cloud Functions (see [docs](https://firebase.google.com/docs/web)).
 - [Format.js](https://formatjs.io/) (★ 11.7k) libraries for internationalization (see [docs](https://formatjs.io/docs/basic-internationalization-principles)).
-- [date-fns](https://formatjs.io/) (★ 22.3k) date utility library (see [docs]https://date-fns.org/docs/Getting-Started)).
-- [redux-persist-cookie-storage](https://github.com/abersager/redux-persist-cookie-storage) (★ 70) **Redux Persist** storage adapter for cookies.
-- [cookies-js](https://github.com/js-cookie/js-cookie) (★ 15.5k) API for handling browser cookies.
+- [date-fns](https://date-fns.org/) (★ 22.3k) date utility library (see [docs](https://date-fns.org/docs/Getting-Started)).
+- [cross-env](https://github.com/kentcdodds/cross-env) (★ 4.9k) run scripts that set and use environment variables across platforms (see [docs](https://www.npmjs.com/package/cross-env)).
 
 ### Unit Testing
 
@@ -536,7 +534,7 @@ For requesting access to the [demo](https://react-firebase-admin-eeac2.firebasea
 
 ## Internationalization
 
-For the internationalization we decided to choose the library [Format.js](https://formatjs.io/) using react-intl as the react integration. We made a wrapper called **LanguageWrapper** that contains all of our translation logic. Apart from that, we save the language preferences of the user in the redux store and we persist it using cookies ([redux-persist-cookie-storage](https://github.com/abersager/redux-persist-cookie-storage)). The user has the option to change their language preferences.
+For the internationalization we decided to choose the library [Format.js](https://formatjs.io/) using react-intl as the react integration. We made a wrapper called **LanguageWrapper** that contains all of our translation logic. Apart from that, we save the language preferences of the user in the redux store and we persist it using the local storage. The user has the option to change their language preferences.
 
 ![Boilerplate - Dinamical Internationalization](https://media.giphy.com/media/St3bw0rjlBQmKzf6fC/source.gif)
 
@@ -686,7 +684,7 @@ We implemented social media authentication using Firebase!. You can take a look
 
 ### Can I add more login methods?
 
-Yes you can!. We already have the setup in place for more login methods like Twitter, GitHub, etc. You can add them without chaning much code at all. You can see other login methods provided by Firebase [here](https://firebase.google.com/docs/auth/web/start).
+Yes you can!. We already have the setup in place for more login methods like Twitter, GitHub, etc. You can add them without changing much code at all. You can see other login methods provided by Firebase [here](https://firebase.google.com/docs/auth/web/start).
 
 ### Facebook
 

package-lock.json

@@ -6,7 +6,6 @@
     "bulma": "^0.9.0",
     "bulma-social": "^1.1.1",
     "classnames": "^2.2.6",
-    "cookies-js": "^1.2.3",
     "date-fns": "^2.15.0",
     "firebase": "^7.17.1",
     "prop-types": "^15.7.2",
@@ -23,7 +22,6 @@
     "redux": "^4.0.5",
     "redux-act": "^1.8.0",
     "redux-persist": "^6.0.0",
-    "redux-persist-cookie-storage": "^1.0.0",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {
@@ -35,8 +33,8 @@
     "setup-admin-dashboard": "npm install && npm build && firebase deploy",
     "deploy": "npm run build && firebase deploy --only hosting",
     "precommit:react": "npm test",
-    "precommit:functions": "cd functions/ && tsc && npm test",
-    "precommit": "CI=true npm run precommit:react && npm run precommit:functions"
+    "precommit:functions": "cd functions/ && npm run build && npm test",
+    "precommit": "cross-env CI=true npm run precommit:react && npm run precommit:functions"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -56,6 +54,7 @@
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
+    "cross-env": "^7.0.2",
     "deep-freeze": "^0.0.1",
     "dotenv": "^8.2.0",
     "enzyme": "^3.11.0",

package.json

@@ -9,8 +9,8 @@ const LanguageWrapper = ({ children }) => {
   const dispatch = useDispatch();
 
   let { locale } = useSelector(
-    state => ({
-      locale: state.preferences.locale
+    (state) => ({
+      locale: state.preferences.locale,
     }),
     shallowEqual
   );

src/components/LanguageWrapper/index.js

@@ -15,10 +15,10 @@ const NavBar = ({ handleMobileToggle, asideMobileActive }) => {
   const [navMobileActive, setNavMobileActive] = useState(false);
 
   const { userName, logoUrl, locale } = useSelector(
-    state => ({
+    (state) => ({
       userName: state.auth.userData.name,
       logoUrl: state.auth.userData.logoUrl,
-      locale: state.preferences.locale
+      locale: state.preferences.locale,
     }),
     shallowEqual
   );
@@ -33,11 +33,11 @@ const NavBar = ({ handleMobileToggle, asideMobileActive }) => {
     setNavMobileActive(!navMobileActive);
   }, [setNavMobileActive, navMobileActive]);
 
-  const changeLocaleHandler = local => {
+  const changeLocaleHandler = (local) => {
     dispatch(setUserLocale(local));
   };
 
-  const locales = availableLocales.filter(local => local !== locale);
+  const locales = availableLocales.filter((local) => local !== locale);
 
   return (
     <nav id="navbar-main" className="navbar is-fixed-top">
@@ -77,7 +77,7 @@ const NavBar = ({ handleMobileToggle, asideMobileActive }) => {
       </div>
       <div
         className={classNames('navbar-menu', 'fadeIn', 'animated', 'faster', {
-          'is-active': navMobileActive
+          'is-active': navMobileActive,
         })}
         id="navbar-menu"
       >
@@ -94,7 +94,7 @@ const NavBar = ({ handleMobileToggle, asideMobileActive }) => {
               </span>
             </a>
             <div className="navbar-dropdown">
-              {locales.map(local => (
+              {locales.map((local) => (
                 <a
                   onClick={() => changeLocaleHandler(local)}
                   className="navbar-item"
@@ -150,7 +150,7 @@ const NavBar = ({ handleMobileToggle, asideMobileActive }) => {
 
 NavBar.propTypes = {
   handleMobileToggle: PropTypes.func.isRequired,
-  asideMobileActive: PropTypes.bool
+  asideMobileActive: PropTypes.bool,
 };
 
 export default NavBar;

src/components/Navigation/NavBar/index.jsx

@@ -2,8 +2,6 @@ import { combineReducers } from 'redux';
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 import { reducer as toastrReducer } from 'react-redux-toastr';
-import { CookieStorage } from 'redux-persist-cookie-storage';
-import Cookies from 'cookies-js';
 
 import { authReducer } from './auth';
 import { usersReducer } from './users';
@@ -19,7 +17,7 @@ export default combineReducers({
     authReducer
   ),
   preferences: persistReducer(
-    { key: 'preferences', storage: new CookieStorage(Cookies) },
+    { key: 'preferences', storage },
     preferencesReducer
   ),
   users: persistReducer(