From 37236f903a27032aeca59acf0178025682e82d40 Mon Sep 17 00:00:00 2001 From: Joshua Hsueh Date: Sat, 10 Apr 2021 13:31:06 -0400 Subject: [PATCH 1/2] started groups feature --- src/App.js | 13 +++-- src/components/CreateGroup.js | 44 +++++++++++++++++ src/components/{Pools.js => Group.js} | 6 ++- src/components/Groups.js | 71 +++++++++++++++++++++++++++ src/components/MyGroups.js | 66 +++++++++++++++++++++++++ src/components/Nav.js | 9 +++- src/components/Pool.js | 3 +- src/components/UpdatePool.js | 2 +- 8 files changed, 205 insertions(+), 9 deletions(-) create mode 100644 src/components/CreateGroup.js rename src/components/{Pools.js => Group.js} (96%) create mode 100644 src/components/Groups.js create mode 100644 src/components/MyGroups.js diff --git a/src/App.js b/src/App.js index 3094f03..86a7a20 100644 --- a/src/App.js +++ b/src/App.js @@ -3,10 +3,14 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Nav from './components/Nav'; import Signin from './components/auth/Signin'; import Signup from './components/auth/Signup'; -import Pools from './components/Pools'; +import Group from './components/Group'; import Pool from './components/Pool'; import Profile from './components/Profile'; import CreatePool from './components/CreatePool'; +import CreateGroup from './components/CreateGroup'; +import Groups from './components/Groups'; +import MyGroups from './components/MyGroups'; + import UpdatePool from './components/UpdatePool'; import Main from './components/Main'; import 'bootstrap/dist/css/bootstrap.min.css'; @@ -23,9 +27,12 @@ function App() { + + + - - + + diff --git a/src/components/CreateGroup.js b/src/components/CreateGroup.js new file mode 100644 index 0000000..e7f91e3 --- /dev/null +++ b/src/components/CreateGroup.js @@ -0,0 +1,44 @@ +import React, { useState, useEffect } from 'react'; + +const CreateGroup = (props) => { + const onSubmit = (e) => { + e.preventDefault(); + + fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; + return ( +
+
+
+
+

+ Create Group +

+ + +
+
+
+
+ ); +}; + +export default CreateGroup; diff --git a/src/components/Pools.js b/src/components/Group.js similarity index 96% rename from src/components/Pools.js rename to src/components/Group.js index 924496b..db52e61 100644 --- a/src/components/Pools.js +++ b/src/components/Group.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; -const Pools = (props) => { +const Group = (props) => { + const id = props.match.params.id; const [state, setState] = useState({ Pools: [ { @@ -65,6 +66,7 @@ const Pools = (props) => { }; useEffect(() => { + console.log('hello'); callAPI(); }, []); const maybePluralize = (count, noun, suffix = 's') => @@ -117,4 +119,4 @@ const Pools = (props) => { ); }; -export default Pools; +export default Group; diff --git a/src/components/Groups.js b/src/components/Groups.js new file mode 100644 index 0000000..0966bd7 --- /dev/null +++ b/src/components/Groups.js @@ -0,0 +1,71 @@ +import React, { useState, useEffect } from 'react'; + +const Groups = (props) => { + const [state, setState] = useState({ + Groups: [ + { + id: 1, + group_title: 'TJ', + }, + ], + }); + + const callAPI = () => { + fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`) + .then((response) => response.json()) + .then((data) => { + if (data !== undefined) { + setState(data); + } + }); + }; + + useEffect(() => { + callAPI(); + }, []); + return ( +
+

+ Groups +

+ + Create Group + +
+

+ {state.Groups.map((Group, el) => { + let background; + if (el % 2 == 0) { + background = '#F1EAE8'; + } else { + background = '#FFFFFF'; + } + return ( +
+
+

{Group.group_title}

+ +
+
+ ); + })} +
+
+ ); +}; + +export default Groups; diff --git a/src/components/MyGroups.js b/src/components/MyGroups.js new file mode 100644 index 0000000..f6b4ee5 --- /dev/null +++ b/src/components/MyGroups.js @@ -0,0 +1,66 @@ +import React, { useState, useEffect } from 'react'; + +const MyGroups = (props) => { + const [state, setState] = useState({ + MyGroups: [ + { + id: 1, + group_title: 'TJ', + }, + ], + }); + + const callAPI = () => { + fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`) + .then((response) => response.json()) + .then((data) => { + if (data !== undefined) { + setState(data); + } + }); + }; + + useEffect(() => { + callAPI(); + }, []); + return ( +
+

+ My Groups +

+ + Create Group + +
+

+ {state.MyGroups.map((Group, el) => { + let background; + if (el % 2 == 0) { + background = '#F1EAE8'; + } else { + background = '#FFFFFF'; + } + return ( + + ); + })} +
+
+ ); +}; + +export default MyGroups; diff --git a/src/components/Nav.js b/src/components/Nav.js index 1fc371e..119e7f9 100644 --- a/src/components/Nav.js +++ b/src/components/Nav.js @@ -27,8 +27,13 @@ const Nav = (props) => {
  • - - Pools + + Groups + +
    • +
  • + + MyGroups
    • diff --git a/src/components/Pool.js b/src/components/Pool.js index 9f0bdee..0650725 100644 --- a/src/components/Pool.js +++ b/src/components/Pool.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; const Pool = (props) => { + const poolid = props.match.params.poolid; const id = props.match.params.id; const [state, setState] = useState({ pool_title: 'TJ Carpool', @@ -40,7 +41,7 @@ const Pool = (props) => { style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }} className=" d-flex justify-content-center p-4" > - Pool {id} + Pool {poolid}
    diff --git a/src/components/UpdatePool.js b/src/components/UpdatePool.js index 0346d64..65e5e7b 100644 --- a/src/components/UpdatePool.js +++ b/src/components/UpdatePool.js @@ -24,7 +24,7 @@ const UpdatePool = (props) => { }; const onSubmit = (e) => { e.preventDefault(); - fetch(`${process.env.REACT_APP_API_ENDPOINT}/create_pool`) + fetch(`${process.env.REACT_APP_API_ENDPOINT}/update_pool`) .then((response) => response.json()) .then((data) => { console.log(data); From 4d7de9d01429b0abdcaf55d4d4d9b4ad5f72d177 Mon Sep 17 00:00:00 2001 From: Joshua Hsueh Date: Sat, 10 Apr 2021 13:37:35 -0400 Subject: [PATCH 2/2] updated Pools to Group --- src/App.js | 3 +- src/components/Group.js | 102 ++++++++++++++++++++-------------------- 2 files changed, 51 insertions(+), 54 deletions(-) diff --git a/src/App.js b/src/App.js index 2e09340..e586d61 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,7 @@ import React from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Nav from './components/Nav'; -import Signin from './components/auth/Signin'; -import Signup from './components/auth/Signup'; + import Group from './components/Group'; import Pool from './components/Pool'; import Profile from './components/Profile'; diff --git a/src/components/Group.js b/src/components/Group.js index da90566..32c2a38 100644 --- a/src/components/Group.js +++ b/src/components/Group.js @@ -3,58 +3,56 @@ import { API_ENDPOINT } from '../api'; const Group = (props) => { const id = props.match.params.id; - const [state, setState] = useState({ - Pools: [ - { - id: 1, - pool_title: 'TJ Carpool', - pool_text: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - { - id: 2, - pool_title: 'TJ Carpool', - pool_text: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - { - id: 3, - pool_title: 'TJ Carpool', - pool_text: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - { - id: 4, - pool_title: 'TJ Carpool', - pool_text: 'Carpool from TJ track to homes', - start_time: '4/10/2021 3:00 PM', - end_time: '4/10/2021 4:00 PM', - capacity: 2, - participants: [], - comments: [ - 'What is the covid vaccination status of all the participants?', - ], - }, - ], - }); + const [pools, setPools] = useState([ + { + id: 1, + pool_title: 'TJ Carpool', + pool_text: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participants: [], + comments: [ + 'What is the covid vaccination status of all the participants?', + ], + }, + { + id: 2, + pool_title: 'TJ Carpool', + pool_text: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participants: [], + comments: [ + 'What is the covid vaccination status of all the participants?', + ], + }, + { + id: 3, + pool_title: 'TJ Carpool', + pool_text: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participants: [], + comments: [ + 'What is the covid vaccination status of all the participants?', + ], + }, + { + id: 4, + pool_title: 'TJ Carpool', + pool_text: 'Carpool from TJ track to homes', + start_time: '4/10/2021 3:00 PM', + end_time: '4/10/2021 4:00 PM', + capacity: 2, + participants: [], + comments: [ + 'What is the covid vaccination status of all the participants?', + ], + }, + ]); useEffect(() => { console.log(process.env);