diff --git a/package.json b/package.json index 6760108..74cdc6b 100644 --- a/package.json +++ b/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", diff --git a/src/hooks/useAuthHandlers.js b/src/hooks/useAuthHandlers.js index 186e98e..f970e02 100644 --- a/src/hooks/useAuthHandlers.js +++ b/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; diff --git a/src/hooks/useFeedPage.js b/src/hooks/useFeedPage.js index 2294db2..69b7f3a 100644 --- a/src/hooks/useFeedPage.js +++ b/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) { diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js index 9587acf..3df43d8 100644 --- a/src/layouts/MainLayout.js +++ b/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 }) => { - + Log out diff --git a/src/modules/users.js b/src/modules/users.js index 7412c78..26cf3bd 100644 --- a/src/modules/users.js +++ b/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; } diff --git a/src/router/AppRouter.js b/src/router/AppRouter.js index e5cfae7..b7bc76f 100644 --- a/src/router/AppRouter.js +++ b/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) => ( - +const AppRouter = () => ( + } /> { const [isLoggedIn, loading] = useMe(); - console.log(isLoggedIn); + if (loading) { return (