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 (