Skip to content

Commit

Permalink
Merge pull request #33 from khanghy2130/minor-changes
Browse files Browse the repository at this point in the history 
Improvements to /admin & /product routes
  • Loading branch information
@khanghy2130
khanghy2130 authored Oct 15, 2024
2 parents 7b98a88 + 340165e commit 3d76cff
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 10 deletions.
28 changes: 26 additions & 2 deletions app/routes/admin/ProductDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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);

Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -292,7 +316,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}
>
Expand Down Expand Up @@ -330,7 +354,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}
>
Expand Down
17 changes: 14 additions & 3 deletions app/routes/admin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ export type UpdateFormState = {
title: string;
description: string;
quantity: string | number;
price: string | number;
discount: string | number;

tags: string[];
imgNames: string[];
};
Expand Down Expand Up @@ -36,6 +39,8 @@ export default function Admin() {
title: "",
description: "",
quantity: "",
price: "",
discount: "",
tags: [],
imgNames: [],
});
Expand All @@ -58,6 +63,8 @@ export default function Admin() {
title,
description,
quantity,
price,
discount,
tags:PRODUCTS_TAGS(tag_id(name))
`,
)
Expand All @@ -68,6 +75,8 @@ export default function Admin() {
title: string;
description: string;
quantity: number;
price: number;
discount: number;
tags: { tag_id: { name: string } }[];
}[]
>()
Expand All @@ -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),
});
Expand All @@ -103,10 +114,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"}
>
Expand All @@ -127,7 +138,7 @@ export default function Admin() {
}}
/>
<button
className="bg-primaryColor text-primaryTextColor"
className="bg-primaryColor p-2 text-primaryTextColor"
onClick={getProductBtnClicked}
>
Load existing product
Expand Down
4 changes: 3 additions & 1 deletion app/routes/product.$productID/ProductDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
2 changes: 1 addition & 1 deletion app/routes/product.$productID/reviews_section/ReviewCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
15 changes: 13 additions & 2 deletions app/routes/product.$productID/reviews_section/ReviewForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.");
}

Expand All @@ -69,6 +71,7 @@ export default function ReviewForm({

if (countError) {
console.error("Error upserting review", countError);
addNotification("Error upserting review", "FAIL");
return setIsSubmitting(false);
}

Expand Down Expand Up @@ -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}

Expand Down
2 changes: 1 addition & 1 deletion app/routes/store/ProductCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit 3d76cff

Please sign in to comment.