merch store cms frontend

src/frontend/App.js

@@ -13,6 +13,8 @@ import PostingsRouter from './pages/postings/Postings.router';
 import SponsorsRouter from './pages/sponsors/Sponsors.router';
 import GeeseRouter from './pages/geese/Geese.router';
 import TeamDescriptionsRouter from './pages/team-descriptions/TeamDescriptions.router';
+import MerchStoreRouter from './pages/merch-store/Products.router'
+
 import { addAuthTokenToRequests } from './api/server';
 import BlogsRouter from './pages/blogs/Blogs.Router';
 
@@ -69,6 +71,11 @@ const App = () => {
           <TopBar />
           <BlogsRouter />
         </Route>
+        <Route path="/products">
+          {!token && <Redirect to="/sign-in" />}
+          <TopBar />
+          <MerchStoreRouter />
+        </Route>
         <Route component={NotFoundPage}>
           {/* {!token && <Redirect to="/sign-in" />} */}
           <TopBar />

src/frontend/api/index.js

@@ -7,6 +7,7 @@ import openingsDescription from './openings-description';
 import sponsors from './sponsors';
 import geeseInfo from './geese-info';
 import blogs from './blogs';
+import merchStore from './merch-store'
 
 export default {
   google: google(server),
@@ -16,5 +17,6 @@ export default {
   formUpload: formUpload(server),
   openingsDescription: openingsDescription(server),
   geeseInfo: geeseInfo(server),
-  blogs: blogs(server)
+  blogs: blogs(server),
+  merchStore: merchStore(server)
 };

src/frontend/api/merch-store.js

@@ -0,0 +1,26 @@
+const getProducts = (server) => () => server.get('/api/products');
+const getProductVariations = (server) => (id) =>
+  server.get(`/api/products/${id}/variations`);
+const updateProduct = (server) => (id, updatedProductInfo) =>
+  server.patch(`/api/products/${id}`, updatedProductInfo);
+const updateProductVariation = (server) => (variationId, productId, updatedVariationInfo) =>
+  server.patch(`/api/products/${productId}/variations/${variationId}`, updatedVariationInfo);
+const addProduct = (server) => (product) => 
+  server.post(`/api/products`, product);
+const addProductVariation = (server) => (productVariation) => 
+  server.post(`/api/products/${productVariation.productId}/variations`, productVariation);
+const deleteProduct = (server) => (id) =>
+  server.delete(`/api/products/${id}`);
+ const deleteProductVariation = (server) => (productId, variationId) =>
+  server.delete(`/api/products/${productId}/variations/${variationId}`);
+
+export default (server) => ({
+  getProducts: getProducts(server),
+  getProductVariations: getProductVariations(server),
+  updateProduct: updateProduct(server),
+  updateProductVariation:updateProductVariation(server),
+  addProduct: addProduct(server),
+  addProductVariation: addProductVariation(server),
+  deleteProduct: deleteProduct(server),
+  deleteProductVariation: deleteProductVariation(server),
+});

src/frontend/hooks/goose-form.js

@@ -6,7 +6,7 @@ import moment from 'moment';
 
 const useGooseForm = () => {
   const [gooseName, setGooseName] = useState('');
-  const [description, setDescription] = useState('');
+  const [description, setDescription] = useState(''); 
   const [images, setImages] = useState([]);
   const [imageUrls, setImageUrls] = useState([]);
   const [imagesToDelete, setImagesToDelete] = useState([]);

src/frontend/hooks/product-variations-form.js

@@ -0,0 +1,199 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import useProductVariations from './product-variations';
+import useProducts from './products';
+import api from '../api';
+import moment from 'moment';
+
+const useProductVariationsForm = () => {
+  const [productName, setProductName] = useState('');
+  const [productId, setProductId] = useState(null);
+  const [variationName, setVariationName] = useState('');
+  const [price, setPrice] = useState(null);
+  const [stock, setStock] = useState(null);
+  const [picture, setPicture] = useState(null);
+  const [pictureUrl, setPictureURL] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+  const history = useHistory();
+  const params = useParams();
+  const { products } = useProducts();
+  const { productVariations } = useProductVariations();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        let variation = {};
+        let product = {};
+
+        if (params.productId) {
+          product = await products.find(
+            (product) => product.id == params.productId,
+          );
+        }
+
+        if (params.variationId) {
+          const productVariationId = parseInt(params.variationId, 10);
+          variation = productVariations.find(
+            (variation) => variation.id === productVariationId,
+          );
+        }
+        setProductName(product.name);
+        setProductId(product.id);
+
+        setVariationName(variation.variationName);
+        setPrice(variation.price);
+        setStock(variation.stock);
+        setPictureURL(variation.picture);
+      } catch (err) {
+        console.error("Error init'ing product variation form info", err);
+      }
+    })();
+  }, [productVariations, products, params.variationId, params.productId]);
+
+  const imageUpload = (image) => {
+    setPicture(image);
+    setPictureURL(URL.createObjectURL(image));
+  };
+
+  const imageDelete = useCallback(() => {
+    setPicture(null);
+    setPictureURL(null);
+  }, [setPicture]);
+
+  const openModal = () => {
+    setShowModal(true);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
+  const closeForm = useCallback(() => {
+    history.push(`/products/${productId}/variations`);
+  }, [history, productId]);
+
+  const saveForm = useCallback(async () => {
+    try {
+      let newPictureUrl = pictureUrl;
+
+      if (picture instanceof File) {
+        const data = new FormData();
+        data.append('files', picture, picture.name);
+        const res = await api.formUpload(data);
+
+        newPictureUrl = res.data.data[0];
+      }
+
+      const currentDateTime = new Date();
+      const unixTimestamp = currentDateTime.getTime();
+
+      const productVariationInfo = {
+        variationName,
+        productId,
+        price,
+        stock,
+        picture: newPictureUrl,
+        lastUpdated: unixTimestamp,
+      };
+
+      if (variationName && price && stock && pictureUrl) {
+        if (params.variationId) {
+          await api.merchStore.updateProductVariation(
+            params.variationId,
+            productId,
+            productVariationInfo,
+          );
+        } else {
+          await api.merchStore.addProductVariation({
+            ...productVariationInfo,
+            productId,
+          });
+        }
+        setPicture(picture);
+      } else {
+        throw new Error('Please fill all the required fields.');
+      }
+      // onSuccess:
+      closeForm();
+    } catch (e) {
+      // TODO: Display "could not add/update" error to the user as dialogue.
+      console.error(e);
+    }
+  }, [
+    params,
+    variationName,
+    price,
+    stock,
+    closeForm,
+    picture,
+    productId,
+    pictureUrl,
+  ]);
+
+  const deleteForm = useCallback(async () => {
+    try {
+      if (params.variationId) {
+        const productVariationId = parseInt(params.variationId, 10);
+        const variation = productVariations.find(
+          (variation) => variation.id === productVariationId,
+        );
+
+        if (variation) {
+          const product = products.find(
+            (product) => product.id === variation.productId,
+          );
+
+          if (product) {
+            const productId = product.id;
+            await api.merchStore.deleteProductVariation(
+              productId,
+              params.variationId,
+            );
+          }
+        }
+      }
+      closeForm();
+    } catch (error) {
+      console.error('Error deleting product variation:', error);
+      closeForm();
+    }
+  }, [params, productVariations, products, closeForm]);
+
+  const getLastUpdated = useCallback(() => {
+    const variation = productVariations.find(
+      (variation) => variation.id === parseInt(params.variationId, 10),
+    );
+    if (variation) {
+      return moment.utc(variation.updatedAt).local().format('MMMM D, YYYY');
+    }
+    return '';
+  }, [productVariations, params.variationId]);
+
+  return {
+    productName,
+    setProductName,
+    productId,
+    setProductId,
+    variationName,
+    setVariationName,
+    price,
+    setPrice,
+    picture,
+    setPicture,
+    pictureUrl,
+    setPictureURL,
+    stock,
+    setStock,
+    imageUpload,
+    imageDelete,
+    closeForm,
+    saveForm,
+    deleteForm,
+    getLastUpdated,
+    showModal,
+    openModal,
+    closeModal,
+  };
+};
+
+export default useProductVariationsForm;

