- implement i18n

- translation dynamic for sections
- added articles for SEO

src/contexts/DatabaseContext.js

@@ -4,13 +4,14 @@ import ShortUniqueId from 'short-unique-id';
 import React, { createContext, memo, useContext, useState } from 'react';
 import UserContext from './UserContext';
 import initialState from '../data/initialState.json';
+import { getUnsplashPhoto } from '../utils';
 
 const DEBOUNCE_WAIT_TIME = 4000;
 
 const defaultState = {
   isUpdating: false,
-  createResume: () => {},
-  duplicateResume: () => {},
+  createResume: async () => {},
+  duplicateResume: async () => {},
   deleteResume: () => {},
   getResume: async () => {},
   getResumes: async () => {},
@@ -39,8 +40,9 @@ const DatabaseProvider = ({ children }) => {
     }
   };
 
-  const createResume = ({ name }) => {
+  const createResume = async ({ name }) => {
     const id = uuid();
+    const preview = await getUnsplashPhoto();
     const createdAt = firebase.database.ServerValue.TIMESTAMP;
 
     let firstName;
@@ -55,6 +57,7 @@ const DatabaseProvider = ({ children }) => {
       id,
       name,
       user: user.uid,
+      preview,
       profile: {
         ...initialState.profile,
         firstName: firstName || '',
@@ -67,14 +70,16 @@ const DatabaseProvider = ({ children }) => {
     firebase.database().ref(`resumes/${id}`).set(resume);
   };
 
-  const duplicateResume = (originalResume) => {
+  const duplicateResume = async (originalResume) => {
     const id = uuid();
+    const preview = await getUnsplashPhoto();
     const createdAt = firebase.database.ServerValue.TIMESTAMP;
 
     const resume = {
       ...originalResume,
       id,
       name: `${originalResume.name} Copy`,
+      preview,
       createdAt,
       updatedAt: createdAt,
     };

src/contexts/ResumeContext.js

@@ -1,5 +1,14 @@
 import arrayMove from 'array-move';
-import { clone, findIndex, get, isUndefined, merge, setWith } from 'lodash';
+import {
+  clone,
+  findIndex,
+  get,
+  isUndefined,
+  merge,
+  setWith,
+  set,
+  has,
+} from 'lodash';
 import React, {
   createContext,
   memo,
@@ -7,6 +16,7 @@ import React, {
   useContext,
   useReducer,
 } from 'react';
+import i18next from 'i18next';
 import demoState from '../data/demoState.json';
 import initialState from '../data/initialState.json';
 import DatabaseContext from './DatabaseContext';
@@ -73,6 +83,18 @@ const ResumeProvider = ({ children }) => {
           debouncedUpdateResume(newState);
           return newState;
 
+        case 'change_language':
+          newState = clone(state);
+          items = get(
+            i18next.getDataByLanguage(payload),
+            'translation.builder.sections',
+          );
+          Object.keys(items).forEach((key) => {
+            has(newState, `${key}.heading`) &&
+              set(newState, `${key}.heading`, items[key]);
+          });
+          return newState;
+
         case 'reset_layout':
           temp = get(state, 'metadata.template');
           items = get(initialState, `metadata.layout.${temp}`);

src/contexts/SettingsContext.js

@@ -0,0 +1,59 @@
+import i18next from 'i18next';
+import moment from 'moment';
+import React, { createContext, memo, useEffect, useState } from 'react';
+import themeConfig from '../data/themeConfig';
+
+const defaultState = {
+  theme: 'Dark',
+  setTheme: () => {},
+  language: 'en',
+  setLanguage: () => {},
+};
+
+const SettingsContext = createContext(defaultState);
+
+const SettingsProvider = ({ children }) => {
+  const [theme, setTheme] = useState(defaultState.theme);
+  const [language, setLanguage] = useState(defaultState.theme);
+
+  useEffect(() => {
+    const prefTheme = localStorage.getItem('theme') || defaultState.theme;
+    const prefLanguage =
+      localStorage.getItem('language') || defaultState.language;
+    setTheme(prefTheme);
+    setLanguage(prefLanguage);
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+    const colorConfig = themeConfig[theme];
+    for (const [key, value] of Object.entries(colorConfig)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    localStorage.setItem('language', language);
+    i18next.changeLanguage(language);
+    moment.locale(language);
+  }, [language]);
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        theme,
+        setTheme,
+        language,
+        setLanguage,
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export default SettingsContext;
+
+const memoizedProvider = memo(SettingsProvider);
+
+export { memoizedProvider as SettingsProvider };

src/contexts/ThemeContext.js

@@ -1,47 +0,0 @@
-import React, { createContext, memo, useEffect, useState } from 'react';
-import themeConfig from '../data/themeConfig';
-
-const defaultState = {
-  theme: 'Dark',
-  setTheme: () => {},
-};
-
-const ThemeContext = createContext(defaultState);
-
-const ThemeProvider = ({ children }) => {
-  const [theme, setThemeX] = useState(defaultState.theme);
-
-  useEffect(() => {
-    const prefTheme = localStorage.getItem('theme') || defaultState.theme;
-    setThemeX(prefTheme);
-  }, []);
-
-  useEffect(() => {
-    const colorConfig = themeConfig[theme];
-    for (const [key, value] of Object.entries(colorConfig)) {
-      document.documentElement.style.setProperty(key, value);
-    }
-  }, [theme]);
-
-  const setTheme = (themeRef) => {
-    setThemeX(themeRef);
-    localStorage.setItem('theme', themeRef);
-  };
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        theme,
-        setTheme,
-      }}
-    >
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export default ThemeContext;
-
-const memoizedProvider = memo(ThemeProvider);
-
-export { memoizedProvider as ThemeProvider };