chore(frontend): added api calls

client/src/features/api/api.ts

@@ -19,3 +19,83 @@ export async function handleResponse<T>(
   }
   throw new Error(`HTTP error! Status: ${response.status}`);
 }
+
+export const getCheckoutUrl = async () => {
+  try {
+    const response = await api.get("/api/v1/payment/checkout");
+
+    const data = await handleResponse(response);
+    return data.url;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const generateNotes = async (file: File, generateFlashcard: boolean) => {
+  try {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const response = await api.post(
+      "/api/v1/notes/generate",
+      {
+        formData: formData,
+        generateFlashcard: generateFlashcard,
+      },
+      {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      },
+    );
+
+    const data = await handleResponse(response);
+    return data;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const getTopics = async () => {
+  try {
+    // const response = await api.get('/api/v1/notes/topics');
+
+    // const data = await handleResponse(response);
+    const data = [
+      "All",
+      "Data Science",
+      "Business & Management",
+      "Language",
+      "Information Technology",
+      "Film & Media",
+      "Math & Logic",
+      "Health & Medical",
+      "Design & Creative",
+      "Neil deGrasse Tyson",
+      "Neil sharma",
+      "Neil Gae",
+    ];
+    return data;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const getNotes = async (
+  topic: string,
+  notesTitle: string,
+  currentMarketPage: number,
+) => {
+  try {
+    const response = await api.post("/api/v1/notes/get", {
+      topic: topic,
+      notesTitle: notesTitle,
+      currentPage: currentMarketPage,
+    });
+
+    const data = await handleResponse(response);
+    return data;
+  } catch (error) {
+    console.log(error);
+  }
+};

client/src/pages/landing/Landing.tsx

@@ -4,9 +4,36 @@ import LandingPageImage from "~assets/img/landing_page_image.png";
 
 const LandingPage = () => {
   return (
-    <Flex direction="column" h="100vh" overflowX="hidden">
+    <Flex direction="column" h="100vh">
       <Flex flex="45%" bg="darkBlue.500" align="center" justify="center">
-        <Box position="relative" height="100%" width="100%">
+        <Stack
+          w={"full"}
+          justify={"end"}
+          textAlign={"center"}
+          mt={{ base: 6, md: "none" }}
+          px={{ base: 4, md: 8 }}
+          display={{ base: "flex", md: "none" }}
+        >
+          <Text
+            color={"white"}
+            lineHeight={1.2}
+            fontSize={{ base: "3xl", md: "4xl", lg: "5xl" }}
+          >
+            We{" "}
+            <Text as="span" fontWeight="bold">
+              empower
+            </Text>{" "}
+            you
+            <br />
+            to learn what you love
+          </Text>
+        </Stack>
+        <Box
+          position="relative"
+          height="100%"
+          width="100%"
+          display={{ base: "none", md: "flex" }}
+        >
           <Flex
             width={{ base: "3xl", lg: "6xl" }}
             h={"100%"}

client/src/pages/marketplace/Marketplace.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useState } from "react";
-import { Box } from "@chakra-ui/react";
+import { Box, useToast } from "@chakra-ui/react";
 
-import { fetchNotes } from "./generateNote";
+import { getNotes } from "./generateNote";
 import Market from "./Market";
 import Topics from "./Topics";
 
+import { getTopics } from "~api";
+
 interface NotesProp {
   topic: string;
   title: string;
@@ -13,6 +15,8 @@ interface NotesProp {
 }
 
 const MarketplacePage = () => {
+  const toast = useToast();
+
   const [topics, setTopics] = useState<string[]>([]);
   const [topic, setTopic] = useState<string>("All");
   const [notesTitle, setNotesTitle] = useState<string>("");
@@ -22,43 +26,38 @@ const MarketplacePage = () => {
   const [currentTopicPage, setCurrentTopicPage] = useState(1);
   const [currentMarketPage, setCurrentMarketPage] = useState(1);
 
-  const getNotes = async (
+  const handleGetNotes = async (
     topic: string,
     notesTitle: string,
     currentMarketPage: number,
   ): Promise<void> => {
-    const { notes, totalNotesCount } = await fetchNotes(
-      topic,
-      notesTitle,
-      currentMarketPage,
-    );
+    const data = await getNotes(topic, notesTitle, currentMarketPage);
 
-    setNotes(notes);
-    setTotalNotesCount(totalNotesCount);
+    setNotes(data.notes);
+    setTotalNotesCount(data.totalNotesCount);
   };
 
   useEffect(() => {
-    // Simulate fetching topics names
-    const fetchedTopics = [
-      "All",
-      "Data Science",
-      "Business & Management",
-      "Language",
-      "Information Technology",
-      "Film & Media",
-      "Math & Logic",
-      "Health & Medical",
-      "Design & Creative",
-      "Neil deGrasse Tyson",
-      "Neil sharma",
-      "Neil Gae",
-    ];
+    const fetchTopics = async () => {
+      const fetchedTopics = await getTopics();
+      if (!fetchedTopics || fetchedTopics.length === 0) {
+        toast({
+          title: "Failed to fetch topics",
+          status: "error",
+          isClosable: true,
+          position: "top",
+          duration: 3000,
+        });
+        return;
+      }
+      setTopics(fetchedTopics);
+    };
 
-    setTopics(fetchedTopics);
+    fetchTopics();
   }, []);
 
   useEffect(() => {
-    getNotes(topic, notesTitle, currentMarketPage);
+    handleGetNotes(topic, notesTitle, currentMarketPage);
   }, [topic, notesTitle, currentMarketPage]);
 
   return (

client/src/pages/marketplace/generateNote.ts

@@ -34,7 +34,7 @@ const generateNote = async (topic: string, notesTitle: string) => {
   return { topic, title, imageURL, creator };
 };
 
-export const fetchNotes = async (
+export const getNotes = async (
   topic: string,
   notesTitle: string,
   currentMarketPage: number,

client/src/pages/notes/NotesGenerator.tsx

@@ -23,6 +23,8 @@ import NotesPageImage from "~assets/img/notes_page_image.png";
 
 import { useAuth } from "~features/auth";
 
+import { generateNotes } from "~api";
+
 const NotesGeneratorPage = () => {
   const {
     isOpen: isModalOpen,
@@ -58,7 +60,7 @@ const NotesGeneratorPage = () => {
     setGenerateFlashcard(false);
   };
 
-  const handleGenerate = () => {
+  const handleGenerate = async () => {
     if (!selectedFile) {
       toast({
         title: "No file selected",
@@ -78,7 +80,9 @@ const NotesGeneratorPage = () => {
       isClosable: true,
     });
 
-    // TODO: Make an api call
+    const data = await generateNotes(selectedFile, generateFlashcard);
+
+    console.log(data);
   };
 
   return (

client/src/pages/subscribe/Subscribe.tsx

@@ -15,6 +15,8 @@ import {
 
 import { useAuth } from "~features/auth";
 
+import { getCheckoutUrl } from "~api";
+
 interface Props {
   children: React.ReactNode;
 }
@@ -40,6 +42,11 @@ const SubscribePage = () => {
   const { user } = useAuth();
   const toast = useToast();
 
+  const handleSubscribe = async () => {
+    const url = await getCheckoutUrl();
+    window.location.href = url;
+  };
+
   const handleFreePlan = () => {
     const plan = user?.is_paid ? "pro" : "free";
     toast({
@@ -166,7 +173,7 @@ const SubscribePage = () => {
                 </ListItem>
               </List>
               <Box w="80%" pt={7}>
-                <Button w="full">
+                <Button w="full" onClick={handleSubscribe}>
                   {user?.is_paid ? "Unsubscribe" : "Go Pro"}
                 </Button>
               </Box>