diff --git a/src/App.tsx b/src/App.tsx index dd218ca..e586d61 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,15 @@ import React from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Nav from './components/Nav'; -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 Home from './components/Home'; import Main from './components/Main'; @@ -20,9 +25,12 @@ function App() { + + + - - + + diff --git a/src/api.ts b/src/api.ts index ce57768..82300fa 100644 --- a/src/api.ts +++ b/src/api.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line const dev = process.env.NODE_ENV === 'development'; export const API_ENDPOINT = 'http://localhost/api'; export const ION_AUTHORIZATION_ENDPOINT = diff --git a/src/components/CreateGroup.tsx b/src/components/CreateGroup.tsx new file mode 100644 index 0000000..ef6ef1c --- /dev/null +++ b/src/components/CreateGroup.tsx @@ -0,0 +1,45 @@ +import { useCallback } from 'react'; + +const CreateGroup = () => { + const onSubmit = useCallback>((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/Group.tsx b/src/components/Group.tsx new file mode 100644 index 0000000..b9eadcf --- /dev/null +++ b/src/components/Group.tsx @@ -0,0 +1,121 @@ +import { useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { API_ENDPOINT } from '../api'; + +const maybePluralize = (count: number, noun: string, suffix = 's') => + `${count} ${noun}${count !== 1 ? suffix : ''}`; + +const Group = () => { + // eslint-disable-next-line + const { id } = useParams<{ id: string }>(); + 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); + fetch(`${API_ENDPOINT}/my_pools`) + .then((response) => response.json()) + .then((json) => { + if (json) { + setPools(json.data); + } + }); + }, []); + + return ( +
+

+ Pools +

+ + Create Pool + +
+

+ {pools.map((pool, index) => { + let background; + if (index % 2 === 0) { + background = '#F1EAE8'; + } else { + background = '#FFFFFF'; + } + return ( +
+ + {pool.pool_title} + +

+ Capacity: {pool.participants.length} / {pool.capacity} +

+

Start Time: {pool.start_time}

+

End Time: {pool.end_time}

+

+ {maybePluralize(pool.comments.length, 'comment')} +

+
+ ); + })} +
+
+ ); +}; + +export default Group; diff --git a/src/components/Groups.js b/src/components/Groups.js new file mode 100644 index 0000000..3f2ca14 --- /dev/null +++ b/src/components/Groups.js @@ -0,0 +1,67 @@ +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, index) => { + 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..4ddcd86 --- /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, index) => { + let background; + if (index % 2 === 0) { + background = '#F1EAE8'; + } else { + background = '#FFFFFF'; + } + return ( +
+ + {group.group_title} + +
+ ); + })} +
+
+ ); +}; + +export default MyGroups; diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 672a26c..dff85a9 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -25,8 +25,13 @@ const Nav = () => {
  • - - Pools + + Groups + +
    • +
  • + + MyGroups
    • diff --git a/src/components/Pool.tsx b/src/components/Pool.tsx index a2de11c..6b86f2a 100644 --- a/src/components/Pool.tsx +++ b/src/components/Pool.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, FormEventHandler } from 'react'; +import { useState, useEffect, FormEventHandler, useCallback } from 'react'; import { useParams } from 'react-router'; const Pool = () => { @@ -14,16 +14,7 @@ const Pool = () => { comments: ['What is the covid vaccination status of all the participants?'], }); - const callAPI = () => { - fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`) - .then((response) => response.json()) - .then((data) => { - if (data !== undefined) { - setState(data); - } - }); - }; - const onComment: FormEventHandler = (e) => { + const onComment = useCallback>((e) => { e.preventDefault(); fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/comments`) @@ -31,10 +22,18 @@ const Pool = () => { .then((data) => { console.log(data); }); - }; - useEffect(() => { - callAPI(); }, []); + + useEffect(() => { + fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`) + .then((response) => response.json()) + .then((data) => { + if (data !== undefined) { + setState(data); + } + }); + }, [id]); + return (

    { }, [id]); const onSubmit: FormEventHandler = (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);