add reviews

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "debbie-store"
+  }
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm run app
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_DEBBIE_STORE }}'
+          channelId: live
+          projectId: debbie-store

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm run app
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_DEBBIE_STORE }}'
+          projectId: debbie-store

client/src/App.js

@@ -21,6 +21,8 @@ import CancelScreen from "./screens/CancelScreen";
 import YourOrdersScreen from "./screens/YourOrdersScreen";
 import SuccessScreen from "./screens/SuccessScreen";
 import AdminConsoleScreen from "./screens/AdminConsoleScreen";
+import IdeasScreen from "./screens/IdeasScreen";
+import IdeaScreen from "./screens/IdeaScreen";
 
 function App() {
   const theme2 = extendTheme({
@@ -65,7 +67,9 @@ function App() {
                   <Route path='/cancel' element={<CancelScreen />} />
                   <Route path='/order-history' element={<YourOrdersScreen />} />
                   <Route path='/success' element={<SuccessScreen />} />
-                  <Route path='/admin-console' element={<AdminConsoleScreen />} />
+                    <Route path='/admin-console' element={<AdminConsoleScreen />} />
+                    <Route path='/ideas' element={<IdeasScreen />} />
+                    <Route path='/idea/:id' element={<IdeaScreen />} />
                 </Routes>
               </main>
               <Footer />

client/src/components/IdeaCard.jsx

@@ -0,0 +1,55 @@
+import { Box, Image, Text, Badge, Flex, IconButton, Skeleton, useToast, Tooltip } from "@chakra-ui/react";
+import { BiExpand } from "react-icons/bi";
+import React, { useState } from "react";
+import { addToFavorites, removeFromFavorites } from "../redux/actions/productActions";
+import { useSelector, useDispatch } from "react-redux";
+import { MdOutlineFavorite, MdOutlineFavoriteBorder } from "react-icons/md";
+import { Link as ReactLink } from "react-router-dom";
+import { addCartItem } from "../redux/actions/cartActions";
+import { useEffect } from "react";
+import { TbShoppingCartPlus } from "react-icons/tb";
+
+const IdeaCard = ({ idea, loading }) => {
+  const dispatch = useDispatch();
+  const [isShown, setIsShown] = useState(false);
+  console.log(idea.images);
+
+  return (
+    <Skeleton isLoaded={!loading}>
+      <ReactLink to={`/idea/${idea._id}`} style={{ textDecoration: "none", color: "inherit" }}>
+        <Box
+          _hover={{ transform: "scale(1.1)", transitionDuration: "0.5s" }}
+          borderWidth='1px'
+          overflow='hidden'
+          p='4'
+          shadow='md'
+          sx={{
+            borderRadius: "10px",
+            // backgroundImage: `url("${product.images[0]}")`,
+            // backgroundRepeat: "no-repeat",
+            // backgroundSize: "cover",
+            backgroundColor: "pink",
+            height: "400px",
+            width: "250px",
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+          }}
+        >
+          {idea.name}
+          <Image
+            sx={{ height: "auto", width: "100%" }}
+            onMouseEnter={() => setIsShown(true)}
+            onMouseLeave={() => setIsShown(false)}
+            src={idea.images[isShown && idea.images.length === 2 ? 1 : 0]}
+            fallbackSrc='https://via.placeholder.com/150'
+            alt={idea.name}
+            // height='200px'
+          />
+        </Box>
+      </ReactLink>
+    </Skeleton>
+  );
+};
+
+export default IdeaCard;

client/src/redux/actions/ideaActions.js

@@ -0,0 +1,60 @@
+import { setIdea, setIdeas, setLoading, setError, setPagination, resetError } from "../slices/idea";
+  import axios from "axios";
+
+  export const getIdeas = (page, favoriteToggle) => async (dispatch) => {
+    dispatch(setLoading());
+      try {
+          const { data } = await axios.get(`/api/ideas/${page}/${10}`);
+          console.log(data)
+      const { ideas, pagination } = data;
+      dispatch(setIdeas(ideas));
+      dispatch(setPagination(pagination));
+    } catch (error) {
+      dispatch(
+        setError(
+          error.response && error.response.data.message
+            ? error.response.data.message
+            : error.message
+              ? error.message
+              : "An unexpected error has occured. Please try again later."
+        )
+      );
+    }
+  };
+
+
+  export const getIdea = (id) => async (dispatch) => {
+      dispatch(setLoading(true));
+      try {
+          const { data } = await axios.get(`/api/ideas/${id}`);
+          dispatch(setIdea(data));
+      } catch (error) {
+          dispatch(
+              setError(
+                  error.response && error.response.data.message
+                      ? error.response.data.message
+                      : error.message
+                      ? error.message
+                      : 'An expected error has occured. Please try again later.'
+              )
+          );
+      }
+  };
+
+export const createIdeaReview = (ideaId, comment, rating, userName) => async (dispatch, getState) => {
+      try {
+          await axios.post(`/api/ideas/reviews/${ideaId}`, { comment, rating, userName });
+
+      } catch (error) {
+          dispatch(
+              setError(
+                  error.response && error.response.data.message
+                      ? error.response.data.message
+                      : error.message
+                      ? error.message
+                      : 'An expected error has occured. Please try again later.'
+              )
+          );
+      }
+  };
+

client/src/redux/slices/idea.js

@@ -0,0 +1,61 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const initialState = {
+  loading: false,
+  error: null,
+  ideas: [],
+  idea: null,
+  pagination: {},
+};
+
+export const ideasSlice = createSlice({
+  name: "ideas",
+  initialState,
+  reducers: {
+    setLoading: (state) => {
+      state.loading = true;
+    },
+    setIdeas: (state, { payload }) => {
+      state.loading = false;
+      state.error = null;
+      state.ideas = payload;
+    },
+    setIdea: (state, { payload }) => {
+      state.idea = payload;
+      state.loading = false;
+      state.error = null;
+    },
+    setError: (state, { payload }) => {
+      state.loading = false;
+      state.error = payload;
+    },
+    setPagination: (state, { payload }) => {
+      state.loading = false;
+      state.error = null;
+      state.pagination = payload;
+    },
+
+    resetError: (state) => {
+      state.error = null;
+      state.reviewed = false;
+      state.ideaUpdate = false;
+    },
+
+  },
+});
+
+export const {
+  setLoading,
+  setError,
+  setIdeas,
+  setIdea,
+
+  setPagination,
+
+  resetError,
+
+} = ideasSlice.actions;
+
+export default ideasSlice.reducer;
+export const ideaSelector = (state) => state.ideas;
+

client/src/redux/store.js

@@ -4,7 +4,8 @@ import cart from "./slices/cart";
 import user from "./slices/user";
 import order from "./slices/order";
 import admin from "./slices/admin";
+import idea from "./slices/idea";
 
-const reducer = combineReducers({ product, cart, user, order, admin });
+const reducer = combineReducers({ product, cart, user, order, admin , idea});
 
 export default configureStore({ reducer });