rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remove instances of fetch()

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 21:32:37 -04:00
parent 7e6951ac03
commit 50c57d9ed4
6 changed files with 66 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Authenticator.tsx
View File

@ -1,6 +1,7 @@
import { useContext, useEffect, useState } from 'react';
import { Redirect, useLocation, useParams } from 'react-router-dom';
import { API_ENDPOINT } from '../api/api';
import { makeAPIPostCall } from '../api/utils';
import AuthenticationContext from './AuthenticationContext';
export default function Authenticator() {
@ -13,26 +14,15 @@ export default function Authenticator() {
);
useEffect(() => {
fetch(`${API_ENDPOINT}/create_session`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
code,
provider,
}),
})
makeAPIPostCall('/create_session', { code, provider })
.then((response) => {
response.json().then((json) => {
if (json.status === 'success') {
localStorage.setItem('session_token', json.token);
refreshAuthState && refreshAuthState();
setStatus('authenticated');
} else {
setStatus('errored');
}
});
if (response.data.status === 'success') {
localStorage.setItem('session_token', response.data.token);
refreshAuthState && refreshAuthState();
setStatus('authenticated');
} else {
setStatus('errored');
}
})
.catch(() => {
setStatus('errored');

42
src/components/Groups.tsx
View File

@ -1,28 +1,24 @@
import React, { useState, useEffect } from 'react';
import { useState, useEffect } from 'react';
import { makeAPIGetCall } from '../api/utils';
const Groups = () => {
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);
}
});
};
const [groups, setGroups] = useState<Carpool.Group[]>([
{
_id: '1234',
name: 'TJ',
creator_id: 'michael',
member_ids: [],
},
]);
useEffect(() => {
callAPI();
makeAPIGetCall('/groups').then((res) => {
if (res.data.data) {
setGroups(res.data.data);
}
});
}, []);
return (
<div className="bg-dark" style={{ minHeight: '100vh' }}>
<h1
@ -40,7 +36,7 @@ const Groups = () => {
</a>
<div className="container" style={{ fontFamily: 'Courier New' }}>
<br></br>
{state.Groups.map((group, index) => {
{groups.map((group, index) => {
return (
<div
className="card card-body text-left"
@ -48,8 +44,8 @@ const Groups = () => {
backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF',
}}
>
<form action={'/requestgroup/' + group.id} method="POST">
<p className="card-title">{group.group_title}</p>
<form action={'/requestgroup/' + group._id} method="POST">
<p className="card-title">{group.name}</p>
<input
type="submit"
value="Request to Join"

40
src/components/MyGroups.tsx
View File

@ -1,28 +1,24 @@
import React, { useState, useEffect } from 'react';
import { makeAPIGetCall } from '../api/utils';
const MyGroups = () => {
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);
}
});
};
const [groups, setGroups] = useState<Carpool.Group[]>([
{
_id: '1234',
name: 'TJ',
creator_id: '12345Q',
member_ids: [],
},
]);
useEffect(() => {
callAPI();
makeAPIGetCall('/groups').then((res) => {
if (res.data.data) {
setGroups(res.data.data);
}
});
}, []);
return (
<div className="bg-dark" style={{ minHeight: '100vh' }}>
<h1
@ -40,7 +36,7 @@ const MyGroups = () => {
</a>
<div className="container" style={{ fontFamily: 'Courier New' }}>
<br></br>
{state.MyGroups.map((group, index) => {
{groups.map((group, index) => {
let background;
if (index % 2 === 0) {
background = '#F1EAE8';
@ -52,8 +48,8 @@ const MyGroups = () => {
className="card card-body text-left"
style={{ backgroundColor: background }}
>
<a href={'/group/' + group.id} className="card-title">
{group.group_title}
<a href={'/group/' + group._id} className="card-title">
{group.name}
</a>
</div>
);

14
src/components/MyPools.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import { API_ENDPOINT } from '../api/api';
import { makeAPIGetCall } from '../api/utils';
const MyPools = () => {
// const id = props.match.params.id;
@ -55,14 +56,11 @@ const MyPools = () => {
]);
useEffect(() => {
console.log(process.env);
fetch(`${API_ENDPOINT}/my_pools`)
.then((response) => response.json())
.then((json) => {
if (json) {
setPools(json.data);
}
});
makeAPIGetCall('/my_pools').then((res) => {
if (res.data.data) {
setPools(res.data.data);
}
});
}, []);
const maybePluralize = (count: number, noun: string, suffix = 's') =>

14
src/components/Pools.tsx
View File

@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import { API_ENDPOINT } from '../api/api';
import { makeAPIGetCall } from '../api/utils';
const maybePluralize = (count: number, noun: string, suffix = 's') =>
`${count} ${noun}${count !== 1 ? suffix : ''}`;
@ -58,14 +59,11 @@ const Pools = () => {
]);
useEffect(() => {
console.log(process.env);
fetch(`${API_ENDPOINT}/my_pools`)
.then((response) => response.json())
.then((json) => {
if (json) {
setPools(json.data);
}
});
makeAPIGetCall('/my_pools').then((res) => {
if (res.data.data) {
setPools(res.data.data);
}
});
}, []);
return (

24
src/components/UpdatePool.tsx
View File

@ -5,6 +5,7 @@ import React, {
FormEventHandler,
} from 'react';
import { useParams } from 'react-router-dom';
import { makeAPIGetCall } from '../api/utils';
const UpdatePool = () => {
const id = useParams<{ id: string }>().id;
@ -21,26 +22,17 @@ const UpdatePool = () => {
comments: ['What is the covid vaccination status of all the participants?'],
});
const callAPI = useCallback(() => {
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
.then((response) => response.json())
.then((data) => {
if (data !== undefined) {
setPool(data);
}
});
}, [id]);
const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
fetch(`${process.env.REACT_APP_API_ENDPOINT}/update_pool`)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
makeAPIGetCall('/update_pool').then((res) => {
console.log(res);
});
};
useEffect(() => {
callAPI();
}, [callAPI]);
makeAPIGetCall('/pool', { poolID: id }).then((res) => {
if (res.data.data) setPool(res.data.data);
});
}, [id]);
return (
<div
className="bg-dark"