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

thomaspwang · Oct 16, 2022 · ca18b59 · ca18b59
2 parents 1be64ac + de5851c
commit ca18b59
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 30 deletions.
diff --git a/frontend/src/assets/angybees.png b/frontend/src/assets/angybees.png
diff --git a/frontend/src/components/CountdownTimer/CountdownTimer.js b/frontend/src/components/CountdownTimer/CountdownTimer.js
@@ -1,9 +1,30 @@
 import React from 'react';
-import "./datetime.css"
+import "./datetime.css";
 import DateTimeDisplay from './DateTimeDisplay';
 import { useCountdown } from './useCountdown';
 
 const ExpiredNotice = () => {
+
+  const notifyTwilio = async () => {
+    searchUrl = `http://localhost:4000/twlio/activateAlarm`
+    const response = await fetch(searchUrl, {
+      mode: 'cors',
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Origin' : 'http://localhost:3000'
+      },
+      body: JSON.stringify({ 
+        "username" : user,
+      })
+    });
+  };
+
+  useEffect(() => {
+    notifyTwilio()
+  }, []);
+
   return (
     <div className="expired-notice">
       <span>Expired!!!</span>

diff --git a/frontend/src/components/FriendSearch/FriendSearch.css b/frontend/src/components/FriendSearch/FriendSearch.css
@@ -31,3 +31,9 @@
     align-items: center;
 }
 
+.angybee {
+    max-width: 25%;
+    height: auto;
+    margin-left: 10px;
+    margin-bottom: -20px;
+}
diff --git a/frontend/src/components/FriendSearch/FriendSearch.js b/frontend/src/components/FriendSearch/FriendSearch.js
@@ -77,20 +77,6 @@ function FriendSearch() {
     // }
   };
 
-  const getFriends = async () => {
-    const endpoint = `http://34.168.40.206: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)
@@ -101,6 +87,7 @@ function FriendSearch() {
   return (
     <div className="outer-box">
       <div className="main">
+        <img className="angybee" src={require("../../assets/angybees.png")}></img>
         <div className="title">find friends</div>
           <div className="search">
             <TextField
@@ -122,7 +109,7 @@ function FriendSearch() {
             </Button>
           </div>
           <p class="title"> current friends</p>
-          <List>
+          <List style={{ textAlignLast: "center" }}>
             <>
               {
                 friends.map(friend =>

diff --git a/frontend/src/components/FriendsDropdown/FriendsDropdown.js b/frontend/src/components/FriendsDropdown/FriendsDropdown.js
@@ -27,19 +27,6 @@ const MenuProps = {
   },
 };
 
-const names = [
-  'Oliver Hansen',
-  'Van Henry',
-  'April Tucker',
-  'Ralph Hubbard',
-  'Omar Alexander',
-  'Carlos Abbott',
-  'Miriam Wagner',
-  'Bradley Wilkerson',
-  'Virginia Andrews',
-  'Kelly Snyder',
-];
-
 function getStyles(name, personName, theme) {
   return {
     fontWeight:
@@ -54,8 +41,37 @@ export default function FriendsDropdown() {
   const [personName, setPersonName] = React.useState([]);
   const [user] = useAtom(currUserAtom);
   const [onCall, setOnCall] = React.useState([]);
+  const [friends, setFriends] = React.useState([]);
   const navigate = useNavigate();
 
+  const getFriends = async () => {
+    const endpoint = `http://localhost:4000/users/getFriends/?username=${user}`
+    const res = await fetch(endpoint, {
+      mode: 'cors',
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Origin' : 'http://localhost:3000'
+      }
+    })
+    const data = await res.json();
+    console.log(data)
+    setFriends(data['friends'])
+    // ).then(response =>
+    //   response.json().then(data => data['friends'])
+    //   .then(data => {
+    //     setFriends(data)
+    //   }))
+  }
+
+  React.useEffect(() => {
+    getFriends();
+    // console.log(user)
+    // console.log(typeof friends)
+    console.log(friends)
+  }, [])
+
   const handleChange = (event) => {
     const {
       target: { value },
@@ -103,7 +119,7 @@ export default function FriendsDropdown() {
             input={<OutlinedInput label="Friends" />}
             MenuProps={MenuProps}
           >
-            {names.map((name) => (
+            {friends.map((name) => (
               <MenuItem
                 key={name}
                 value={name}