create an API response component

olasunkanmi-SE · Apr 18, 2024 · 474020d · 474020d
1 parent a5cd62a
commit 474020d
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 48 deletions.
diff --git a/frontend/src/components/AppForms/SignInForm.tsx b/frontend/src/components/AppForms/SignInForm.tsx
@@ -4,39 +4,91 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { z } from "zod";
 import { FormInput } from "../Forms/form-input";
 import { TabComponent } from "../Utilities/tab";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import useAxiosPrivate from "../../hooks/useAxiosPrivate";
+import { useMutation } from "react-query";
+import { ApiResponse } from "../Utilities/ApiResponse";
+import { AxiosResponse } from "axios";
 
-export type loginFormProps = {
+type emailLoginFormProps = {
   email: string;
   password: string;
 };
 
-const validateInputSchema = z.object({
+const validateEmailInputSchema = z.object({
   email: z.string().email("Enter a valid email address"),
   password: z.string().min(8, "InValid Password"),
 });
 
-type validationSchema = z.infer<typeof validateInputSchema>;
+type phoneLoginFormProps = {
+  phone: string;
+};
+
+const validatePhoneInputSchema = z.object({
+  phone: z.string(),
+});
+
+type validationSchema = z.infer<typeof validateEmailInputSchema>;
+type phoneValidationSchema = z.infer<typeof validatePhoneInputSchema>;
+
+const onPhoneNumberSubmit: SubmitHandler<phoneValidationSchema> = (data) => console.log(data);
+
+const PhoneNumberSignUp = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<phoneValidationSchema>({ resolver: zodResolver(validatePhoneInputSchema) });
+  return (
+    <Card>
+      <Card.Body>
+        <Form onSubmit={handleSubmit(onPhoneNumberSubmit)}>
+          <FormInput<phoneLoginFormProps>
+            id="phone"
+            name="phone"
+            placeholder="Enter phone number"
+            register={register}
+            errors={errors}
+          />
+          <Button className="w-100" style={{ backgroundColor: "#407c54", borderColor: "#407c54" }} type="submit">
+            Login
+          </Button>
+        </Form>
+      </Card.Body>
+    </Card>
+  );
+};
 
 export const LoginForm = () => {
+  const axios = useAxiosPrivate();
+  const navigate = useNavigate();
+  const onSubmit: SubmitHandler<validationSchema> = async (data) => {
+    try {
+      //Fix this error bubbling issue
+      const response: AxiosResponse<any, any> = await axios.post("singleclients/signin", data);
+      console.log(response.data.message);
+    } catch (error) {
+      console.error(error);
+    }
+  };
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<validationSchema>({ resolver: zodResolver(validateInputSchema) });
+  } = useForm<validationSchema>({ resolver: zodResolver(validateEmailInputSchema) });
   const EmailSignUp = () => {
     return (
       <Card>
         <Card.Body>
           <Form onSubmit={handleSubmit(onSubmit)}>
-            <FormInput<loginFormProps>
+            <FormInput<emailLoginFormProps>
               id="email"
               name="email"
               placeholder="Enter email"
               register={register}
               errors={errors}
             />
-            <FormInput<loginFormProps>
+            <FormInput<emailLoginFormProps>
               id="password"
               name="password"
               placeholder="Enter password"
@@ -52,33 +104,11 @@ export const LoginForm = () => {
     );
   };
 
-  const PhoneNumberSignUp = () => {
-    return (
-      <Card>
-        <Card.Body>
-          <Form onSubmit={handleSubmit(onSubmit)}>
-            <FormInput<loginFormProps>
-              id="email"
-              name="email"
-              placeholder="Enter phone number"
-              register={register}
-              errors={errors}
-            />
-            <Button className="w-100" style={{ backgroundColor: "#407c54", borderColor: "#407c54" }} type="submit">
-              Login
-            </Button>
-          </Form>
-        </Card.Body>
-      </Card>
-    );
-  };
-
   const signUpTab = [
     { title: "Email", children: <EmailSignUp /> },
     { title: "Phone", children: <PhoneNumberSignUp /> },
   ];
 
-  const onSubmit: SubmitHandler<validationSchema> = (data) => console.log(data);
   return (
     <div
       style={{

diff --git a/frontend/src/components/Cart/ShoppinCartDetails.tsx b/frontend/src/components/Cart/ShoppinCartDetails.tsx
@@ -20,6 +20,7 @@ import { OrderApi } from "../../apis/orderApi";
 import useAxiosPrivate from "../../hooks/useAxiosPrivate";
 import { useMutation } from "react-query";
 import { ICreateOrderDTO } from "../../dto/order";
+import { ApiResponse } from "../Utilities/ApiResponse";
 
 export const ShoppingCartDetails = () => {
   const navigate = useNavigate();
@@ -219,23 +220,7 @@ export const ShoppingCartDetails = () => {
         >
           PLACE ORDER RM{handleCalculateTotalOrder() + calculateServiceCharge(calculateTotalOrderAmount())}
         </Button>
-        <div>
-          {handleCreateOrder.isLoading ? (
-            "Creating Order..."
-          ) : (
-            <>
-              {handleCreateOrder.isError ? (
-                <div>
-                  An error occurred:{" "}
-                  {handleCreateOrder.error.response.data.message.message?.length
-                    ? handleCreateOrder.error.response.data.message.message.join(",")
-                    : handleCreateOrder.error.response.data.message.error}
-                </div>
-              ) : null}
-            </>
-          )}
-          {handleCreateOrder.isSuccess ? <div>Order processed successfully</div> : null}
-        </div>
+        <ApiResponse mutation={handleCreateOrder} />
       </div>
       <div>
         {showClearCartModal && (

diff --git a/frontend/src/components/Utilities/ApiResponse.tsx b/frontend/src/components/Utilities/ApiResponse.tsx
@@ -0,0 +1,21 @@
+export const ApiResponse = (mutation: any) => {
+  return (
+    <div>
+      {mutation.isLoading ? (
+        "Creating Order..."
+      ) : (
+        <>
+          {mutation.isError ? (
+            <div>
+              An error occurred:{" "}
+              {mutation.error.response.data.message.message?.length
+                ? mutation.error.response.data.message.message.join(",")
+                : mutation.error.response.data.message.error}
+            </div>
+          ) : null}
+        </>
+      )}
+      {mutation.isSuccess ? <div>Order processed successfully</div> : null}
+    </div>
+  );
+};
diff --git a/frontend/src/contexts/shoppingCartContext.tsx b/frontend/src/contexts/shoppingCartContext.tsx
@@ -347,7 +347,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       state.menus = [];
       state.quantity = 0;
       console.log(state);
-      navigate("/");
+      navigate("/menu");
       setLocalStorageData("cart", JSON.stringify(state), true);
       setLocalStorageData("expiry", new Date().toISOString(), true);
       dispatch({

diff --git a/frontend/src/pages/Landing.tsx b/frontend/src/pages/Landing.tsx
@@ -17,7 +17,7 @@ export const Landing = () => {
     backgroundImage: `url(public/food-background.jpg)`,
     backgroundSize: "cover",
     backgroundPosition: "center",
-    opacity: 0.5,
+    opacity: 0.1,
   };
 
   const buttonStyle: CSSProperties = {