Additional cleanup for root and firebase package (#589)

* Clean up comments in index.tsx

* Fix compilation errors

* Minor clean-up

* Add TODOs

* Remove unused issue-states config

* Clean up

* Review TODOs

Author: IgorKrupenja

.github/issue-states.yml

@@ -4,9 +4,6 @@
 # testing
 **/coverage/
 
-# production
-**/build/
-
 # Firebase
 .firebase
 .firebaserc

.gitignore

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Igor Krupenja
+Copyright (c) 2022 Igor Krupenja
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -57,6 +57,7 @@ Already have some document or spreadsheet with your hiking/climbing gear and wan
 
 - Add unit tests for functionality that is ready.
 - Improve code structure and maintainability.
+- Streamlined and fully automated the deployment process.
 
 ## Changelog
 
@@ -143,7 +144,6 @@ Please note that the development environment works completely fine on macOS and
 3. Go to `packages/web-app` and create `.env.development` and `.env.production` files with the variables from `firebaseConfig`. The file format should be like this:
 
 ```shell
-# Firebase
 REACT_APP_FIREBASE_API_KEY="..."
 REACT_APP_FIREBASE_AUTH_DOMAIN="..."
 REACT_APP_FIREBASE_DATABASE_URL="..."
@@ -152,8 +152,6 @@ REACT_APP_FIREBASE_STORAGE_BUCKET="..."
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID="..."
 REACT_APP_FIREBASE_APP_ID="..."
 REACT_APP_FIREBASE_MEASUREMENT_ID="..."
-# GCP Cloud Storage root URL
-REACT_APP_GCP_STORAGE_URL="https://storage.googleapis.com/${REACT_APP_FIREBASE_STORAGE_BUCKET}"
 ```
 
 ##### Caveats ⚠️
@@ -191,7 +189,6 @@ REACT_APP_GCP_STORAGE_URL="https://storage.googleapis.com/${REACT_APP_FIREBASE_S
 
 ```shell
 FIREBASE_PROJECT_ID="..."
-FIREBASE_TOKEN="..."
 ```
 
 Note: You can change additional settings like regions and Cloud Storage bucket name in [the `.env` file](packages/firebase/.env).

README.md

@@ -1,4 +1,3 @@
-# Firebase functions - functions do to not use Firebase project region automatically
 FIREBASE_FUNCTIONS_REGION="europe-west1"
 GCP_STORAGE_BACKUPS_REGION="EU"
 GCP_STORAGE_BACKUPS_BUCKET="zaino-backups"

packages/firebase/.env

@@ -1,3 +1,6 @@
+# production
+**/build/
+
 # env
 .env.development
 .env.production

packages/firebase/.gitignore

@@ -3,6 +3,8 @@
     "foxundermoon.shell-format",
     "timonwong.shellcheck",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "chflick.firecode",
+    "jsayol.firebase-explorer"
   ]
 }

packages/firebase/.vscode/extensions.json

@@ -1,2 +1,3 @@
+REACT_APP_GCP_STORAGE_URL="https://storage.googleapis.com/${REACT_APP_FIREBASE_STORAGE_BUCKET}"
 # Disable opening a browser tab with app on dev server start
 BROWSER=none

packages/web-app/.env

@@ -1,3 +1,6 @@
+# production
+**/build/
+
 # env
 .env.development
 .env.test

packages/web-app/.gitignore

