From 276546515d3e0ee6a13f7b6cf263836523725aa6 Mon Sep 17 00:00:00 2001
From: Hy Nguyen <khanghy2130@gmail.com>
Date: Sat, 12 Oct 2024 03:08:48 -0500
Subject: [PATCH 1/5] set primary text color to spinner on product card

---
 app/routes/store/ProductCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/store/ProductCard.tsx b/app/routes/store/ProductCard.tsx
index f56f482..c8899e5 100644
--- a/app/routes/store/ProductCard.tsx
+++ b/app/routes/store/ProductCard.tsx
@@ -226,7 +226,7 @@ export default function ProductCard({ product }: Props) {
 const renderAddToCartText = function (isAddingToCart: boolean) {
     if (isAddingToCart) {
         return (
-            <div className="h-6 w-6">
+            <div className="h-6 w-6 text-primaryTextColor">
                 <SpinnerSVG />
             </div>
         );

From 940318a850d05f77a7774bfc670103e0e56e7830 Mon Sep 17 00:00:00 2001
From: Hy Nguyen <khanghy2130@gmail.com>
Date: Sun, 13 Oct 2024 00:47:29 -0500
Subject: [PATCH 2/5] admin page style adjust

---
 app/routes/admin/ProductDetails.tsx | 4 ++--
 app/routes/admin/index.tsx          | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/routes/admin/ProductDetails.tsx b/app/routes/admin/ProductDetails.tsx
index c4dacc2..cf6d1f8 100644
--- a/app/routes/admin/ProductDetails.tsx
+++ b/app/routes/admin/ProductDetails.tsx
@@ -292,7 +292,7 @@ export default function ProductDetails({ mode, updateFormState }: Props) {
                     }}
                 />
                 <button
-                    className="bg-primaryColor text-primaryTextColor"
+                    className="bg-primaryColor p-2 text-primaryTextColor"
                     type="button"
                     onClick={addTag}
                 >
@@ -330,7 +330,7 @@ export default function ProductDetails({ mode, updateFormState }: Props) {
             />
 
             <button
-                className="bg-primaryColor text-primaryTextColor"
+                className="mt-4 bg-primaryColor p-2 text-primaryTextColor"
                 type="submit"
                 disabled={isSubmitting}
             >
diff --git a/app/routes/admin/index.tsx b/app/routes/admin/index.tsx
index e667eda..b2f3c4e 100644
--- a/app/routes/admin/index.tsx
+++ b/app/routes/admin/index.tsx
@@ -103,10 +103,10 @@ export default function Admin() {
     if (!isEditor) return <h1>Access denied.</h1>;
 
     return (
-        <div className="flex flex-col items-center">
+        <div className="flex w-full max-w-[800px] flex-col items-center">
             <div className="flex w-full flex-row items-center justify-around">
                 <button
-                    className="bg-primaryColor text-primaryTextColor enabled:cursor-pointer disabled:opacity-30"
+                    className="bg-primaryColor p-2 text-primaryTextColor enabled:cursor-pointer disabled:opacity-30"
                     onClick={createBtnClicked}
                     disabled={mode === "CREATE"}
                 >
@@ -127,7 +127,7 @@ export default function Admin() {
                         }}
                     />
                     <button
-                        className="bg-primaryColor text-primaryTextColor"
+                        className="bg-primaryColor p-2 text-primaryTextColor"
                         onClick={getProductBtnClicked}
                     >
                         Load existing product

From 289a01352bd300b20d0e539483dbe81a5d44be6b Mon Sep 17 00:00:00 2001
From: Hy Nguyen <khanghy2130@gmail.com>
Date: Tue, 15 Oct 2024 01:27:58 -0500
Subject: [PATCH 3/5] add pre wrap to product desc & reviews

---
 app/routes/product.$productID/ProductDetails.tsx             | 4 +++-
 app/routes/product.$productID/reviews_section/ReviewCard.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/routes/product.$productID/ProductDetails.tsx b/app/routes/product.$productID/ProductDetails.tsx
index a1236e1..5a9fd98 100644
--- a/app/routes/product.$productID/ProductDetails.tsx
+++ b/app/routes/product.$productID/ProductDetails.tsx
@@ -143,7 +143,9 @@ export default function ProductDetails({ productInfo }: Props) {
             <h1 className="mt-10 text-xl font-medium text-primaryColor">
                 About this product
             </h1>
-            <p className="text-md sm:text-lg">{productInfo.description}</p>
+            <p className="text-md whitespace-pre-wrap sm:text-lg">
+                {productInfo.description}
+            </p>
 
             <div className="sm:text-md mt-3 flex flex-wrap gap-x-2 gap-y-2 text-sm text-textColor1">
                 {productInfo.tags.map((tag) => (
diff --git a/app/routes/product.$productID/reviews_section/ReviewCard.tsx b/app/routes/product.$productID/reviews_section/ReviewCard.tsx
index 3329821..bb68057 100644
--- a/app/routes/product.$productID/reviews_section/ReviewCard.tsx
+++ b/app/routes/product.$productID/reviews_section/ReviewCard.tsx
@@ -64,7 +64,7 @@ export default function ReviewCard({ review }: Props) {
                 </div>
             </div>
 
-            <p className="pt-1">{review.feedback}</p>
+            <p className="whitespace-pre-wrap pt-1">{review.feedback}</p>
         </div>
     );
 }

From 8378356682c84aea3d43315f1fa03e6ac3bee77b Mon Sep 17 00:00:00 2001
From: Hy Nguyen <khanghy2130@gmail.com>
Date: Tue, 15 Oct 2024 01:39:44 -0500
Subject: [PATCH 4/5] add price & discount inputs to /admin route

---
 app/routes/admin/ProductDetails.tsx | 24 ++++++++++++++++++++++++
 app/routes/admin/index.tsx          | 11 +++++++++++
 2 files changed, 35 insertions(+)

diff --git a/app/routes/admin/ProductDetails.tsx b/app/routes/admin/ProductDetails.tsx
index cf6d1f8..a0e4f32 100644
--- a/app/routes/admin/ProductDetails.tsx
+++ b/app/routes/admin/ProductDetails.tsx
@@ -109,6 +109,8 @@ export default function ProductDetails({ mode, updateFormState }: Props) {
                     title: formData.get("title") as string,
                     description: formData.get("description") as string,
                     quantity: Number(formData.get("quantity")),
+                    price: Number(formData.get("price")),
+                    discount: Number(formData.get("discount")),
                 })
                 .select()
                 .single();
@@ -127,6 +129,8 @@ export default function ProductDetails({ mode, updateFormState }: Props) {
                     title: formData.get("title") as string,
                     description: formData.get("description") as string,
                     quantity: Number(formData.get("quantity")),
+                    price: Number(formData.get("price")),
+                    discount: Number(formData.get("discount")),
                 })
                 .eq("id", productID);
 
@@ -261,6 +265,26 @@ export default function ProductDetails({ mode, updateFormState }: Props) {
                 defaultValue={updateFormState.quantity}
             />
 
+            <input
+                className="mb-10 bg-bgColor2 p-2 text-textColor1"
+                type="number"
+                min={0}
+                required
+                placeholder="Price"
+                name="price"
+                defaultValue={updateFormState.price}
+            />
+
+            <input
+                className="mb-10 bg-bgColor2 p-2 text-textColor1"
+                type="number"
+                min={0}
+                required
+                placeholder="Discount"
+                name="discount"
+                defaultValue={updateFormState.discount}
+            />
+
             <div>
                 {tags.map((tag, i) => (
                     <div className="flex" key={tag}>
diff --git a/app/routes/admin/index.tsx b/app/routes/admin/index.tsx
index b2f3c4e..1cb1138 100644
--- a/app/routes/admin/index.tsx
+++ b/app/routes/admin/index.tsx
@@ -9,6 +9,9 @@ export type UpdateFormState = {
     title: string;
     description: string;
     quantity: string | number;
+    price: string | number;
+    discount: string | number;
+
     tags: string[];
     imgNames: string[];
 };
@@ -36,6 +39,8 @@ export default function Admin() {
         title: "",
         description: "",
         quantity: "",
+        price: "",
+        discount: "",
         tags: [],
         imgNames: [],
     });
@@ -58,6 +63,8 @@ export default function Admin() {
                 title,
                 description,
                 quantity,
+                price,
+                discount,
                 tags:PRODUCTS_TAGS(tag_id(name))
             `,
             )
@@ -68,6 +75,8 @@ export default function Admin() {
                     title: string;
                     description: string;
                     quantity: number;
+                    price: number;
+                    discount: number;
                     tags: { tag_id: { name: string } }[];
                 }[]
             >()
@@ -94,6 +103,8 @@ export default function Admin() {
             title: data.title,
             description: data.description,
             quantity: data.quantity,
+            price: data.price,
+            discount: data.discount,
             tags: data.tags.map(({ tag_id }) => tag_id.name),
             imgNames: fetchedImagesData.map((imgData) => imgData.name),
         });

From 340165e7c077354a9030853d970422a03905c834 Mon Sep 17 00:00:00 2001
From: Hy Nguyen <khanghy2130@gmail.com>
Date: Tue, 15 Oct 2024 01:54:37 -0500
Subject: [PATCH 5/5] review form: add spinner to submit button, add
 notifications

---
 .../reviews_section/ReviewForm.tsx                | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/routes/product.$productID/reviews_section/ReviewForm.tsx b/app/routes/product.$productID/reviews_section/ReviewForm.tsx
index b9e80f4..2fb8745 100644
--- a/app/routes/product.$productID/reviews_section/ReviewForm.tsx
+++ b/app/routes/product.$productID/reviews_section/ReviewForm.tsx
@@ -2,6 +2,7 @@ import { FormEvent, useEffect, useState } from "react";
 import { ProductInfo, ReviewsFetchTriggerType } from "../Types";
 import { Form, useOutletContext } from "@remix-run/react";
 import { ContextProps } from "~/utils/types/ContextProps.type";
+import SpinnerSVG from "~/components/SpinnerSVG";
 
 type Props = {
     productInfo: ProductInfo;
@@ -50,6 +51,7 @@ export default function ReviewForm({
     async function handleSubmit(event: FormEvent<HTMLFormElement>) {
         event.preventDefault();
         if (rating < 1 || rating > 5) {
+            addNotification("Rating not set", "FAIL");
             return console.error("Stars amount must be between 1 and 5.");
         }
 
@@ -69,6 +71,7 @@ export default function ReviewForm({
 
         if (countError) {
             console.error("Error upserting review", countError);
+            addNotification("Error upserting review", "FAIL");
             return setIsSubmitting(false);
         }
 
@@ -182,10 +185,18 @@ export default function ReviewForm({
             {enableFormInput ? (
                 <button
                     disabled={isSubmitting}
-                    className="rounded-lg bg-primaryColor py-1 text-lg font-medium text-primaryTextColor hover:bg-primaryColorMuted"
+                    className="flex h-8 items-center justify-center rounded-lg bg-primaryColor text-lg font-medium text-primaryTextColor hover:bg-primaryColorMuted"
                     type="submit"
                 >
-                    {isSubmitting ? "Processing..." : "Submit"}
+                    {isSubmitting ? (
+                        <div className="flex h-8 w-8 items-center justify-center">
+                            <div className="h-3/4 w-3/4">
+                                <SpinnerSVG />
+                            </div>
+                        </div>
+                    ) : (
+                        <span>Submit</span>
+                    )}
                 </button>
             ) : null}