From 50c57d9ed48470327fde30763d9ccae231ccd9fe Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sat, 10 Apr 2021 21:32:37 -0400 Subject: [PATCH] Remove instances of fetch() --- src/components/Authenticator.tsx | 28 +++++++-------------- src/components/Groups.tsx | 42 +++++++++++++++----------------- src/components/MyGroups.tsx | 40 ++++++++++++++---------------- src/components/MyPools.tsx | 14 +++++------ src/components/Pools.tsx | 14 +++++------ src/components/UpdatePool.tsx | 24 ++++++------------ 6 files changed, 66 insertions(+), 96 deletions(-) diff --git a/src/components/Authenticator.tsx b/src/components/Authenticator.tsx index 3a1d770..c7ca7ef 100644 --- a/src/components/Authenticator.tsx +++ b/src/components/Authenticator.tsx @@ -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'); diff --git a/src/components/Groups.tsx b/src/components/Groups.tsx index 4cdde20..556467e 100644 --- a/src/components/Groups.tsx +++ b/src/components/Groups.tsx @@ -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([ + { + _id: '1234', + name: 'TJ', + creator_id: 'michael', + member_ids: [], + }, + ]); useEffect(() => { - callAPI(); + makeAPIGetCall('/groups').then((res) => { + if (res.data.data) { + setGroups(res.data.data); + } + }); }, []); + return (

{


- {state.Groups.map((group, index) => { + {groups.map((group, index) => { return (
{ backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF', }} > -
-

{group.group_title}

+ +

{group.name}

{ - 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([ + { + _id: '1234', + name: 'TJ', + creator_id: '12345Q', + member_ids: [], + }, + ]); useEffect(() => { - callAPI(); + makeAPIGetCall('/groups').then((res) => { + if (res.data.data) { + setGroups(res.data.data); + } + }); }, []); + return (

{


- {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 }} > - - {group.group_title} + + {group.name}
); diff --git a/src/components/MyPools.tsx b/src/components/MyPools.tsx index b6d2a2d..50a3434 100644 --- a/src/components/MyPools.tsx +++ b/src/components/MyPools.tsx @@ -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') => diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index b94c135..3b964ee 100644 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -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 ( diff --git a/src/components/UpdatePool.tsx b/src/components/UpdatePool.tsx index c0209d0..290d2d5 100644 --- a/src/components/UpdatePool.tsx +++ b/src/components/UpdatePool.tsx @@ -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 = (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 (