Merge pull request #74 from which-ecosystem/fetching

SWR feat. crazy refactor

3 files changed, 81 insertions, 38 deletions

diff --git a/src/hooks/APIClient.ts b/src/hooks/APIClient.ts
new file mode 100644
index 0000000..9563bd6
--- /dev/null
+++ b/src/hooks/APIClient.ts
@@ -0,0 +1,34 @@
+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 = {
+  initialData: [],
+  revalidateOnMount: true
+};
+
+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): Response<Poll[]> => {
+  return useSWR(id && `/profiles/${id}`, fetcher, arrayOptions) as Response<Poll[]>;
+};
+
+export const useFeed = (): Response<Poll[]> => {
+  return useSWR('/feed', fetcher, { ...arrayOptions, revalidateOnFocus: false }) as Response<Poll[]>;
+};
+
+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 55e142c..2f03a33 100644
--- a/src/hooks/useAuth.tsx
+++ b/src/hooks/useAuth.tsx
@@ -1,67 +1,60 @@
 import React, {
-  useState, useEffect, useContext, createContext
+  useEffect, useCallback, useMemo, useContext, createContext
 } from 'react';
 import { User } from 'which-types';
-import { post, get } from '../requests';
+import { post } from '../requests';
+import { useUser } from './APIClient';
+import useLocalStorage from './useLocalStorage';
 
 
 interface ContextType {
-  user: User | null,
-  setUser: (user: User) => void;
+  user: User | undefined,
   login: (username: string, password: string, remember?: boolean) => Promise<boolean>;
   logout: () => void;
-  isAuthenticated: () => boolean;
+  isAuthenticated: boolean;
 }
 
 const authContext = createContext<ContextType>({
-  user: null,
-  setUser: () => {},
+  user: undefined,
   login: async () => false,
   logout: () => {},
-  isAuthenticated: () => false
+  isAuthenticated: false
 });
 
 const useProvideAuth = () => {
-  const [user, setUser] = useState<User | null>(null);
+  const [remember, setRemember] = useLocalStorage('remember');
+  const [username, setUsername] = useLocalStorage('username');
+  const [token, setToken] = useLocalStorage('token');
+  const { data: user } = useUser(username);
 
-  const login: ContextType['login'] = (username, password, remember = true) => {
+  const isAuthenticated = useMemo(() => Boolean(username), [username]);
+
+  const logout = useCallback(() => {
+    setToken(null);
+    setUsername(null);
+  }, [setToken, setUsername]);
+
+  useEffect(() => {
+    // If should not remember, logout
+    if (!remember) logout();
+  }, [remember, logout]);
+
+
+  const login: ContextType['login'] = (name, password, shouldRemember = true) => {
     return post('/authentication', {
       strategy: 'local',
-      username,
+      username: name,
       password
     }).then(response => {
-      const me = response.data.user;
-      const token = response.data.accessToken;
-      setUser(me);
-      localStorage.setItem('userId', me._id);
-      localStorage.setItem('token', token);
-      if (!remember) localStorage.setItem('shouldClear', 'true');
+      setToken(response.data.accessToken);
+      setUsername(name);
+      setRemember(shouldRemember ? 'true' : null);
       return true;
     }).catch(() => false);
   };
 
-  const logout = () => {
-    setUser(null);
-    localStorage.removeItem('userId');
-    localStorage.removeItem('token');
-  };
-
-  const isAuthenticated = () => Boolean(user);
-
-  useEffect(() => {
-    if (localStorage.getItem('shouldClear')) {
-      localStorage.clear();
-    }
-    const userId = localStorage.getItem('userId');
-    if (userId) {
-      get(`/users/${userId}`).then(response => {
-        setUser(response.data);
-      });
-    }
-  }, []);
-
   return {
-    user, setUser, login, logout, isAuthenticated
+    user, login, logout, token, isAuthenticated
   };
 };
 
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
new file mode 100644
index 0000000..faf1411
--- /dev/null
+++ b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,16 @@
+import { useState, useCallback } from 'react';
+
+type Value = string | null;
+type Setter = (value: Value) => void;
+
+export default (key: string): [Value, Setter] => {
+  const [state, setState] = useState<Value>(() => localStorage.getItem(key) || null);
+
+  const update: Setter = useCallback(value => {
+    if (value) localStorage.setItem(key, value);
+    else localStorage.removeItem(key);
+    setState(value);
+  }, [key]);
+
+  return [state, update];
+};