Merge branch 'main' of https://github.com/thomaspwang/WakeTheF-ckUp

frontend/src/components/FriendSearch/FriendSearch.js

@@ -1,22 +1,28 @@
-import  React, { useState } from "react";
+import  React, { useEffect, useState } from "react";
 import TextField from "@mui/material/TextField";
 import { Button, Paper } from "@material-ui/core";
 import { currUserAtom } from "../../atoms";
 import { useAtom } from "jotai";
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 
 function FriendSearch() {
-  const searchUrl = "http://localhost:4000/users/addFriends/"
+  const searchUrl = "http://localhost:4000/users/addFriend/"
 
   const [user, setUser] = useAtom(currUserAtom);
   const [inputText, setInputText] = useState("");
   const [response, setResponse] = useState(null);
   const [friends, setFriends] = useState([]);
 
   let inputHandler = (e) => {
-    setInputText(e);
+    setInputText(e.target.value);
   };
 
-  const handleSubmit = async () =>{
+  const handleSubmit = async () => {
+    console.log(inputText)
     const response = await fetch(searchUrl, {
       mode: 'cors',
       method: 'POST',
@@ -30,9 +36,29 @@ function FriendSearch() {
         "friend" : inputText
       })
     });
-
   };
 
+  const getFriends = async () => {
+    const endpoint = `http://localhost:4000/users/getFriends/?username=${user}`
+    fetch(endpoint, {
+      mode: 'cors',
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Origin' : 'http://localhost:3000'
+      }
+    }).then(response =>
+      response.json().then(data => console.log(data['friends'])))
+  }
+
+  useEffect(() => {
+    getFriends();
+    console.log(user)
+    console.log(typeof friends)
+    console.log(friends)
+  }, [])
+
   return (
         <div className="main">
           <h1>Find Friends</h1>
@@ -47,6 +73,15 @@ function FriendSearch() {
             {response && <><small style={{ color: 'red' }}>{response}</small><br /></>}<br />
             <Button onClick={handleSubmit}>Add Friend</Button>
           </div>
+          <p class="title"> current friends</p>
+          {/* <List>
+            <>
+              {
+                friends.map(friend =>
+                  <ListItemText primary={friend}/>)
+              }
+            </>
+          </List> */}
         </div>
     );
 }

frontend/src/components/FriendsDropdown/FriendsDropdown.js

@@ -13,6 +13,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { Button, Paper } from "@material-ui/core";
 import { useAtom } from 'jotai';
 import { currUserAtom } from '../../atoms';
+import { useNavigate } from "react-router-dom";
 import "./FriendDropdown.css";
 
 const ITEM_HEIGHT = 48;
@@ -53,6 +54,7 @@ export default function FriendsDropdown() {
   const [personName, setPersonName] = React.useState([]);
   const [user] = useAtom(currUserAtom);
   const [onCall, setOnCall] = React.useState([]);
+  const navigate = useNavigate();
 
   const handleChange = (event) => {
     const {
@@ -81,6 +83,10 @@ export default function FriendsDropdown() {
     setOnCall(personName);
   };
 
+  const navigateFriends = () => {
+    navigate("/friends")
+  }
+
   return (
     <div id="outer-box">
         <div id="inner-box">
@@ -110,7 +116,8 @@ export default function FriendsDropdown() {
         </FormControl>
       </div>
       <div id="second-box">
-        <Button id="add-button" onClick={handleSubmit}>add</Button>
+        <Button id="oncall-button" onClick={handleSubmit}>add</Button>
+        <Button id="oncall-button" onClick={navigateFriends}>find more friends</Button>
         <p class="title" id="curr-oncall">current oncall friends</p>
         <List>
           <>

frontend/src/pages/SignUp/SignUp.js

@@ -4,6 +4,7 @@ import TextField from "@material-ui/core/TextField";
 import Button from '@mui/material/Button';
 import { useAtom } from "jotai";
 import { currUserAtom } from "../../atoms";
+import { useNavigate } from "react-router-dom";
 
 const useFormInput = initialValue => {
   const [value, setValue] = useState(initialValue);
@@ -34,6 +35,8 @@ function SignUp() {
     const [loading, setLoading] = useState(false);
     const [user, setUser] = useAtom(currUserAtom);
 
+    const navigate = useNavigate();
+
 
     const handleSignUp = async () => {
       const response = await fetch("http://localhost:4000/users/newUser/", {
@@ -45,10 +48,10 @@ function SignUp() {
           'Origin' : 'http://localhost:3000'
         },
         body: JSON.stringify({ 
-          "username" : username.value,
-          "password" : password.value,
-          "address" : street.value + state.value + city.value,
-          "phone" : phone.value
+          "username" : username,
+          "password" : password,
+          "address" : street + state + city,
+          "phone" : phone
         })
       });
 
@@ -57,12 +60,9 @@ function SignUp() {
       if (response.status === 400) {
         setError("Account already exists! Try logging in.");
       } else {
-        setUser(username.value);
-        // history('/main');
+        setUser(username);
+        navigate("/alarm")
       }
-
-      const responseJson = await response.json();
-      console.log(responseJson);
     }
 
     const handlePasswordChange = e => {
@@ -171,6 +171,7 @@ function SignUp() {
             <br />
 
             <Button 
+              onClick={handleSignUp}
               style={{
                 backgroundColor: "rgba(186,209,250)", fontFamily: "DM SANS", textTransform: "lowercase", color: "black", boxShadow: "none"
             }}