src/frontend/hooks/product-variations.js

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import api from '../api';
+import { useDispatch, useSelector } from 'react-redux';
+import * as productVariationActions from '../state/product-variations/actions';
+import * as productVariationSelectors from '../state/product-variations/selectors';
+
+const useProductVariations = () => {
+  const params = useParams();
+
+  const dispatch = useDispatch();
+  const productVariations = useSelector(
+    productVariationSelectors.allVariations,
+  );
+  useEffect(() => {
+    (async () => {
+      try {
+        let newProductVariations = [];
+        if (params.productId) {
+          const productVariationsResponse =
+            await api.merchStore.getProductVariations(params.productId);
+          // get all products
+          const productsResponse = await api.merchStore.getProducts();
+          const products = productsResponse.data;
+
+          const productName = products.find(
+            (product) => product.id == params.productId,
+          ).name;
+
+          for (const productVariation of productVariationsResponse.data) {
+            const variation = { ...productVariation, productName };
+            newProductVariations = [...newProductVariations, variation];
+          }
+        }
+
+        dispatch(
+          productVariationActions.updateProductVariationsInfo(
+            newProductVariations,
+          ),
+        );
+      } catch (err) {
+        console.error(
+          'error fetching products in product-variations.js: ',
+          err,
+        );
+      }
+    })();
+  }, [dispatch, params.productId, params.variationId]);
+
+  return {
+    productVariations,
+  };
+};
+
+export default useProductVariations;