@@ -181,7 +181,7 @@ module.exports = function (webpackEnv) {
           },
         },
         {
-          // make variables and mixins accessible in every SCSS file without explicit import
+          // Igor: make variables and mixins accessible in every SCSS file without explicit import
           loader: 'sass-resources-loader',
           options: {
             resources: ['src/styles/base/_settings.scss', 'src/styles/base/_mixins.scss'],

packages/web-app/config/webpack.config.js

@@ -1,10 +1,11 @@
 #!/bin/bash
 # shellcheck disable=SC2046,SC2005,SC2002
 
-node scripts/build.js
-
 # Get variables from .env file
 export $(echo $(cat .env."$1" | sed 's/#.*//g' | sed 's/\r//g' | xargs) | envsubst)
+
+node scripts/build.js
+
 gcloud config set project "$REACT_APP_FIREBASE_PROJECT_ID"
 gsutil -m cp -r "src/images/copyrighted/*" gs://"$REACT_APP_FIREBASE_STORAGE_BUCKET"/
 gsutil -m acl set -R -a public-read gs://"$REACT_APP_FIREBASE_STORAGE_BUCKET"/

packages/web-app/scripts/deploy.sh

@@ -7,7 +7,7 @@ import { EditIcon } from '../../Icons/EditIcon';
 import { SelectOption, SelectPopover } from '../SelectPopover';
 import { colorSelectStyles } from './style';
 
-export type ColorSelectOption = {
+type ColorSelectOption = {
   value: ColorName;
   label: string;
   hexValue: string;

packages/web-app/src/components/Common/Selects/ColorSelect/ColorSelect.tsx

@@ -1,6 +1,5 @@
 import { StylesConfig } from 'react-select';
 import { SelectOption } from '.';
-import { Color } from '../../../../constants/Colors';
 import checkbox from '../../../../images/icons/check-mark.svg';
 import styles from '../../../../styles/base/_export.scss';
 
@@ -66,13 +65,6 @@ export const commonSelectStyles: Partial<StylesConfig<SelectOption, boolean>> =
   }),
 };
 
-export type OptionStyleArguments = {
-  // for some reason react-select requires this key to be named "data", breaks otherwise
-  data: Color;
-  isFocused?: boolean;
-  isSelected?: boolean;
-};
-
 export const colorDot = (color = styles.lightGrey, marginLeft = '2.2rem') => ({
   alignItems: 'center',
   display: 'flex',

packages/web-app/src/components/Common/Selects/SelectPopover/style.ts

@@ -13,7 +13,6 @@ export const AccountDetails = () => {
   const { name, email, photoUrl } = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const handleLogout = async () => {
-    // TODO: Having Firebase Auth sign out here is a temporary workaround for #572
     await firebase.auth().signOut();
     dispatch(logout());
   };

packages/web-app/src/components/Header/AccountDetails/AccountDetails.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import ReactModal from 'react-modal';
 import './style.scss';
 

packages/web-app/src/components/ItemModal/Modal/Modal.tsx

@@ -95,13 +95,12 @@ export const LabelForm = ({
       </Row>
       {nameError && <FormError className="label-form__input__error">{nameError}</FormError>}
       <Row className="label-form__buttons">
+        {/* todo move to parent component */}
         <Button
           className="button--grey label-form__cancel"
           onClick={() => {
             toggleForm();
-            // reset label name preview on typing if cancelling edit
             setLabelBadgeText(initialName);
-            // also reset label badge preview color
             setLabelBadgeColor(initialColor);
           }}
         >

packages/web-app/src/components/Labels/LabelForm/LabelForm.tsx

@@ -16,15 +16,15 @@ type NewLabelProps = {
 export const NewLabel = ({ toggleForm }: NewLabelProps) => {
   const dispatch = useDispatch();
   const [colorName, setColorName] = useState(getRandomColor().name);
-  const newLabel: Label = {
+  const label: Label = {
     id: uuid(),
     name: '',
     colorName: colorName,
     itemUniqueCount: 0,
     itemTotalCount: 0,
     lastSortIndex: 0,
   };
-  const [name, setName] = useState(newLabel.name);
+  const [name, setName] = useState(label.name);
 
   return (
     <div className="new-label__container">
@@ -33,7 +33,7 @@ export const NewLabel = ({ toggleForm }: NewLabelProps) => {
       </LabelBadge>
       <LabelForm
         className="new-label"
-        label={newLabel}
+        label={label}
         // lastSortIndex to keep newly-created label at the top of the list -- if sorting by name
         onSubmit={(label) => dispatch(addLabel({ ...label, lastSortIndex: 0 }))}
         toggleForm={toggleForm}

packages/web-app/src/components/Labels/NewLabel/NewLabel.tsx

@@ -12,8 +12,8 @@ export const PrivacyPolicy = () => {
     } catch {
       console.warn(
         [
-          'Privacy policy content not found. Please create a file named "PrivacyPolicyContent.tsx" ',
-          'in the "src/components/pages/PrivacyPolicy" directory.',
+          'Privacy policy content not found. Please create a file named "PrivacyPolicyContent.tsx"',
+          ' in the "src/components/pages/PrivacyPolicy" directory.',
         ].join()
       );
       return {
@@ -27,7 +27,6 @@ export const PrivacyPolicy = () => {
       <p className="privacy-policy__title">Zaino</p>
       <BackLink />
       <PrivacyPolicyContent />
-
       <BackLink className="back-link--large-margin" />
     </main>
   );

packages/web-app/src/components/pages/PrivacyPolicy/PrivacyPolicy.tsx

@@ -1,7 +1,7 @@
 import { ColorName } from '@zaino/shared';
 import styles from '../styles/base/_export.scss';
 
-// TODO: split into three files
+// TODO: split into three/two files?
 export type Color = {
   name: ColorName;
   fancyName: string;

packages/web-app/src/constants/Colors.ts

@@ -10,17 +10,17 @@ import { asciiLogo } from './utils/asciiLogo';
 
 firebase.auth().onAuthStateChanged(async (user) => {
   if (user) {
-    // on log in
+    // User is signed in
     const credential = await firebase.auth().getRedirectResult();
-    // using store.dispatch as useDispatch cannot be used outside of functional components
+    // Using store.dispatch as useDispatch cannot be used outside of functional components
     await store.dispatch(
       handleLoginRedirect({ user, isNew: credential.additionalUserInfo?.isNewUser })
     );
     await store.dispatch(loadUserData(user.uid));
     console.log(asciiLogo);
   }
 
-  // re-render on both login and logout
+  // Re-render on both login and logout
   renderApp();
 });
 

packages/web-app/src/index.tsx

@@ -6,7 +6,6 @@ export enum CollectionSortOption {
   itemsLowest = 'Least items',
   itemsUniqueHighest = 'Most unique items',
   itemsUniqueLowest = 'Least unique items',
-  // see comments in labels slice for saveSortOrder
   lastSortOrder = 'Last sort order',
 }
 

packages/web-app/src/state/collectionSettings.ts

@@ -38,14 +38,14 @@ const selectFilteredInventoryItems = createSelector(
             return a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1;
           case ItemSortOption.weightHighest:
             if (a.weight === '') {
-              // sort empty weight items appear below 0g items
+              // sort empty weight items to appear below 0g items
               return 1;
             } else {
               return a.weight < b.weight ? 1 : -1;
             }
           case ItemSortOption.weightLowest:
             if (b.weight === '') {
-              // sort empty weight items appear above 0g items
+              // sort empty weight items to appear above 0g items
               return 1;
             } else {
               return a.weight > b.weight ? 1 : -1;

packages/web-app/src/state/selectors/items.ts

@@ -28,8 +28,7 @@ const categoriesSlice = createSlice({
         state.push(category);
       });
     },
-    // reset state action to be executed on logout
-    resetCategoriesState: () => [],
+    resetCategoriesState: () => initialState,
   },
 });
 

packages/web-app/src/state/slices/categories.ts

@@ -8,19 +8,15 @@ import { loadCategories } from './categories';
 import { loadItems } from './items';
 import { loadLabels } from './labels';
 
-/**
- * Process Firestore data to get Items and Labels as used in the app.
- *
- * @param snapshots Two snapshots with item and label data from Firestore.
- */
-const processData = (
+const processSnapshotData = (
   snapshots: firebase.firestore.QuerySnapshot<firebase.firestore.DocumentData>[]
 ) => {
   return snapshots.map((collection) =>
     collection.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
   ) as [Item[], Label[], Category[]];
 };
 
+// todo does it belong here?
 export const loadUserData = createAsyncThunk<void, string, { state: RootState }>(
   'dataLoader/loadUserData',
   async (uid, { dispatch }) => {
@@ -30,7 +26,7 @@ export const loadUserData = createAsyncThunk<void, string, { state: RootState }>
       db.collection(`users/${uid}/labels`).get(),
       db.collection(`users/${uid}/categories`).get(),
     ]);
-    const [items, labels, categories] = processData(snapshots);
+    const [items, labels, categories] = processSnapshotData(snapshots);
 
     batch(() => {
       dispatch(loadItems(items));
@@ -40,6 +36,7 @@ export const loadUserData = createAsyncThunk<void, string, { state: RootState }>
   }
 );
 
+// todo does it belong here?
 export const loadDemoData = createAsyncThunk<void, string, { state: RootState }>(
   'dataLoader/loadDemoData',
   async (uid, { dispatch }) => {
@@ -48,7 +45,7 @@ export const loadDemoData = createAsyncThunk<void, string, { state: RootState }>
       db.collection(`users/${uid}/items`).where('isFromDemoData', '==', true).get(),
       db.collection(`users/${uid}/labels`).where('isFromDemoData', '==', true).get(),
     ]);
-    const [items, labels] = processData(snapshots);
+    const [items, labels] = processSnapshotData(snapshots);
 
     batch(() => {
       dispatch(loadItems(items));

packages/web-app/src/state/slices/dataLoader.ts

@@ -107,6 +107,7 @@ const itemsSlice = createSlice({
         1
       );
     });
+    // todo reorder
     builder.addCase(batchUpdateItems.pending, (state, action) => {
       action.meta.arg.forEach((update) => {
         const index = state.findIndex((item) => item.id === update.id);
@@ -121,7 +122,7 @@ const itemsSlice = createSlice({
         );
       });
     });
-    // TODO: possibly add rejected handling here, #78
+    // TODO: add rejected handling here, #78
   },
 });
 

packages/web-app/src/state/slices/items.ts

@@ -1,6 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-export type ItemFilters = {
+type ItemFilters = {
   text: string;
   categoryId?: string;
   labels: string[];

packages/web-app/src/state/slices/itemsFilters.ts

@@ -61,7 +61,6 @@ export const batchDeleteLabels = createAsyncThunk<void, Label[], { state: RootSt
   }
 );
 
-// separate variable to annotate type
 const initialState: Label[] = [];
 
 const labelsSlice = createSlice({
@@ -135,7 +134,7 @@ const labelsSlice = createSlice({
       });
     },
     // reset action to be executed on logout
-    resetLabelsState: () => [],
+    resetLabelsState: () => initialState,
   },
   extraReducers: (builder) => {
     builder.addCase(addLabel.pending, (state, action) => {