[#9, #13] feat: set values on cache for faster load time

client/src/components/Layout/Section/index.jsx

@@ -21,7 +21,6 @@ export default function Section() {
           <ProductItem />
           <ProductItem />
           <ProductItem />
-          <ProductItem />
         </ProductRow>
       </ProductTable>
     </section>

client/src/components/ProductTable/Pagination/styles.module.scss

@@ -6,6 +6,7 @@
   margin-top: 39px;
 
   .Button {
+    cursor: pointer;
     width: 33px;
     height: 33px;
     background-color: #ffff;

client/src/components/ProductTable/ProductItem/styles.module.scss

@@ -8,6 +8,11 @@
   min-height: 100%;
   max-height: 100%;
   height: 100%;
+  margin-right: 14px;
+
+  &:last-child {
+    margin-right: 0;
+  }
 
   &.Stroke {
     border: 1px solid vars.$stroke-border-color;

client/src/components/ProductTable/ProductRow/styles.module.scss

@@ -2,8 +2,7 @@
 
 .Row {
   display: flex;
-  width: 100%;
-  justify-content: space-between;
+  min-width: 100%;
   height: 479px;
   max-height: 479px;
 }

server/app.js

@@ -21,7 +21,13 @@ app.use("/brands", brands);
 
 //Index route
 app.get("/", async (req, res) => {
-  res.end(`Groove street`);
+  res.json({
+    endPoints: [
+      { products: [{ all: "/products" }, { id: "products:id" }] },
+      { brands: [{ all: "/brands" }, { productIds: "brands/:name" }] },
+      { colors: [{ all: "/colors" }, { productIds: "colors/:name" }] },
+    ],
+  });
 });
 
 app.listen(PORT, () => {

server/controllers/brands.controller.js

@@ -1,5 +1,6 @@
 import Brand from "../models/brands.model.js";
 import client from "../libs/redis/index.js";
+import hashProductId from "../libs/redis/helpers.js";
 
 const controller = {};
 
@@ -11,7 +12,9 @@ controller.getAll = async (req, res) => {
 
     // if data exist, send it as a response
     if (cachedData) {
-      if (cachedData <= 0) res.status(404).json("Brands data does not exist.");
+      if (cachedData <= 0) {
+        res.status(404).json("Brands data does not exist.");
+      }
       res.status(200).json(cachedData);
     } else {
       // pull data from db
@@ -22,11 +25,27 @@ controller.getAll = async (req, res) => {
 
       // send data pulled from db
       if (brands <= 0) res.status(404).json("Brands data does not exist.");
+
+      hashProductId(brands);
       res.status(200).json(brands);
     }
   } catch (err) {
     console.error("Error in getting brands data - " + err.message);
     res.status(500).json({ error: "Got error in getAll controller of brands" });
   }
 };
+
+controller.getProductIds = async (req, res) => {
+  // TODO: call getAll before this function
+  try {
+    client.smembers(req.params.name, (err, result) => {
+      if (err) res.status(500).end(err);
+      else res.status(200).json(result);
+    });
+  } catch (err) {
+    console.error("Error in getting brands data - " + err.message);
+    res.status(500).json({ error: "Got error in getAll controller of brands" });
+  }
+};
+
 export default controller;

server/controllers/colors.controller.js

@@ -1,5 +1,6 @@
 import Color from "../models/colors.model.js";
 import client from "../libs/redis/index.js";
+import hashProductId from "../libs/redis/helpers.js";
 
 const controller = {};
 
@@ -22,6 +23,8 @@ controller.getAll = async (req, res) => {
 
       // send data pulled from db
       if (colors <= 0) res.status(404).json("Colors data does not exist.");
+
+      hashProductId(colors);
       res.status(200).json(colors);
     }
   } catch (err) {
@@ -30,4 +33,17 @@ controller.getAll = async (req, res) => {
   }
 };
 
+controller.getProductIds = async (req, res) => {
+  // TODO: call getAll before this function
+  try {
+    client.smembers(req.params.name, (err, result) => {
+      if (err) res.status(500).end(err);
+      else res.status(200).json(result);
+    });
+  } catch (err) {
+    console.error("Error in getting brands data - " + err.message);
+    res.status(500).json({ error: "Got error in getAll controller of brands" });
+  }
+};
+
 export default controller;

server/libs/functions.js

@@ -0,0 +1,18 @@
+const slugify = (str) =>
+  str
+    .toLowerCase()
+    .replace(" ", "-")
+    .replace(/Ü/gim, "u")
+    .replace(/Ş/gim, "s")
+    .replace(/I/gim, "i")
+    .replace(/İ/gim, "i")
+    .replace(/Ö/gim, "o")
+    .replace(/Ç/gim, "c")
+    .replace(/ğ/gim, "g")
+    .replace(/ü/gim, "u")
+    .replace(/ş/gim, "s")
+    .replace(/ı/gim, "i")
+    .replace(/ö/gim, "o")
+    .replace(/ç/gim, "c");
+
+export default slugify;

server/libs/redis/helpers.js

@@ -0,0 +1,16 @@
+import client from "./index.js";
+import slugify from "../functions.js";
+
+const hashProductId = async (value) => {
+  const data = await value;
+
+  data.map(async (item) => {
+    // format as slug
+    let name = slugify(item.name);
+
+    // add all documents as set
+    await client.sadd(name, item.products);
+  });
+};
+
+export default hashProductId;

server/routes/brands.route.js

@@ -7,4 +7,8 @@ router.get("/all", (req, res) => {
   brandController.getAll(req, res);
 });
 
+router.get("/:name", (req, res) => {
+  brandController.getProductIds(req, res);
+});
+
 export default router;

server/routes/colors.route.js

@@ -7,4 +7,8 @@ router.get("/all", (req, res) => {
   colorController.getAll(req, res);
 });
 
+router.get("/:name", (req, res) => {
+  colorController.getProductIds(req, res);
+});
+
 export default router;