diff options
-rw-r--r-- | src/components/PollsList/PollsList.tsx | 5 | ||||
-rw-r--r-- | src/containers/Profile/Profile.tsx | 21 | ||||
-rw-r--r-- | src/hooks/APIClient.ts | 23 | ||||
-rw-r--r-- | src/hooks/useAuth.tsx | 4 |
4 files changed, 27 insertions, 26 deletions
diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index 0fd8fa4..c95bfde 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -17,13 +17,12 @@ interface RenderPropTypes { const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => { - const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => { const poll = polls[index]; - const setPoll = (poll: Poll) => { + const setPoll = (newPoll: Poll) => { const newPolls = [...polls]; - newPolls[index] = poll; + newPolls[index] = newPoll; // Force-update list-size so everything re-renders mutate([], false); diff --git a/src/containers/Profile/Profile.tsx b/src/containers/Profile/Profile.tsx index f7678de..7e929fb 100644 --- a/src/containers/Profile/Profile.tsx +++ b/src/containers/Profile/Profile.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useCallback } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { useHistory, useParams } from 'react-router-dom'; import { Poll } from 'which-types'; import { Container } from '@material-ui/core'; @@ -26,15 +26,12 @@ const Profile: React.FC = () => { }, [username, history, user]); - const totalVotes = useCallback( - polls.reduce( - (total: number, current: Poll) => { - const { left, right } = current.contents; - return total + left.votes + right.votes; - }, 0 - ), - [polls] - ); + const totalVotes = useMemo(() => polls.reduce( + (total: number, current: Poll) => { + const { left, right } = current.contents; + return total + left.votes + right.votes; + }, 0 + ), [polls]); return ( <Container maxWidth="sm" disableGutters> @@ -46,8 +43,8 @@ const Profile: React.FC = () => { /> { isValidating && !polls - ? <Loading /> - : <PollsList polls={polls} mutate={mutatePolls} /> + ? <Loading /> + : <PollsList polls={polls} mutate={mutatePolls} /> } </Container> ); diff --git a/src/hooks/APIClient.ts b/src/hooks/APIClient.ts index 2322af4..9563bd6 100644 --- a/src/hooks/APIClient.ts +++ b/src/hooks/APIClient.ts @@ -1,7 +1,12 @@ -import useSWR from 'swr'; +import useSWR, { responseInterface } from 'swr'; +import { User, Poll, Feedback } from 'which-types'; import { get } from '../requests'; +interface Response<T> extends responseInterface<T, Error> { + data: T; +} + const fetcher = (endpoint: string) => get(endpoint).then(response => response.data); const arrayOptions = { @@ -9,21 +14,21 @@ const arrayOptions = { revalidateOnMount: true }; -export const useUser = (username: string | null) => { +export const useUser = (username: string | null): Response<User> => { return useSWR( username && `/users?username=${username}`, (url: string) => get(url).then(response => response.data[0]) - ); + ) as Response<User>; }; -export const useProfile = (id: string) => { - return useSWR(id && `/profiles/${id}`, fetcher, arrayOptions); +export const useProfile = (id: string): Response<Poll[]> => { + return useSWR(id && `/profiles/${id}`, fetcher, arrayOptions) as Response<Poll[]>; }; -export const useFeed = () => { - return useSWR('/feed', fetcher, { ...arrayOptions, revalidateOnFocus: false }); +export const useFeed = (): Response<Poll[]> => { + return useSWR('/feed', fetcher, { ...arrayOptions, revalidateOnFocus: false }) as Response<Poll[]>; }; -export const useFeedback = () => { - return useSWR('/feedback', fetcher, arrayOptions); +export const useFeedback = (): Response<Feedback[]> => { + return useSWR('/feedback', fetcher, arrayOptions) as Response<Feedback[]>; }; diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx index ed1e428..2f03a33 100644 --- a/src/hooks/useAuth.tsx +++ b/src/hooks/useAuth.tsx @@ -8,14 +8,14 @@ import useLocalStorage from './useLocalStorage'; interface ContextType { - user: User | null, + user: User | undefined, login: (username: string, password: string, remember?: boolean) => Promise<boolean>; logout: () => void; isAuthenticated: boolean; } const authContext = createContext<ContextType>({ - user: null, + user: undefined, login: async () => false, logout: () => {}, isAuthenticated: false |