Merge pull request #45 from ctc-uci/sign_up_skeleton

Invoices endpoints and sign up page skeleton

client/src/components/signup/Signup.jsx

@@ -12,6 +12,7 @@ import {
   Stack,
   useToast,
   VStack,
+  Text,
 } from "@chakra-ui/react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -25,6 +26,8 @@ import { useBackendContext } from "../../contexts/hooks/useBackendContext";
 import { authenticateGoogleUser } from "../../utils/auth/providers";
 
 const signupSchema = z.object({
+  first_name: z.string("Invalid first name").min(1, { message: "First name required" }),
+  last_name: z.string("Invalid last name").min(1, { message: "Last name required" }),
   email: z.string().email("Invalid email address"),
   password: z.string().min(6, "Password must be at least 6 characters long"),
 });
@@ -49,9 +52,9 @@ export const Signup = () => {
       const user = await signup({
         email: data.email,
         password: data.password,
-        // add:
-        // first_name: ...
-        // last_name: ...
+        first_name: data.first_name,
+        last_name: data.last_name,
+
       });
 
       if (user) {
@@ -82,21 +85,60 @@ export const Signup = () => {
       spacing={8}
       sx={{ width: 300, marginX: "auto" }}
     >
-      <Heading>Signup</Heading>
+      <Heading>SignUp</Heading>
 
       <form
         onSubmit={handleSubmit(handleSignup)}
         style={{ width: "100%" }}
       >
         <Stack spacing={2}>
+        <FormControl
+            isInvalid={!!errors.first_name}
+            w={"100%"}
+          >
+            <label htmlFor="first">First name</label>
+            <Center id="first">
+              <Input
+                placeholder="First name"
+                type="text"
+                size={"lg"}
+                {...register("first_name")}
+                name="first_name"
+                isRequired
+              />
+            </Center>
+            <FormErrorMessage>
+              {errors.first_name?.message?.toString()}
+            </FormErrorMessage>
+          </FormControl>
+          <FormControl
+            isInvalid={!!errors.last_name}
+            w={"100%"}
+          >
+            <label htmlFor="last">Last name</label>
+            <Center id="last">
+              <Input
+                placeholder="Last name"
+                type="text"
+                size={"lg"}
+                {...register("last_name")}
+                name="last_name"
+                isRequired
+              />
+            </Center>
+            <FormErrorMessage>
+              {errors.last_name?.message?.toString()}
+            </FormErrorMessage>
+          </FormControl>
           <FormControl
             isInvalid={!!errors.email}
             w={"100%"}
           >
-            <Center>
+            <label htmlFor="email">Email</label>
+            <Center id="email">
               <Input
                 placeholder="Email"
-                type="email"
+                type="text"
                 size={"lg"}
                 {...register("email")}
                 name="email"
@@ -109,7 +151,8 @@ export const Signup = () => {
             </FormErrorMessage>
           </FormControl>
           <FormControl isInvalid={!!errors.password}>
-            <Center>
+          <label htmlFor="password">Password</label>
+            <Center id="password">
               <Input
                 placeholder="Password"
                 type="password"
@@ -123,12 +166,6 @@ export const Signup = () => {
             <FormErrorMessage>
               {errors.password?.message?.toString()}
             </FormErrorMessage>
-            <ChakraLink
-              as={Link}
-              to="/login"
-            >
-              <FormHelperText>Click here to login</FormHelperText>
-            </ChakraLink>
           </FormControl>
 
           <Button
@@ -137,20 +174,12 @@ export const Signup = () => {
             sx={{ width: "100%" }}
             isDisabled={Object.keys(errors).length > 0}
           >
-            Signup
+            Sign Up
           </Button>
+
+        <Text>Already have an account? <ChakraLink>Log in</ChakraLink></Text>
         </Stack>
       </form>
-
-      <Button
-        leftIcon={<FaGoogle />}
-        variant={"solid"}
-        size={"lg"}
-        onClick={handleGoogleSignup}
-        sx={{ width: "100%" }}
-      >
-        Signup with Google
-      </Button>
     </VStack>
   );
 };

server/routes/invoices.js

@@ -6,6 +6,36 @@ import { keysToCamel } from "../common/utils";
 const invoicesRouter = express.Router();
 invoicesRouter.use(express.json());
 
+// Get all invoices
+invoicesRouter.get("/", async (req, res) => {
+  try {
+    const users = await db.query(`SELECT * FROM invoices`);
+
+    res.status(200).json(keysToCamel(users));
+  } catch (err) {
+    res.status(400).send(err.message);
+  }
+});
+
+// Get invoice by id
+invoicesRouter.get("/:id", async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    const invoice = await db.query("SELECT * FROM invoices WHERE id = $1", [
+      id,
+    ]);
+
+    if(invoice.length === 0){
+        return res.status(404).json({ error: "Invoice does not exist." });
+    }
+
+    res.status(200).json(keysToCamel(invoice));
+  catch (err) {
+    res.status(500).send(err.message);
+  }
+});
+
 invoicesRouter.delete("/:id", async (req, res) => {
   try {
     const { id } = req.params;
@@ -57,6 +87,39 @@ invoicesRouter.get("/event/:event_id", async (req, res) => {
     }
   });
 
+// Get invoice for an event by the event id optionally between a start and end date
+invoicesRouter.get("/event/:event_id", async (req, res) => {
+  try {
+    const { event_id } = req.params;
+    const { start, end } = req.query;
+
+    let query = `SELECT * FROM invoices WHERE event_id = $1`;
+    const params = [event_id];
+
+    if (start) {
+      const [startDate, startTime] = start.split("T");
+      query += ` AND (start_date >= $2)`;
+      params.push(startDate);
+    }
+
+    if (end) {
+      const [endDate, endTime] = end.split("T");
+      if (params.length === 1) {
+        query += ` AND (end_date <= $2)`;
+      } else {
+        query += ` AND (end_date <= $3)`;
+      }
+      params.push(endDate);
+    }
+
+    const data = await db.query(query, params);
+
+    res.status(200).json(keysToCamel(data));
+} catch (err) {
+    res.status(500).send(err.message);
+  }
+});
+
 // POST /invoices
 invoicesRouter.post("/", async (req, res) => {
     try {
@@ -126,4 +189,4 @@ invoicesRouter.put("/:id", async (req, res) => {
     }
   });
 
-export { invoicesRouter };
+export { invoicesRouter };

server/src/app.js

@@ -52,10 +52,11 @@ app.use("/events", eventsRouter);
 app.use("/bookings", bookingsRouter);
 app.use("/comments", commentsRouter);
 app.use("/clients", clientsRouter);
+app.use("/invoices", invoicesRouter);
 app.use("/rooms", roomsRouter)
 app.use("/assignments", assignmentsRouter)
-app.use("/invoices", invoicesRouter)
 
 app.listen(SERVER_PORT, () => {
   console.info(`Server listening on ${SERVER_PORT}`);
 });
+