feat: lots of features

package.json

@@ -8,7 +8,7 @@
     "lint": "eslint ./src",
     "lint:fix": "eslint ./src --fix",
     "build": "webpack",
-    "start": "webpack-dev-server",
+    "start": "webpack-dev-server --port 3000 --hot --host 0.0.0.0",
     "release": "standard-version",
     "release:major": "npm run release -- --release-as major",
     "release:minor": "npm run release -- --release-as minor",

src/hooks/useAuthHandlers.js

@@ -49,6 +49,12 @@ const LOGIN = gql`
   }
 `;
 
+const LOGOUT = gql`
+  mutation logout {
+    logout
+  }
+`;
+
 const useAuthHandlers = () => {
   const client = useApolloClient();
 
@@ -65,6 +71,12 @@ const useAuthHandlers = () => {
     },
   });
 
+  const logout = useCallback(() => {
+    client.mutate({ mutation: LOGOUT });
+    UserModel.setToken('');
+    client.cache.writeQuery({ query: ME_QUERY, data: { me: null } });
+  }, [client]);
+
   const createAccount = useCallback(async (username, password, profile) => {
     const { data: { createAccount: data } } = await createAccountMutate({
       variables: { username, password, profile },
@@ -82,7 +94,7 @@ const useAuthHandlers = () => {
     return data;
   }, [loginMutate]);
 
-  return { createAccount, login };
+  return { createAccount, login, logout };
 };
 
 export default useAuthHandlers;

src/hooks/useFeedPage.js

@@ -1,6 +1,8 @@
+/* eslint-disable new-cap */
 import { useCallback } from 'react';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 import { toast } from 'react-toastify';
+import uuid from 'uuid';
 import { gql } from 'apollo-boost';
 import useMe from './useMe';
 // import PostsModel from '../modules/posts';
@@ -43,14 +45,35 @@ const ADD_POST_MUTATION = gql`
 
 const useFeedPage = () => {
   const [user] = useMe();
-  const { loading, data } = useQuery(POSTS_QUERY);
-  const [addPost] = useMutation(ADD_POST_MUTATION);
+  const { loading, data } = useQuery(POSTS_QUERY, {
+    pollInterval: 5000,
+  });
+  const [addPost] = useMutation(ADD_POST_MUTATION, {
+    refetchQueries: [{ query: POSTS_QUERY }],
+    update: (cache, { data: { addPost: post } }) => {
+      const { posts: prevPosts } = cache.readQuery({ query: POSTS_QUERY });
+      const posts = [post, ...prevPosts];
+      cache.writeQuery({
+        query: POSTS_QUERY,
+        data: { posts },
+      });
+    },
+  });
   const posts = data && data.posts ? data.posts : [];
 
   const handleAddPost = useCallback(async (body) => {
     try {
       await addPost({
         variables: { body, createdBy: user && user._id },
+        optimisticResponse: {
+          addPost: {
+            _id: uuid(),
+            body,
+            createdAt: String(new Date().getTime()),
+            creator: user,
+            __typename: 'Post',
+          },
+        },
       });
       toast.success('Published a new post');
     } catch (error) {

src/layouts/MainLayout.js

@@ -10,19 +10,16 @@ import {
   NavLink,
 } from 'reactstrap';
 import { Link } from 'react-router-dom';
-import UsersModel from '../modules/users';
 import routes from '../router/routes';
+import useAuthHandlers from '../hooks/useAuthHandlers';
 import ThemeContext from '../contexts/Theme';
 
-const MainLayout = ({ children, history }) => {
+const MainLayout = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen]);
 
-  const handleLogout = useCallback(() => {
-    UsersModel.logout();
-    history.replace(routes.login);
-  }, [history]);
+  const { logout } = useAuthHandlers();
 
   const [theme, setTheme] = React.useState('light');
 
@@ -52,7 +49,7 @@ const MainLayout = ({ children, history }) => {
               </NavLink>
             </NavItem>
             <NavItem>
-              <NavLink href="#" onClick={handleLogout}>
+              <NavLink href="#" onClick={logout}>
                 Log out
               </NavLink>
             </NavItem>

src/modules/users.js

@@ -41,10 +41,7 @@ export class Users {
     this.currentUser = this.me(this.token);
   }
 
-  logout = (skipServer) => {
-    if (!skipServer) {
-      UsersServer.logout(this.token);
-    }
+  logout = () => {
     this.setToken({ token: '' });
     this.currentUser = null;
   }

src/router/AppRouter.js

@@ -12,8 +12,8 @@ import NotFoundPage from '../pages/NotFoundPage';
 import MainLayout from '../layouts/MainLayout';
 import routes from './routes';
 
-const AppRouter = (p) => (
-  <MainLayout {...p}>
+const AppRouter = () => (
+  <MainLayout>
     <Switch>
       <Route path={routes.feed} render={(props) => <FeedPage {...props} />} />
       <Route

src/router/index.js

@@ -9,7 +9,7 @@ import AppRouter from './AppRouter';
 
 const RootRouter = () => {
   const [isLoggedIn, loading] = useMe();
-  console.log(isLoggedIn);
+
   if (loading) {
     return (
       <Spinner />