- update dependencies

- upgrade gatsby v2 to v3
- update functions

.eslintrc

@@ -14,7 +14,7 @@
     "plugin:jest/style",
     "prettier"
   ],
-  "plugins": ["jest", "prettier"],
+  "plugins": ["jest", "prettier", "sort-imports-es6-autofix"],
   "rules": {
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

.nvmrc

@@ -1 +1 @@
-14
+16

__mocks__/gatsby-plugin-firebase.js

@@ -1,6 +1,6 @@
 import Auth from './gatsby-plugin-firebase/auth/auth';
-import Database from './gatsby-plugin-firebase/database/database';
 import AuthConstants from './gatsby-plugin-firebase/constants/auth';
+import Database from './gatsby-plugin-firebase/database/database';
 import DatabaseConstants from './gatsby-plugin-firebase/constants/database';
 
 class FirebaseStub {

__mocks__/gatsby-plugin-firebase/auth/auth.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-underscore-dangle */
 import { v4 as uuidv4 } from 'uuid';
 
-import Constants from '../constants/auth';
 import { delay } from '../../../src/utils/index';
+import Constants from '../constants/auth';
 
 const singleton = Symbol('');
 const singletonEnforcer = Symbol('');
@@ -37,9 +37,8 @@ class Auth {
     this.onAuthStateChangedObservers.push(observer);
 
     return () => {
-      this._onAuthStateChangedObservers = this.onAuthStateChangedObservers.filter(
+      this._onAuthStateChangedObservers =
-        (obs) => obs !== observer,
+        this.onAuthStateChangedObservers.filter((obs) => obs !== observer);
-      );
     };
   }
 

__mocks__/gatsby-plugin-firebase/database/database.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
-import path from 'path';
-import fs from 'fs';
 import { v4 as uuidv4 } from 'uuid';
+import fs from 'fs';
+import path from 'path';
 
 import DatabaseConstants from '../constants/database';
 import Reference from './reference';

__mocks__/gatsby-plugin-firebase/database/reference.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-underscore-dangle */
 import { v4 as uuidv4 } from 'uuid';
 
-import DatabaseConstants from '../constants/database';
-import DataSnapshot from './dataSnapshot';
 import { delay } from '../../../src/utils/index';
+import DataSnapshot from './dataSnapshot';
+import DatabaseConstants from '../constants/database';
 
 const parsePath = (path) => {
   if (!path) {

functions/package.json

@@ -9,9 +9,9 @@
     "logs": "firebase functions:log"
   },
   "dependencies": {
-    "firebase-admin": "^9.5.0",
+    "firebase-admin": "^9.9.0",
-    "firebase-functions": "^3.13.2",
+    "firebase-functions": "^3.14.1",
-    "puppeteer": "8.0.0"
+    "puppeteer": "9.1.1"
   },
   "devDependencies": {
     "firebase-functions-test": "^0.2.3"

gatsby-browser.js

@@ -1,17 +1,4 @@
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+/* eslint-disable import/no-extraneous-dependencies */
-import 'animate.css';
-import 'firebase/analytics';
-import 'firebase/auth';
-import 'firebase/database';
-import 'firebase/functions';
-import 'firebase/storage';
-import React from 'react';
-import { DatabaseProvider } from './src/contexts/DatabaseContext';
-import { ModalProvider } from './src/contexts/ModalContext';
-import { ResumeProvider } from './src/contexts/ResumeContext';
-import { SettingsProvider } from './src/contexts/SettingsContext';
-import { StorageProvider } from './src/contexts/StorageContext';
-import { UserProvider } from './src/contexts/UserContext';
 import './src/i18n';
 import './src/styles/forms.css';
 import './src/styles/global.css';
@@ -19,6 +6,20 @@ import './src/styles/shadows.css';
 import './src/styles/tailwind.css';
 import './src/styles/toastify.css';
 import './src/utils/dayjs';
+import 'animate.css';
+import 'firebase/analytics';
+import 'firebase/auth';
+import 'firebase/database';
+import 'firebase/functions';
+import 'firebase/storage';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
+import React from 'react';
+import { DatabaseProvider } from './src/contexts/DatabaseContext';
+import { ModalProvider } from './src/contexts/ModalContext';
+import { ResumeProvider } from './src/contexts/ResumeContext';
+import { SettingsProvider } from './src/contexts/SettingsContext';
+import { StorageProvider } from './src/contexts/StorageContext';
+import { UserProvider } from './src/contexts/UserContext';
 
 const theme = createMuiTheme({
   typography: {

gatsby-config.js

@@ -1,7 +1,6 @@
 require('dotenv').config();
 
 module.exports = {
-  flags: { PRESERVE_WEBPACK_CACHE: true },
   siteMetadata: {
     title: 'Reactive Resume',
     siteUrl: 'https://rxresu.me',
@@ -35,6 +34,7 @@ module.exports = {
         display: 'standalone',
       },
     },
+    `gatsby-plugin-image`,
     `gatsby-plugin-offline`,
     {
       resolve: 'gatsby-plugin-webfonts',

gatsby-node.js

@@ -1,15 +1,28 @@
-exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
+exports.onCreateWebpackConfig = ({ stage, actions, plugins, getConfig }) => {
-  if (stage === 'build-javascript') {
+  actions.setWebpackConfig({
-    const config = getConfig();
+    resolve: {
-    const miniCssExtractPlugin = config.plugins.find(
+      alias: {
-      (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin',
+        path: require.resolve('path-browserify'),
-    );
+      },
-    if (miniCssExtractPlugin) {
+      fallback: {
-      miniCssExtractPlugin.options.ignoreOrder = true;
+        fs: false,
-    }
+      },
-    actions.replaceWebpackConfig(config);
+    },
+  });
+
+  if (stage === 'build-javascript' || stage === 'develop') {
+    actions.setWebpackConfig({
+      plugins: [plugins.provide({ process: 'process/browser' })],
+    });
   }
 
+  const config = getConfig();
+  const miniCssExtractPlugin = config.plugins.find(
+    (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin',
+  );
+  miniCssExtractPlugin && (miniCssExtractPlugin.options.ignoreOrder = true);
+  actions.replaceWebpackConfig(config);
+
   if (stage === 'build-html') {
     actions.setWebpackConfig({
       externals: [/^firebase/],

package.json

@@ -17,72 +17,75 @@
     "test": "jest"
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.11.4",
     "@reach/router": "^1.3.4",
     "animate.css": "^4.1.1",
     "array-move": "^3.0.1",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.2.6",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
-    "dayjs": "^1.10.4",
+    "dayjs": "^1.10.5",
-    "dotenv": "^8.2.0",
+    "dotenv": "^10.0.0",
     "downloadjs": "^1.4.7",
-    "firebase": "^8.2.7",
+    "firebase": "^8.6.3",
-    "formik": "^2.2.6",
+    "formik": "^2.2.8",
-    "gatsby": "^2.32.3",
+    "gatsby": "^3.6.1",
-    "gatsby-image": "^2.11.0",
+    "gatsby-plugin-create-client-paths": "^3.6.0",
-    "gatsby-plugin-create-client-paths": "^2.10.0",
     "gatsby-plugin-firebase": "^0.2.0-beta.4",
-    "gatsby-plugin-manifest": "^2.12.0",
+    "gatsby-plugin-image": "^1.6.0",
-    "gatsby-plugin-material-ui": "^2.1.10",
+    "gatsby-plugin-manifest": "^3.6.0",
-    "gatsby-plugin-offline": "^3.10.0",
+    "gatsby-plugin-material-ui": "^3.0.1",
-    "gatsby-plugin-postcss": "^3.7.0",
+    "gatsby-plugin-offline": "^4.6.0",
-    "gatsby-plugin-react-helmet": "^3.10.0",
+    "gatsby-plugin-postcss": "^4.6.0",
-    "gatsby-plugin-sharp": "^2.14.1",
+    "gatsby-plugin-react-helmet": "^4.6.0",
-    "gatsby-plugin-sitemap": "^2.12.0",
+    "gatsby-plugin-sharp": "^3.6.0",
-    "gatsby-plugin-webfonts": "^1.1.4",
+    "gatsby-plugin-sitemap": "^4.2.0",
-    "gatsby-source-filesystem": "^2.11.0",
+    "gatsby-plugin-webfonts": "^2.1.0",
-    "gatsby-source-gravatar": "^1.0.0",
+    "gatsby-source-filesystem": "^3.6.0",
-    "gatsby-transformer-remark": "^2.16.0",
+    "gatsby-source-gravatar": "^1.0.1",
-    "gatsby-transformer-sharp": "^2.12.0",
+    "gatsby-transformer-remark": "^4.3.0",
-    "i18next": "^19.8.7",
+    "gatsby-transformer-sharp": "^3.6.0",
-    "lodash": "^4.17.20",
+    "i18next": "^20.3.1",
-    "nanoevents": "^5.1.11",
+    "lodash": "^4.17.21",
-    "postcss": "^8.2.6",
+    "nanoevents": "^6.0.0",
-    "react": "^17.0.1",
+    "path-browserify": "^1.0.1",
-    "react-beautiful-dnd": "^13.0.0",
+    "postcss": "^8.3.0",
-    "react-dom": "^17.0.1",
+    "process": "^0.11.10",
+    "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.8.6",
+    "react-i18next": "^11.10.0",
     "react-icons": "^4.2.0",
-    "react-markdown": "^5.0.3",
+    "react-markdown": "^6.0.2",
-    "react-scroll": "^1.8.1",
+    "react-scroll": "^1.8.2",
-    "react-toastify": "^7.0.3",
+    "react-toastify": "^7.0.4",
-    "short-unique-id": "^3.2.3",
+    "short-unique-id": "^4.3.3",
     "uuid": "^8.3.2",
-    "yup": "^0.32.8"
+    "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/react": "^11.2.7",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.1",
-    "babel-preset-gatsby": "^0.12.1",
+    "babel-preset-gatsby": "^1.6.0",
-    "eslint": "^7.20.0",
+    "eslint": "^7.27.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.23.2",
-    "eslint-webpack-plugin": "^2.5.1",
+    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
+    "eslint-webpack-plugin": "^2.5.4",
     "gatsby-plugin-eslint": "^3.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
+    "jest": "^27.0.1",
     "jest-fetch-mock": "^3.0.3",
-    "prettier": "2.2.1",
+    "prettier": "2.3.0",
-    "stylelint": "^13.10.0",
+    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-standard": "^22.0.0",
-    "tailwindcss": "^2.0.3"
+    "tailwindcss": "^2.1.2"
   },
   "repository": {
     "type": "git",

src/components/Blog.js

@@ -1,10 +1,10 @@
 /* eslint-disable react/no-danger */
+import { Helmet } from 'react-helmet';
 import { graphql } from 'gatsby';
 import React from 'react';
-import { Helmet } from 'react-helmet';
-import styles from './Blog.module.css';
-import Wrapper from './shared/Wrapper';
 import Hero from './landing/Hero';
+import * as styles from './Blog.module.css';
+import Wrapper from './shared/Wrapper';
 
 export default function Template({ data }) {
   const { markdownRemark } = data;
@@ -34,7 +34,7 @@ export default function Template({ data }) {
 }
 
 export const pageQuery = graphql`
-  query($slug: String!) {
+  query ($slug: String!) {
     markdownRemark(frontmatter: { slug: { eq: $slug } }) {
       html
       frontmatter {

src/components/builder/center/Artboard.js

@@ -1,6 +1,7 @@
-import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
+import * as styles from './Artboard.module.css';
 import { useSelector } from '../../../contexts/ResumeContext';
 import Castform from '../../../templates/Castform';
 import Celebi from '../../../templates/Celebi';
@@ -8,7 +9,6 @@ import Gengar from '../../../templates/Gengar';
 import Glalie from '../../../templates/Glalie';
 import Onyx from '../../../templates/Onyx';
 import Pikachu from '../../../templates/Pikachu';
-import styles from './Artboard.module.css';
 
 const Artboard = () => {
   const state = useSelector();

src/components/builder/left/LeftNavbar.js

@@ -1,12 +1,12 @@
 import { Link } from 'gatsby';
-import React, { memo } from 'react';
 import { Tooltip } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import sections from '../../../data/leftSections';
+import React, { memo } from 'react';
 import Avatar from '../../shared/Avatar';
 import Logo from '../../shared/Logo';
+import * as styles from './LeftNavbar.module.css';
 import SectionIcon from '../../shared/SectionIcon';
-import styles from './LeftNavbar.module.css';
+import sections from '../../../data/leftSections';
 
 const LeftNavbar = () => {
   const { t } = useTranslation();

src/components/builder/left/LeftSidebar.js

@@ -1,13 +1,12 @@
-import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
-import sections from '../../../data/leftSections';
+import React, { Fragment, memo } from 'react';
-import LeftNavbar from './LeftNavbar';
+import * as styles from './LeftSidebar.module.css';
-import styles from './LeftSidebar.module.css';
 import Awards from './sections/Awards';
 import Certifications from './sections/Certifications';
 import Education from './sections/Education';
 import Hobbies from './sections/Hobbies';
 import Languages from './sections/Languages';
+import LeftNavbar from './LeftNavbar';
 import Objective from './sections/Objective';
 import Profile from './sections/Profile';
 import Projects from './sections/Projects';
@@ -15,6 +14,7 @@ import References from './sections/References';
 import Skills from './sections/Skills';
 import Social from './sections/Social';
 import Work from './sections/Work';
+import sections from '../../../data/leftSections';
 
 const getComponent = (id) => {
   switch (id) {

src/components/builder/left/sections/Awards.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Certifications.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Education.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Hobbies.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Languages.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Objective.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 

src/components/builder/left/sections/Profile.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import PhotoUpload from '../../../shared/PhotoUpload';

src/components/builder/left/sections/Projects.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/References.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Skills.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Social.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/left/sections/Work.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import List from '../../lists/List';

src/components/builder/lists/EmptyList.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 
 const EmptyList = () => {
   const { t } = useTranslation();

src/components/builder/lists/List.js

@@ -1,15 +1,15 @@
-import { get, isEmpty } from 'lodash';
-import React, { memo, useContext } from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import { useTranslation } from 'react-i18next';
 import { MdAdd } from 'react-icons/md';
-import ModalContext from '../../../contexts/ModalContext';
+import { get, isEmpty } from 'lodash';
-import { useDispatch, useSelector } from '../../../contexts/ResumeContext';
+import { useTranslation } from 'react-i18next';
+import React, { memo, useContext } from 'react';
+import * as styles from './List.module.css';
 import { formatDateRange, reorder } from '../../../utils';
+import { useDispatch, useSelector } from '../../../contexts/ResumeContext';
 import Button from '../../shared/Button';
 import EmptyList from './EmptyList';
-import styles from './List.module.css';
 import ListItem from './ListItem';
+import ModalContext from '../../../contexts/ModalContext';
 
 const List = ({
   path,

src/components/builder/lists/ListItem.js

@@ -1,12 +1,12 @@
-import { Menu, MenuItem } from '@material-ui/core';
-import React, { memo, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
-import { useTranslation } from 'react-i18next';
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
 import { MdMoreVert } from 'react-icons/md';
+import { Menu, MenuItem } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import React, { memo, useState } from 'react';
 import Switch from '@material-ui/core/Switch';
 import { useDispatch } from '../../../contexts/ResumeContext';
-import styles from './ListItem.module.css';
+import * as styles from './ListItem.module.css';
 
 const dataTestIdPrefix = 'list-item-';
 

src/components/builder/right/RightNavbar.js

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
-import sections from '../../../data/rightSections';
+import * as styles from './RightNavbar.module.css';
 import SectionIcon from '../../shared/SectionIcon';
-import styles from './RightNavbar.module.css';
 import SyncIndicator from './SyncIndicator';
+import sections from '../../../data/rightSections';
 
 const RightNavbar = () => (
   <div className={styles.container}>

src/components/builder/right/RightSidebar.js

@@ -1,16 +1,16 @@
-import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
-import sections from '../../../data/rightSections';
+import React, { Fragment, memo } from 'react';
-import RightNavbar from './RightNavbar';
+import * as styles from './RightSidebar.module.css';
-import styles from './RightSidebar.module.css';
 import About from './sections/About';
 import Actions from './sections/Actions';
 import Colors from './sections/Colors';
+import FontSize from './sections/FontSize';
 import Fonts from './sections/Fonts';
 import Layout from './sections/Layout';
+import RightNavbar from './RightNavbar';
 import Settings from './sections/Settings';
 import Templates from './sections/Templates';
-import FontSize from './sections/FontSize';
+import sections from '../../../data/rightSections';
 
 const getComponent = (id) => {
   switch (id) {

src/components/builder/right/SyncIndicator.js

@@ -1,6 +1,6 @@
-import cx from 'classnames';
-import React, { memo, useContext } from 'react';
 import { MdSync } from 'react-icons/md';
+import React, { memo, useContext } from 'react';
+import cx from 'classnames';
 import DatabaseContext from '../../../contexts/DatabaseContext';
 
 const SyncIndicator = () => {

src/components/builder/right/sections/About.js

@@ -1,11 +1,11 @@
-import React, { memo } from 'react';
+import { FaBug, FaCoffee, FaExternalLinkAlt } from 'react-icons/fa';
-import { FaCoffee, FaBug, FaExternalLinkAlt } from 'react-icons/fa';
 import { MdCode } from 'react-icons/md';
 import { Trans, useTranslation } from 'react-i18next';
-import { useStaticQuery, graphql } from 'gatsby';
+import { graphql, useStaticQuery } from 'gatsby';
+import React, { memo } from 'react';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
-import styles from './About.module.css';
+import * as styles from './About.module.css';
 
 const About = ({ id }) => {
   const { t } = useTranslation();

src/components/builder/right/sections/Actions.js

@@ -1,12 +1,12 @@
-import React, { memo, useContext, useState } from 'react';
 import { FaFileExport, FaFileImport } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
-import ModalContext from '../../../../contexts/ModalContext';
+import React, { memo, useContext, useState } from 'react';
+import * as styles from './Actions.module.css';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
-import styles from './Actions.module.css';
+import ModalContext from '../../../../contexts/ModalContext';
 
 const Actions = ({ id }) => {
   const { t } = useTranslation();

src/components/builder/right/sections/Colors.js

@@ -1,12 +1,12 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from '../../../../contexts/ResumeContext';
+import React, { memo } from 'react';
-import colorOptions from '../../../../data/colorOptions';
+import * as styles from './Colors.module.css';
 import { handleKeyUp } from '../../../../utils';
+import { useDispatch } from '../../../../contexts/ResumeContext';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
-import styles from './Colors.module.css';
+import colorOptions from '../../../../data/colorOptions';
 
 const Colors = ({ id }) => {
   const dispatch = useDispatch();

src/components/builder/right/sections/FontSize.js

@@ -1,9 +1,9 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { memo, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import fontSizeOptions from '../../../../data/fontSizeOptions';
 import { scaler } from '../../../../utils';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Heading from '../../../shared/Heading';
+import fontSizeOptions from '../../../../data/fontSizeOptions';
 
 const FontSizes = ({ id }) => {
   const steps = 20;

src/components/builder/right/sections/Fonts.js

@@ -1,10 +1,10 @@
-import cx from 'classnames';
 import React, { memo } from 'react';
-import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import cx from 'classnames';
-import fontOptions from '../../../../data/fontOptions';
+import * as styles from './Fonts.module.css';
 import { handleKeyUp } from '../../../../utils';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Heading from '../../../shared/Heading';
-import styles from './Fonts.module.css';
+import fontOptions from '../../../../data/fontOptions';
 
 const Fonts = ({ id }) => {
   const dispatch = useDispatch();

src/components/builder/right/sections/Layout.js

@@ -1,11 +1,11 @@
-import React, { memo, useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import React, { memo, useState } from 'react';
+import * as styles from './Layout.module.css';
 import { move, reorder } from '../../../../utils';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
-import styles from './Layout.module.css';
 
 const Layout = ({ id }) => {
   const { t } = useTranslation();

src/components/builder/right/sections/Settings.js

@@ -1,16 +1,16 @@
-import React, { memo, useContext, useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
-import UserContext from '../../../../contexts/UserContext';
+import React, { memo, useContext, useState } from 'react';
-import Button from '../../../shared/Button';
+import * as styles from './Settings.module.css';
-import Heading from '../../../shared/Heading';
-import styles from './Settings.module.css';
-import Input from '../../../shared/Input';
-import SettingsContext from '../../../../contexts/SettingsContext';
-import themeConfig from '../../../../data/themeConfig';
 import { languages } from '../../../../i18n';
 import { useDispatch } from '../../../../contexts/ResumeContext';
+import Button from '../../../shared/Button';
+import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
+import SettingsContext from '../../../../contexts/SettingsContext';
+import UserContext from '../../../../contexts/UserContext';
+import themeConfig from '../../../../data/themeConfig';
 
 const Settings = ({ id }) => {
   const { t } = useTranslation();
@@ -18,15 +18,13 @@ const Settings = ({ id }) => {
   const [deleteText, setDeleteText] = useState(
     t('builder.settings.dangerZone.button'),
   );
-  const [isDeleteAccountInProgress, setDeleteAccountInProgress] = useState(
+  const [isDeleteAccountInProgress, setDeleteAccountInProgress] =
-    false,
+    useState(false);
-  );
 
   const dispatch = useDispatch();
   const { deleteAccount } = useContext(UserContext);
-  const { theme, setTheme, language, setLanguage } = useContext(
+  const { theme, setTheme, language, setLanguage } =
-    SettingsContext,
+    useContext(SettingsContext);
-  );
 
   const handleChangeTheme = (e) => {
     setTheme(e.target.value);

src/components/builder/right/sections/Templates.js

@@ -1,12 +1,12 @@
-import cx from 'classnames';
 import { graphql, useStaticQuery } from 'gatsby';
-import GatsbyImage from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import React, { memo } from 'react';
-import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import cx from 'classnames';
-import templateOptions from '../../../../data/templateOptions';
+import * as styles from './Templates.module.css';
 import { handleKeyUp } from '../../../../utils';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import Heading from '../../../shared/Heading';
-import styles from './Templates.module.css';
+import templateOptions from '../../../../data/templateOptions';
 
 const Templates = ({ id }) => {
   const dispatch = useDispatch();
@@ -16,44 +16,32 @@ const Templates = ({ id }) => {
     query {
       onyx: file(relativePath: { eq: "templates/onyx.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
+          gatsbyImageData(layout: FIXED, height: 240)
-            ...GatsbyImageSharpFluid
-          }
         }
       }
       pikachu: file(relativePath: { eq: "templates/pikachu.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
+          gatsbyImageData(layout: FIXED, height: 240)
-            ...GatsbyImageSharpFluid
-          }
         }
       }
       gengar: file(relativePath: { eq: "templates/gengar.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
+          gatsbyImageData(layout: FIXED, height: 240)
-            ...GatsbyImageSharpFluid
-          }
         }
       }
       castform: file(relativePath: { eq: "templates/castform.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
+          gatsbyImageData(layout: FIXED, height: 240)
-            ...GatsbyImageSharpFluid
-          }
         }
       }
       glalie: file(relativePath: { eq: "templates/glalie.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
+          gatsbyImageData(layout: FIXED, height: 240)
-            ...GatsbyImageSharpFluid
-          }
         }
       }
       celebi: file(relativePath: { eq: "templates/celebi.png" }) {
         childImageSharp {
-          fluid(maxHeight: 400) {
+          gatsbyImageData(layout: FIXED, height: 240)
-            ...GatsbyImageSharpFluid
-          }
         }
       }
     }
@@ -87,10 +75,7 @@ const Templates = ({ id }) => {
           >
             <GatsbyImage
               alt={x.name}
-              loading="eager"
+              image={previews[x.id].childImageSharp.gatsbyImageData}
-              className="w-full"
-              style={{ height: '230px' }}
-              fluid={previews[x.id].childImageSharp.fluid}
             />
             <span>{x.name}</span>
           </div>

src/components/dashboard/CreateResume.js

@@ -1,9 +1,9 @@
-import React, { memo, useContext } from 'react';
 import { MdAdd } from 'react-icons/md';
 import { useTranslation } from 'react-i18next';
-import ModalContext from '../../contexts/ModalContext';
+import React, { memo, useContext } from 'react';
+import * as styles from './CreateResume.module.css';
 import { handleKeyUp } from '../../utils';
-import styles from './CreateResume.module.css';
+import ModalContext from '../../contexts/ModalContext';
 
 const createResumeButtonDataTestId = 'create-resume-button';
 

src/components/dashboard/ResumePreview.js

@@ -1,13 +1,13 @@
+import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
 import { Menu, MenuItem } from '@material-ui/core';
 import { navigate } from 'gatsby';
-import React, { useContext, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { MdMoreHoriz, MdOpenInNew } from 'react-icons/md';
 import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import React, { useContext, useState } from 'react';
 import dayjs from 'dayjs';
 import DatabaseContext from '../../contexts/DatabaseContext';
 import ModalContext from '../../contexts/ModalContext';
-import styles from './ResumePreview.module.css';
+import * as styles from './ResumePreview.module.css';
 
 const menuToggleDataTestIdPrefix = 'resume-preview-menu-toggle-';
 

src/components/dashboard/TopNavbar.js

@@ -1,8 +1,8 @@
 import { Link } from 'gatsby';
 import React, { memo } from 'react';
+import * as styles from './TopNavbar.module.css';
 import Avatar from '../shared/Avatar';
 import Logo from '../shared/Logo';
-import styles from './TopNavbar.module.css';
 
 const TopNavbar = () => (
   <div className={styles.navbar}>

src/components/landing/Hero.js

@@ -1,11 +1,11 @@
 import { Link } from '@reach/router';
 import { navigate } from 'gatsby';
-import React, { memo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import ModalContext from '../../contexts/ModalContext';
+import React, { memo, useContext } from 'react';
-import UserContext from '../../contexts/UserContext';
 import Button from '../shared/Button';
 import Logo from '../shared/Logo';
+import ModalContext from '../../contexts/ModalContext';
+import UserContext from '../../contexts/UserContext';
 
 const Hero = () => {
   const { t } = useTranslation();

src/components/landing/Screenshots.js

@@ -1,7 +1,7 @@
+import { graphql, useStaticQuery } from 'gatsby';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
+import * as styles from './Screenshots.module.css';
-import GatsbyImage from 'gatsby-image';
-import styles from './Screenshots.module.css';
 
 const Screenshots = () => {
   const screenshots = useStaticQuery(graphql`
@@ -11,9 +11,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
+          gatsbyImageData(layout: FIXED, width: 400)
-            ...GatsbyImageSharpFixed
-          }
         }
       }
       screen2: file(relativePath: { eq: "screenshots/screen-2.png" }) {
@@ -21,9 +19,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
+          gatsbyImageData(layout: FIXED, width: 400)
-            ...GatsbyImageSharpFixed
-          }
         }
       }
       screen3: file(relativePath: { eq: "screenshots/screen-3.png" }) {
@@ -31,9 +27,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
+          gatsbyImageData(layout: FIXED, width: 400)
-            ...GatsbyImageSharpFixed
-          }
         }
       }
       screen4: file(relativePath: { eq: "screenshots/screen-4.png" }) {
@@ -41,9 +35,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
+          gatsbyImageData(layout: FIXED, width: 400)
-            ...GatsbyImageSharpFixed
-          }
         }
       }
       screen5: file(relativePath: { eq: "screenshots/screen-5.png" }) {
@@ -51,9 +43,7 @@ const Screenshots = () => {
           original {
             src
           }
-          fixed(width: 320) {
+          gatsbyImageData(layout: FIXED, width: 400)
-            ...GatsbyImageSharpFixed
-          }
         }
       }
     }
@@ -74,7 +64,7 @@ const Screenshots = () => {
           >
             <span className="sr-only">Reactive Resume Screenshot</span>
             <GatsbyImage
-              fixed={screenshots[x].childImageSharp.fixed}
+              image={screenshots[x].childImageSharp.gatsbyImageData}
               alt="Reactive Resume Screenshot"
             />
           </a>

src/components/router/PrivateRoute.js

@@ -1,7 +1,7 @@
 import { navigate } from 'gatsby';
 import React, { memo, useContext } from 'react';
-import UserContext from '../../contexts/UserContext';
 import LoadingScreen from './LoadingScreen';
+import UserContext from '../../contexts/UserContext';
 
 const PrivateRoute = ({ component: Component, ...props }) => {
   const { user, loading } = useContext(UserContext);

src/components/shared/Avatar.js

@@ -1,11 +1,11 @@
-import cx from 'classnames';
-import { toUrl } from 'gatsby-source-gravatar';
-import React, { memo, useContext, useMemo, useState } from 'react';
 import { Menu, MenuItem } from '@material-ui/core';
+import { toUrl } from 'gatsby-source-gravatar';
 import { useTranslation } from 'react-i18next';
+import React, { memo, useContext, useMemo, useState } from 'react';
+import cx from 'classnames';
 import UserContext from '../../contexts/UserContext';
-import styles from './Avatar.module.css';
 import { handleKeyUp } from '../../utils';
+import * as styles from './Avatar.module.css';
 
 const Avatar = ({ className }) => {
   const { t } = useTranslation();
@@ -20,9 +20,10 @@ const Avatar = ({ className }) => {
     handleClose();
   };
 
-  const photoURL = useMemo(() => toUrl(user.email || '', 'size=128&d=retro'), [
+  const photoURL = useMemo(
-    user.email,
+    () => toUrl(user.email || '', 'size=128&d=retro'),
-  ]);
+    [user.email],
+  );
 
   return (
     <div>

src/components/shared/Button.js

@@ -1,8 +1,8 @@
-import cx from 'classnames';
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
+import cx from 'classnames';
 import { handleKeyUp } from '../../utils';
-import styles from './Button.module.css';
+import * as styles from './Button.module.css';
 
 const Button = ({
   icon,
@@ -22,7 +22,7 @@ const Button = ({
       onClick={isLoading ? undefined : onClick}
       className={cx(styles.container, className, {
         [styles.outline]: outline,
-        [styles.delete]: isDelete,
+        [styles.remove]: isDelete,
       })}
     >
       {icon && <Icon size="14" className="mr-3" />}

src/components/shared/Button.module.css

@@ -31,14 +31,14 @@
   @apply outline-none;
 }
 
-.container.delete {
+.container.remove {
   @apply bg-red-600 border-red-600 text-white;
 }
 
-.container.delete:hover {
+.container.remove:hover {
   @apply bg-red-700 border-red-700;
 }
 
-.container.delete:focus {
+.container.remove:focus {
   @apply outline-none;
 }

src/components/shared/Heading.js

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { useSelector } from '../../contexts/ResumeContext';
 
 const Heading = ({ id }) => {

src/components/shared/Input.js

@@ -1,13 +1,13 @@
-import cx from 'classnames';
-import { isFunction } from 'lodash';
-import React, { memo, useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
 import { FaAngleDown } from 'react-icons/fa';
 import { MdOpenInNew } from 'react-icons/md';
+import { Trans, useTranslation } from 'react-i18next';
+import { isFunction } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
+import React, { memo, useEffect, useState } from 'react';
+import cx from 'classnames';
 import { useDispatch, useSelector } from '../../contexts/ResumeContext';
 import { handleKeyUp } from '../../utils';
-import styles from './Input.module.css';
+import * as styles from './Input.module.css';
 
 const Input = ({
   name,

src/components/shared/Logo.js

@@ -1,17 +1,15 @@
-import cx from 'classnames';
 import { graphql, useStaticQuery } from 'gatsby';
-import GatsbyImage from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import React, { memo } from 'react';
-import styles from './Logo.module.css';
+import cx from 'classnames';
+import * as styles from './Logo.module.css';
 
 const Logo = ({ size = '256px', className }) => {
   const { file } = useStaticQuery(graphql`
     query {
       file(relativePath: { eq: "logo.png" }) {
         childImageSharp {
-          fluid(maxWidth: 512) {
+          gatsbyImageData(layout: FIXED)
-            ...GatsbyImageSharpFluid
-          }
         }
       }
     }
@@ -20,9 +18,10 @@ const Logo = ({ size = '256px', className }) => {
   return (
     <GatsbyImage
       loading="eager"
+      alt="Reactive Resume"
       className={cx(styles.logo, className)}
       style={{ width: size, height: size }}
-      fluid={file.childImageSharp.fluid}
+      image={file.childImageSharp.gatsbyImageData}
     />
   );
 };

src/components/shared/PhotoUpload.js

@@ -1,11 +1,11 @@
-import { Tooltip } from '@material-ui/core';
-import React, { memo, useContext, useRef } from 'react';
 import { MdFileUpload } from 'react-icons/md';
+import { Tooltip } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import StorageContext from '../../contexts/StorageContext';
+import React, { memo, useContext, useRef } from 'react';
 import { handleKeyUp } from '../../utils';
 import Input from './Input';
-import styles from './PhotoUpload.module.css';
+import * as styles from './PhotoUpload.module.css';
+import StorageContext from '../../contexts/StorageContext';
 
 const PhotoUpload = () => {
   const fileInputRef = useRef(null);

src/components/shared/SectionIcon.js

@@ -1,8 +1,8 @@
-import { Tooltip } from '@material-ui/core';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Link } from 'react-scroll';
-import styles from './SectionIcon.module.css';
+import { Tooltip } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
+import * as styles from './SectionIcon.module.css';
 
 const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
   const { t } = useTranslation();

src/components/shared/Wrapper.js

@@ -1,6 +1,6 @@
-import React, { memo, useEffect } from 'react';
-import { Slide, toast } from 'react-toastify';
 import { Helmet } from 'react-helmet';
+import { Slide, toast } from 'react-toastify';
+import React, { memo, useEffect } from 'react';
 import ModalRegistrar from '../../modals/ModalRegistrar';
 
 const Wrapper = ({ children }) => {

src/contexts/DatabaseContext.js

@@ -1,10 +1,10 @@
-import firebase from 'gatsby-plugin-firebase';
 import { debounce } from 'lodash';
-import ShortUniqueId from 'short-unique-id';
 import React, { createContext, memo, useContext, useState } from 'react';
+import ShortUniqueId from 'short-unique-id';
+import firebase from 'gatsby-plugin-firebase';
 import UserContext from './UserContext';
-import initialState from '../data/initialState.json';
 import { getUnsplashPhoto } from '../utils';
+import initialState from '../data/initialState.json';
 
 const DEBOUNCE_WAIT_TIME = 4000;
 

src/contexts/ResumeContext.js

@@ -1,15 +1,14 @@
-import arrayMove from 'array-move';
-import { v4 as uuidv4 } from 'uuid';
 import {
   clone,
   findIndex,
   get,
+  has,
   isUndefined,
   merge,
-  setWith,
   set,
-  has,
+  setWith,
 } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
 import React, {
   createContext,
   memo,
@@ -17,10 +16,11 @@ import React, {
   useContext,
   useReducer,
 } from 'react';
+import arrayMove from 'array-move';
 import i18next from 'i18next';
 import demoState from '../data/demoState.json';
-import initialState from '../data/initialState.json';
 import DatabaseContext from './DatabaseContext';
+import initialState from '../data/initialState.json';
 
 const ResumeContext = createContext({});
 

src/contexts/SettingsContext.js

@@ -1,5 +1,5 @@
-import i18next from 'i18next';
 import React, { createContext, memo, useEffect, useState } from 'react';
+import i18next from 'i18next';
 import themeConfig from '../data/themeConfig';
 
 const languageStorageItemKey = 'language';

src/contexts/StorageContext.js

@@ -1,6 +1,6 @@
-import firebase from 'gatsby-plugin-firebase';
-import React, { createContext, memo, useContext, useRef } from 'react';
 import { toast } from 'react-toastify';
+import React, { createContext, memo, useContext, useRef } from 'react';
+import firebase from 'gatsby-plugin-firebase';
 import { isFileImage } from '../utils';
 import { useDispatch, useSelector } from './ResumeContext';
 import UserContext from './UserContext';

src/contexts/UserContext.js

@@ -1,8 +1,8 @@
 import { navigate } from '@reach/router';
-import firebase from 'gatsby-plugin-firebase';
 import { pick } from 'lodash';
-import React, { createContext, memo, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
+import React, { createContext, memo, useEffect, useState } from 'react';
+import firebase from 'gatsby-plugin-firebase';
 import useAuthState from '../hooks/useAuthState';
 
 const defaultUser = {

src/data/rightSections.js

@@ -2,11 +2,11 @@ import {
   MdColorLens,
   MdDashboard,
   MdFontDownload,
+  MdFormatSize,
   MdImportExport,
   MdInfo,
   MdSettings,
   MdStyle,
-  MdFormatSize,
 } from 'react-icons/md';
 
 export default [

src/i18n/index.js

@@ -1,5 +1,5 @@
-import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import i18n from 'i18next';
 import resources from './locales';
 
 const languages = [

src/i18n/locales/index.js

@@ -14,8 +14,8 @@ import it from './it.json';
 import ja from './ja.json';
 import kn from './kn.json';
 import lt from './lt.json';
-import nl from './nl.json';
 import nb from './nb.json';
+import nl from './nl.json';
 import pl from './pl.json';
 import ptBr from './pt-br.json';
 import ptPt from './pt-pt.json';

src/modals/AuthModal.js

@@ -1,10 +1,10 @@
 import { navigate } from 'gatsby';
-import React, { memo, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import React, { memo, useContext, useEffect, useState } from 'react';
+import BaseModal from './BaseModal';
 import Button from '../components/shared/Button';
 import ModalContext from '../contexts/ModalContext';
 import UserContext from '../contexts/UserContext';
-import BaseModal from './BaseModal';
 
 const AuthModal = () => {
   const { t } = useTranslation();
@@ -13,9 +13,8 @@ const AuthModal = () => {
   const [isLoadingAnonymous, setLoadingAnonymous] = useState(false);
 
   const { emitter, events } = useContext(ModalContext);
-  const { user, loginWithGoogle, loginAnonymously, logout } = useContext(
+  const { user, loginWithGoogle, loginAnonymously, logout } =
-    UserContext,
+    useContext(UserContext);
-  );
 
   useEffect(() => {
     const unbind = emitter.on(events.AUTH_MODAL, () => setOpen(true));

src/modals/BaseModal.js

@@ -1,11 +1,11 @@
 import { Backdrop, Fade, Modal } from '@material-ui/core';
-import { isFunction } from 'lodash';
-import React, { forwardRef, memo, useImperativeHandle } from 'react';
-import { useTranslation } from 'react-i18next';
 import { MdClose } from 'react-icons/md';
+import { isFunction } from 'lodash';
+import { useTranslation } from 'react-i18next';
+import React, { forwardRef, memo, useImperativeHandle } from 'react';
 import Button from '../components/shared/Button';
 import { handleKeyUp } from '../utils';
-import styles from './BaseModal.module.css';
+import * as styles from './BaseModal.module.css';
 
 const BaseModal = forwardRef(
   ({ title, state, children, action, hideActions = false, onDestroy }, ref) => {

src/modals/DataModal.js

@@ -1,14 +1,14 @@
-import { useFormikContext } from 'formik';
 import { isEmpty, isFunction } from 'lodash';
-import React, { memo, useContext, useEffect, useRef, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
+import { useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuidv4 } from 'uuid';
+import React, { memo, useContext, useEffect, useRef, useState } from 'react';
+import { useDispatch } from '../contexts/ResumeContext';
+import BaseModal from './BaseModal';
 import Button from '../components/shared/Button';
 import ModalContext from '../contexts/ModalContext';
-import { useDispatch } from '../contexts/ResumeContext';
 import { getModalText } from '../utils';
-import BaseModal from './BaseModal';
 
 const DataModal = ({
   name,

src/modals/ModalRegistrar.js

@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import AuthModal from './AuthModal';
-import ResumeModal from './ResumeModal';
 import AwardModal from './sections/AwardModal';
 import CertificateModal from './sections/CertificateModal';
 import EducationModal from './sections/EducationModal';
@@ -10,6 +9,7 @@ import ImportModal from './sections/ImportModal';
 import LanguageModal from './sections/LanguageModal';
 import ProjectModal from './sections/ProjectModal';
 import ReferenceModal from './sections/ReferenceModal';
+import ResumeModal from './ResumeModal';
 import SkillModal from './sections/SkillModal';
 import SocialModal from './sections/SocialModal';
 import WorkModal from './sections/WorkModal';

src/modals/ResumeModal.js

@@ -1,12 +1,12 @@
-import { Formik } from 'formik';
-import React, { memo, useContext } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../components/shared/Input';
+import React, { memo, useContext } from 'react';
-import ModalEvents from '../constants/ModalEvents';
-import DatabaseContext from '../contexts/DatabaseContext';
 import { getFieldProps } from '../utils';
 import DataModal from './DataModal';
+import DatabaseContext from '../contexts/DatabaseContext';
+import Input from '../components/shared/Input';
+import ModalEvents from '../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/AwardModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
+import { Formik } from 'formik';
-import ModalEvents from '../../constants/ModalEvents';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   title: '',

src/modals/sections/CertificateModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
+import { Formik } from 'formik';
-import ModalEvents from '../../constants/ModalEvents';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   title: '',

src/modals/sections/EducationModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
+import React, { memo } from 'react';
-import ModalEvents from '../../constants/ModalEvents';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   institution: '',

src/modals/sections/ExportModal.js

@@ -1,15 +1,15 @@
+import { FaPrint } from 'react-icons/fa';
+import { clone } from 'lodash';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import React, { memo, useContext, useEffect, useState } from 'react';
 import download from 'downloadjs';
 import firebase from 'gatsby-plugin-firebase';
-import { clone } from 'lodash';
+import { useSelector } from '../../contexts/ResumeContext';
-import React, { memo, useContext, useEffect, useState } from 'react';
+import BaseModal from '../BaseModal';
-import { useTranslation } from 'react-i18next';
-import { FaPrint } from 'react-icons/fa';
-import { toast } from 'react-toastify';
 import Button from '../../components/shared/Button';
 import ModalContext from '../../contexts/ModalContext';
-import { useSelector } from '../../contexts/ResumeContext';
 import { b64toBlob } from '../../utils';
-import BaseModal from '../BaseModal';
 
 const ExportModal = () => {
   const state = useSelector();

src/modals/sections/HobbyModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
+import React, { memo } from 'react';
-import ModalEvents from '../../constants/ModalEvents';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/ImportModal.js

@@ -1,10 +1,10 @@
 import { Tooltip } from '@material-ui/core';
-import React, { memo, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from '../../components/shared/Button';
+import React, { memo, useContext, useEffect, useRef, useState } from 'react';
-import ModalContext from '../../contexts/ModalContext';
 import { useDispatch } from '../../contexts/ResumeContext';
 import BaseModal from '../BaseModal';
+import Button from '../../components/shared/Button';
+import ModalContext from '../../contexts/ModalContext';
 
 const ImportModal = () => {
   const { t } = useTranslation();

src/modals/sections/LanguageModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
+import { Formik } from 'formik';
-import ModalEvents from '../../constants/ModalEvents';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/ProjectModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
+import React, { memo } from 'react';
-import ModalEvents from '../../constants/ModalEvents';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   title: '',

src/modals/sections/ReferenceModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
+import React, { memo } from 'react';
-import ModalEvents from '../../constants/ModalEvents';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/SkillModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
+import { Formik } from 'formik';
-import ModalEvents from '../../constants/ModalEvents';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   name: '',

src/modals/sections/SocialModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
-import Input from '../../components/shared/Input';
+import { Formik } from 'formik';
-import ModalEvents from '../../constants/ModalEvents';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   url: '',

src/modals/sections/WorkModal.js

@@ -1,11 +1,11 @@
-import { Formik } from 'formik';
-import React, { memo } from 'react';
 import * as Yup from 'yup';
+import { Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
-import Input from '../../components/shared/Input';
+import React, { memo } from 'react';
-import ModalEvents from '../../constants/ModalEvents';
 import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';
+import Input from '../../components/shared/Input';
+import ModalEvents from '../../constants/ModalEvents';
 
 const initialValues = {
   company: '',

src/pages/404.js

@@ -1,5 +1,5 @@
-import { navigate } from 'gatsby';
 import { memo, useEffect } from 'react';
+import { navigate } from 'gatsby';
 
 const NotFound = () => {
   useEffect(() => {

src/pages/app.js

@@ -1,10 +1,10 @@
 import { Redirect, Router } from '@reach/router';
 import React, { memo } from 'react';
-import PrivateRoute from '../components/router/PrivateRoute';
-import Wrapper from '../components/shared/Wrapper';
-import NotFound from './404';
 import Builder from './app/builder';
 import Dashboard from './app/dashboard';
+import NotFound from './404';
+import PrivateRoute from '../components/router/PrivateRoute';
+import Wrapper from '../components/shared/Wrapper';
 
 const App = () => (
   <Wrapper>

src/pages/app/__tests__/builder.dataPersistence.test.js

@@ -3,8 +3,8 @@ import { fireEvent, screen } from '@testing-library/react';
 import { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import {
-  setupAndWait,
   expectDatabaseUpdateToHaveCompleted,
+  setupAndWait,
 } from './helpers/builder';
 
 const testTimeoutInMilliseconds = 20000;

src/pages/app/__tests__/builder.errorHandling.test.js

@@ -1,5 +1,5 @@
-import { navigate as mockNavigateFunction } from 'gatsby';
 import { fireEvent, getByText, screen, waitFor } from '@testing-library/react';
+import { navigate as mockNavigateFunction } from 'gatsby';
 
 import setup from './helpers/builder';
 

src/pages/app/__tests__/builder.settings.test.js

@@ -5,8 +5,8 @@ import { DatabaseConstants } from 'gatsby-plugin-firebase';
 import { languageStorageItemKey } from '../../../contexts/SettingsContext';
 
 import {
-  setupAndWait,
   expectDatabaseUpdateToHaveCompleted,
+  setupAndWait,
 } from './helpers/builder';
 
 const testTimeoutInMilliseconds = 20000;

src/pages/app/__tests__/builder.skills.test.js

@@ -6,10 +6,10 @@ import { DatabaseConstants } from 'gatsby-plugin-firebase';
 import { dataTestIdPrefix as listItemDataTestIdPrefix } from '../../../components/builder/lists/ListItem';
 
 import {
-  setupAndWait,
-  expectDatabaseUpdateToHaveCompleted,
   dragAndDropDirectionDown,
   dragAndDropListItem,
+  expectDatabaseUpdateToHaveCompleted,
+  setupAndWait,
 } from './helpers/builder';
 
 const testTimeoutInMilliseconds = 20000;

src/pages/app/__tests__/dashboard.createResume.test.js

@@ -10,12 +10,12 @@ import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import { createResumeButtonDataTestId } from '../../../components/dashboard/CreateResume';
 import {
-  waitForResumeToBeRenderedInPreview,
-  expectResumeToBeRenderedInPreview,
-  waitForModalWindowToHaveBeenClosed,
   dismissNotification,
-  unsplashPhotoResponseUrl,
+  expectResumeToBeRenderedInPreview,
   setupWithFetchMockAndWait,
+  unsplashPhotoResponseUrl,
+  waitForModalWindowToHaveBeenClosed,
+  waitForResumeToBeRenderedInPreview,
 } from './helpers/dashboard';
 
 const tooShortResumeName = 'CV 1';

src/pages/app/__tests__/dashboard.deleteResume.test.js

@@ -8,14 +8,14 @@ import {
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
-import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 import {
+  dismissNotification,
+  expectResumeToBeRenderedInPreview,
+  findAndDismissNotification,
   setupAndWait,
   waitForResumeToDisappearFromPreview,
-  expectResumeToBeRenderedInPreview,
-  dismissNotification,
-  findAndDismissNotification,
 } from './helpers/dashboard';
+import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 
 const waitForDatabaseRemoveToHaveCompleted = async (
   mockDatabaseRemoveFunction,
@@ -73,11 +73,8 @@ async function setup() {
 }
 
 it('removes resume from database and preview', async () => {
-  const {
+  const { resumeToDelete, undeletedResume, mockDatabaseRemoveFunction } =
-    resumeToDelete,
+    await setup();
-    undeletedResume,
-    mockDatabaseRemoveFunction,
-  } = await setup();
 
   await findAndDismissNotification();
 

src/pages/app/__tests__/dashboard.duplicateResume.test.js

@@ -7,13 +7,13 @@ import {
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
-import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 import {
-  setupWithFetchMockAndWait,
-  waitForResumeToBeRenderedInPreview,
   expectResumeToBeRenderedInPreview,
+  setupWithFetchMockAndWait,
   unsplashPhotoResponseUrl,
+  waitForResumeToBeRenderedInPreview,
 } from './helpers/dashboard';
+import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 
 async function setup() {
   const user = DatabaseConstants.user1;

src/pages/app/__tests__/dashboard.rendering.test.js

@@ -4,9 +4,9 @@ import { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import { createResumeButtonDataTestId } from '../../../components/dashboard/CreateResume';
 import setup, {
-  setupAndWait,
-  expectResumeToBeRenderedInPreview,
   expectLoadingScreenToBeRendered,
+  expectResumeToBeRenderedInPreview,
+  setupAndWait,
   waitForLoadingScreenToDisappear,
 } from './helpers/dashboard';
 

src/pages/app/__tests__/helpers/builder.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   fireEvent,
   render,
@@ -6,21 +5,22 @@ import {
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
+import React from 'react';
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
-import { dataTestId as loadingScreenTestId } from '../../../../components/router/LoadingScreen';
-import { SettingsProvider } from '../../../../contexts/SettingsContext';
-import { ModalProvider } from '../../../../contexts/ModalContext';
-import { UserProvider } from '../../../../contexts/UserContext';
 import {
   DatabaseProvider,
   DebounceWaitTime,
 } from '../../../../contexts/DatabaseContext';
+import { ModalProvider } from '../../../../contexts/ModalContext';
 import { ResumeProvider } from '../../../../contexts/ResumeContext';
+import { SettingsProvider } from '../../../../contexts/SettingsContext';
 import { StorageProvider } from '../../../../contexts/StorageContext';
-import Wrapper from '../../../../components/shared/Wrapper';
+import { UserProvider } from '../../../../contexts/UserContext';
+import { dataTestId as loadingScreenTestId } from '../../../../components/router/LoadingScreen';
 import Builder from '../../builder';
+import Wrapper from '../../../../components/shared/Wrapper';
 
 const waitForDatabaseUpdateToHaveCompletedFn = async (
   mockDatabaseUpdateFunction,

src/pages/app/__tests__/helpers/dashboard.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   fireEvent,
   render,
@@ -6,6 +5,7 @@ import {
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
+import React from 'react';
 
 import fetchMock from 'jest-fetch-mock';
 
@@ -13,16 +13,16 @@ import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
 import '../../../../i18n/index';
 import '../../../../utils/dayjs';
-import { dataTestId as loadingScreenTestId } from '../../../../components/router/LoadingScreen';
-import { unsplashPhotoRequestUrl, delay } from '../../../../utils/index';
-import { SettingsProvider } from '../../../../contexts/SettingsContext';
-import { ModalProvider } from '../../../../contexts/ModalContext';
-import { UserProvider } from '../../../../contexts/UserContext';
 import { DatabaseProvider } from '../../../../contexts/DatabaseContext';
+import { ModalProvider } from '../../../../contexts/ModalContext';
 import { ResumeProvider } from '../../../../contexts/ResumeContext';
+import { SettingsProvider } from '../../../../contexts/SettingsContext';
 import { StorageProvider } from '../../../../contexts/StorageContext';
-import Wrapper from '../../../../components/shared/Wrapper';
+import { UserProvider } from '../../../../contexts/UserContext';
+import { delay, unsplashPhotoRequestUrl } from '../../../../utils/index';
+import { dataTestId as loadingScreenTestId } from '../../../../components/router/LoadingScreen';
 import Dashboard from '../../dashboard';
+import Wrapper from '../../../../components/shared/Wrapper';
 
 const waitForResumeToBeRenderedInPreview = async (resumeName) => {
   await screen.findByText(resumeName);

src/pages/app/builder.js

@@ -1,15 +1,15 @@
 import { navigate } from 'gatsby';
-import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
-import Artboard from '../../components/builder/center/Artboard';
+import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
-import LeftSidebar from '../../components/builder/left/LeftSidebar';
+import * as styles from './builder.module.css';
-import RightSidebar from '../../components/builder/right/RightSidebar';
-import LoadingScreen from '../../components/router/LoadingScreen';
-import DatabaseContext from '../../contexts/DatabaseContext';
 import { useDispatch } from '../../contexts/ResumeContext';
+import Artboard from '../../components/builder/center/Artboard';
 import Button from '../../components/shared/Button';
-import styles from './builder.module.css';
+import DatabaseContext from '../../contexts/DatabaseContext';
+import LeftSidebar from '../../components/builder/left/LeftSidebar';
+import LoadingScreen from '../../components/router/LoadingScreen';
+import RightSidebar from '../../components/builder/right/RightSidebar';
 
 const Builder = ({ id }) => {
   const dispatch = useDispatch();

src/pages/app/dashboard.js

@@ -1,11 +1,11 @@
-import firebase from 'gatsby-plugin-firebase';
-import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+import firebase from 'gatsby-plugin-firebase';
 import CreateResume from '../../components/dashboard/CreateResume';
+import LoadingScreen from '../../components/router/LoadingScreen';
 import ResumePreview from '../../components/dashboard/ResumePreview';
 import TopNavbar from '../../components/dashboard/TopNavbar';
-import LoadingScreen from '../../components/router/LoadingScreen';
 
 const Dashboard = ({ user }) => {
   const { t } = useTranslation();

src/pages/faq.js

@@ -1,7 +1,7 @@
-import { Link } from '@reach/router';
-import React from 'react';
 import { Helmet } from 'react-helmet';
+import { Link } from '@reach/router';
 import { MdKeyboardArrowLeft } from 'react-icons/md';
+import React from 'react';
 import Wrapper from '../components/shared/Wrapper';
 
 const FrequentlyAskedQuestions = () => (

src/pages/index.js

@@ -1,10 +1,10 @@
-import { Link } from '@reach/router';
-import React, { memo } from 'react';
-import { Helmet } from 'react-helmet';
-import { useTranslation } from 'react-i18next';
 import { FaUserSecret, FaWalking } from 'react-icons/fa';
+import { Helmet } from 'react-helmet';
 import { IoIosRocket } from 'react-icons/io';
+import { Link } from '@reach/router';
 import { RiRefreshLine } from 'react-icons/ri';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
 import Hero from '../components/landing/Hero';
 import Screenshots from '../components/landing/Screenshots';
 import Wrapper from '../components/shared/Wrapper';

src/pages/r.js

@@ -1,8 +1,8 @@
 import { Redirect, Router } from '@reach/router';
 import React, { memo } from 'react';
-import Wrapper from '../components/shared/Wrapper';
-import ResumeViewer from './r/view';
 import NotFound from './404';
+import ResumeViewer from './r/view';
+import Wrapper from '../components/shared/Wrapper';
 
 const ResumeRouter = () => (
   <Wrapper>