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);