Merge pull request #30 from SohamRatnaparkhi/next/api-setup

feat: all required api routes and their integrations

frontend/app/api/phonebook/[userId]/route.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { NextResponse } from "next/server";
+
+const getUserPhoneBook = async (route) => {
+    try {
+        const backendURL = process.env.BACKEND_URL || "http://localhost:5000";
+        const userId = (route.url.split('/').reverse()[0])
+        console.log(backendURL + "/api/v1/phonebook/user/" + userId)
+        const {data} = await axios.get(backendURL + "/api/v1/phonebook/user/" + userId);
+        console.log(data)
+        return NextResponse.json(data);
+    } catch (error) {
+        return NextResponse.error(error);
+    }
+}
+
+export {
+    getUserPhoneBook as GET
+}

frontend/app/api/phonebook/route.js

@@ -3,8 +3,12 @@ import { NextResponse } from "next/server";
 
 const getAllContacts = async () => {
     try {
-        const backendURL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:5000";
-        const {data} = await axios.get(backendURL + "/api/phonebook");
+        const backendURL = process.env.BACKEND_URL;
+        console.log("in")
+        console.log(backendURL + "/api/v1/phonebook")
+        const {data} = await axios.get(backendURL + "/api/v1/phonebook");
+        console.log(data)
+        console.log("in")
         return NextResponse.json(data);
     } catch (error) {
         return NextResponse.error(error);
@@ -13,9 +17,9 @@ const getAllContacts = async () => {
 
 const addContact = async (request) => {
     try {
-        const backendURL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:5000";
+        const backendURL = process.env.BACKEND_URL || "http://localhost:5000";
         const req = await request.json();
-        const {data} = await axios.post(backendURL + "/api/phonebook", req);
+        const {data} = await axios.post(backendURL + "/api/v1/phonebook", req);
         return NextResponse.json(data);
     } catch (error) {
         return NextResponse.error(error);

frontend/app/api/users/route.js

@@ -0,0 +1,32 @@
+import axios from "axios";
+import { NextResponse } from "next/server";
+
+const login = async (request) => {
+    try {
+        const backendURL = process.env.BACKEND_URL || "http://localhost:5000";
+        const req = await request.json();
+        console.log(backendURL + "/api/v1/users/login")
+        console.log(req)
+        const {data} = await axios.post(backendURL + "/api/v1/users/login", req);
+        console.log(data)
+        return NextResponse.json(data);
+    } catch (error) {
+        return NextResponse.error(error);
+    }
+}
+
+const register = async (request) => {
+    try {
+        const backendURL = process.env.BACKEND_URL || "http://localhost:5000";
+        const req = await request.json();
+        const {data} = await axios.post(backendURL + "/api/v1/users/", req);
+        return NextResponse.json(data);
+    } catch (error) {
+        return NextResponse.error(error);
+    }
+}
+
+export {
+    login as POST,
+    register as PUT
+}    

frontend/app/login/page.jsx

@@ -15,15 +15,15 @@ const Login = () => {
   const [ethAddress, setEthAddress] = useState("");
   const router = useRouter()
   const handleLogin = async () => {
-    const { data } = await axios.post('/api/nest/users/login', {
+    const { data } = await axios.post('/api/users/', {
       email,
       password,
       ethAddress
     });
     if (data?.ethAddress) {
       setLogin(true)
       setUser(data)
-      router.push('/schedule')
+      router.push('/schedule-meets')
     } else {
       alert("Something went wrong");
     }

frontend/app/meeting/components/meeting/Controls.jsx

@@ -19,24 +19,43 @@ const Controls = ({ URL }) => {
     const { isStarting, inProgress, isStopping, data } = useRecording();
     const isMuteOnJoin = useMeetingStore(state => state.isMuteOnJoin);
     const isDisableVideoOnJoin = useMeetingStore(state => state.isDisableVideoOnJoin);
-    const recorder = new RecordRTC_Extension();
     var screenShareStream = null;
+    var recorder;
+
+    if (typeof RecordRTC_Extension === 'undefined') {
+        recorder = null;
+    } else {
+        recorder = new RecordRTC_Extension();
+    }
+
     const startRecording = async () => {
-        if (!recorder) {
-            alert("RecordRTC chrome extension is either disabled or not installed. Install the extension to record the screen")
-        } else {
-            recorder.startRecording({
-                enableScreen: true,
-                enableMicrophone: true,
-                enableSpeakers: true
-            });
+        try {
+            if (recorder == undefined || recorder == null) {
+                alert("RecordRTC chrome extension is either disabled or not installed. Install the extension to record the screen")
+            } else {
+                recorder.startRecording({
+                    enableScreen: true,
+                    enableMicrophone: true,
+                    enableSpeakers: true
+                });
+            }
+        } catch (e) {
+            console.log(e);
         }
     }
+
     const stopRecording = async () => {
-        recorder.stopRecording(function (blob) {
+        // console.log(recorder)
+        recorder.stopRecording(function (blob, error) {
             console.log("blob", blob)
+            console.log("error", error)
+            recorder = null;
+            if (blob == false) {
+                alert("RecordRTC chrome extension is either disabled or not installed. Install the extension to record the screen")
+                return;
+            }
             const link = document.createElement('a');
-            link.href = window.URL.createObjectURL(blob);
+            link.href = window.URL?.createObjectURL(blob);
             link.download = `recording-${+new Date()}.webm`;
             link.click();
         });

frontend/app/phonebook/components/AddContact.jsx

@@ -1,4 +1,3 @@
-import { TextField } from "@mui/material";
 import React from "react";
 
 const AddContact = ({addContact, setAddContact, addContactHandler}) => {

frontend/app/phonebook/components/GroupsContacts.jsx

@@ -1,9 +1,32 @@
-import React from "react";
+"use client";
+
+import React, { useEffect } from "react";
 import { FiPlusSquare } from "react-icons/fi";
 import Image from "next/image";
 
 const GroupsContacts = ({addContact, setAddContact, addGroup, setAddGroup, phonebookData }) => {
   console.log(phonebookData)
+  const [filteredData, setFilteredData] = React.useState(phonebookData);
+  const [search, setSearch] = React.useState("");
+  console.log(filteredData)
+  useEffect(() => {
+    const data = filterData();
+    console.log(data)
+    setFilteredData(data);
+  }, [search]);
+
+  useEffect(() => {
+    if (filteredData.length > 0) return;
+    setFilteredData(phonebookData);
+  }, [phonebookData]);
+
+  const filterData = () => {
+    const newData = phonebookData.filter((contact) => {
+      return contact.name.toLowerCase().includes(search.toLowerCase()) || contact.address.toLowerCase().includes(search.toLowerCase());
+    });
+    setFilteredData(newData.length > 0 ? newData : phonebookData);
+    return newData;
+  }
   return (
     <div className="relative flex justify-end w-9/12 h-5/6">
       <div className="flex flex-col justify-between items-center rounded-l-[30px] bg-white w-full border-4 border-[#EDF2FE]">
@@ -36,7 +59,7 @@ const GroupsContacts = ({addContact, setAddContact, addGroup, setAddGroup, phone
               <img src="/images/group-image.png" className=" w-full h-full" />
               <div className="z-10 absolute bottom-0 w-full h-2/5 bg-[#5D8BF4] rounded-b-[20px] flex flex-col items-center justify-center text-white">
                 <span>Executive</span>
-                <span>Commitee</span>
+                <span>Committee</span>
               </div>
             </div>
           </div>
@@ -50,6 +73,10 @@ const GroupsContacts = ({addContact, setAddContact, addGroup, setAddGroup, phone
                 className="border-[2px] border-[#bbbbbb] px-3 rounded-[8px] active:border-[#bbbbbb]"
                 type="text"
                 placeholder=" Search"
+                onChange={(e) => {
+                  setSearch(e.target.value)
+                  filterData()
+                }}
               />
             </div>
 
@@ -70,7 +97,7 @@ const GroupsContacts = ({addContact, setAddContact, addGroup, setAddGroup, phone
               <div className="flex flex-col items-center  w-full h-80% border-r-[1px] border-[#aaaaaa]">
                 <div className="flex flex-col items-center w-90% h-90% gap-5 max-h-[235px] overflow-y-scroll">
 
-                  {phonebookData
+                  {filteredData
                     ?.map((contact, index) => {
 
                       if(index%2==1){
@@ -81,7 +108,7 @@ const GroupsContacts = ({addContact, setAddContact, addGroup, setAddGroup, phone
                       <div className="text-sm font-semibold ">
                         {contact.name}
                       </div>
-                      <div className="text-[12px] text-[#777777]">Chairman</div>
+                            <div className="text-[12px] text-[#777777]">{contact.address?.substring(0, 6)}...{contact.address?.substring(36,40)}</div>
                     </div>
                   </div>);
                       }
@@ -93,7 +120,7 @@ const GroupsContacts = ({addContact, setAddContact, addGroup, setAddGroup, phone
               <div className="flex flex-col items-center  w-full h-80%">
                 <div className="flex flex-col items-center w-90% h-90% gap-5 max-h-[235px] bg-white overflow-y-scroll">
 
-                {phonebookData
+                  {filteredData
                     ?.map((contact, index) => {
                       if(index%2==0){
                       return(
@@ -103,7 +130,7 @@ const GroupsContacts = ({addContact, setAddContact, addGroup, setAddGroup, phone
                       <div className="text-sm font-semibold ">
                         {contact.name || contact.email}
                       </div>
-                      <div className="text-[12px] text-[#777777]">{contact.ethAddress}</div>
+                      <div className="text-[12px] text-[#777777]">{contact.address?.substring(0, 6)}...{contact.address?.substring(36,40)}</div>
                     </div>
                   </div>);
                       }

frontend/app/phonebook/page.jsx

@@ -6,46 +6,46 @@ import Sidebar from "../schedule-meets/components/Sidebar";
 import GroupsContacts from "./components/GroupsContacts";
 import AddContact from "./components/AddContact";
 import CreateGroup from "./components/CreateGroup";
-import { async } from "regenerator-runtime";
 import axios from "axios";
+import { useAppStore } from "../store/AppStore";
+import { useRouter } from "next/navigation";
 
 const Phonebook = () => {
   const [addGroup, setAddGroup] = React.useState(false);
   const [addContact, setAddContact] = React.useState(false);
-
+  const router = useRouter();
   const [phonebookData, setPhonebookData] = useState([]);
 
+  const user = useAppStore(state => state.user)
+
   useEffect(() => {
-    // fetch("api/phonebook/")
-    //   .then((res) => {
-    //     return res.json();
-    //   })
-    //   .then((data) => {
-    //     setPhonebookData(data);
-    //   });
     const getData = async () => {
-      const { data } = await axios.get("/api/nest/users/");
+      console.log(user)
+      if (!user) {
+        router.push('/login')
+      }
+      const { data } = await axios.get("/api/phonebook/" + user.userId);
       setPhonebookData(data);
     };
     getData();
   }, []);
   console.log(phonebookData)
-  const addContactHandler = async (name, address, userId) => {
+  const addContactHandler = async (name, address) => {
     const response = await axios
       .post("/api/phonebook/", {
         name: name,
         address: address,
-        userId: 'clmqll67z0001i0887xh2yn8l',
+        userId: user.userId,
       })
       .then((res) => {
-        return console.log(res.json());
+        console.log(res.json());
+        window.location.reload();
       })
       .catch(function (error) {
         console.log(`Post req: ${error}`);
       });
   };
 
-  // console.log(phonebookData)
 
   return (
     <div className="flex flex-col items-center justify-center w-full h-full bg-white">
@@ -74,7 +74,7 @@ const Phonebook = () => {
           setAddGroup={setAddGroup}
           phonebookData={phonebookData}
         />
-        {console.log("Phone" + phonebookData)}
+        {/* {console.log("Phone" + phonebookData)} */}
       </div>
     </div>
   );

frontend/app/schedule-meets/components/Calendar.jsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { use, useEffect, useState } from "react";
 import dayjs from "dayjs";
 
 import NextIcon from "@/app/svg-icons/NextIcon";
@@ -11,17 +11,20 @@ import axios from "axios";
 
 
 import cn from "@/app/utils/cn";
+import { useAppStore } from "@/app/store/AppStore";
 
 const Calendar = () => {
   const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
   const currentDate = dayjs();
   const [today, setToday] = useState(currentDate);
   const [selectDate, setSelectDate] = useState(currentDate);
+  const user = useAppStore(state => state.user)
 
   useEffect(() => {
     const getMeets = async () => {
+      console.log(user.ethAddress)
       const { data } = await axios.patch('/api/meetings', {
-        "address":"0x9965507D1a55bcC2695C58ba16FB37d819B0A4dc"
+        "address": user.ethAddress
       })
       console.log(data);
     }

frontend/app/signup/page.jsx

@@ -6,6 +6,7 @@ import Box from '@mui/material/Box';
 import axios from 'axios';
 import { useAppStore } from '../store/AppStore';
 import { deployContract } from '../hooks/Web3';
+import { useRouter } from 'next/navigation';
 
 const Signup = () => {
   const [email, setEmail] = React.useState("");
@@ -15,21 +16,22 @@ const Signup = () => {
   const [confirmPassword, setConfirmPassword] = React.useState("");
   const setLogin = useAppStore(state => state.setLogin)
   const setUser = useAppStore(state => state.setUser)
+  const router = useRouter()
   const handleSignup = async () => {
     const contract = await deployContract('abc def');
     console.log(contract.address ?? 'no address')
-    const { data } = await axios.post('/api/nest/users/', {
+    const { data } = await axios.put('/api/users/', {
       email,
       name: username,
       ethAddress,
       contractAddress: contract.address,
       password,
     });
     if (data?.ethAddress) {
-
       setLogin(true)
       setUser(data)
       alert("Signup successful")
+      router.push('/login')
     } else {
       alert("Something went wrong");
     }