fix session issues

Author: rwieruch

package.json

@@ -25,5 +25,11 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom --passWithNoTests",
     "eject": "react-scripts eject"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/components/Landing/index.js

@@ -9,7 +9,7 @@ const Landing = ({ session }) => (
     <h2>Landing Page</h2>
 
     {session && session.me && <MessageCreate />}
-    <Messages me={session.me} limit={2} />
+    <Messages limit={2} />
   </div>
 );
 

src/components/Message/Messages/index.js

@@ -4,6 +4,7 @@ import gql from 'graphql-tag';
 
 import MessageDelete from '../MessageDelete';
 import Loading from '../../Loading';
+import withSession from '../../Session/withSession';
 
 const MESSAGE_CREATED = gql`
   subscription {
@@ -42,7 +43,7 @@ const GET_PAGINATED_MESSAGES_WITH_USERS = gql`
   }
 `;
 
-const Messages = ({ limit, me }) => (
+const Messages = ({ limit }) => (
   <Query
     query={GET_PAGINATED_MESSAGES_WITH_USERS}
     variables={{ limit }}
@@ -69,7 +70,6 @@ const Messages = ({ limit, me }) => (
         <Fragment>
           <MessageList
             messages={edges}
-            me={me}
             subscribeToMore={subscribeToMore}
           />
 
@@ -154,25 +154,28 @@ class MessageList extends Component {
   }
 
   render() {
-    const { messages, me } = this.props;
+    const { messages } = this.props;
 
     return messages.map(message => (
-      <MessageItem key={message.id} message={message} me={me} />
+      <MessageItem key={message.id} message={message} />
     ));
   }
 }
 
-const MessageItem = ({ message, me }) => (
+const MessageItemBase = ({ message, session }) => (
   <div>
     <h3>{message.user.username}</h3>
     <small>{message.createdAt}</small>
     <p>{message.text}</p>
 
-    {me &&
-      message.user.id === me.id && (
+    {session &&
+      session.me &&
+      message.user.id === session.me.id && (
         <MessageDelete message={message} />
       )}
   </div>
 );
 
+const MessageItem = withSession(MessageItemBase);
+
 export default Messages;

src/components/SignOut/index.js

@@ -15,7 +15,7 @@ const SignOutButton = () => (
 );
 
 const signOut = client => {
-  localStorage.setItem('token', '');
+  localStorage.removeItem('token');
   client.resetStore();
   history.push(routes.SIGN_IN);
 };

src/index.js

@@ -35,12 +35,15 @@ const terminatingLink = split(
 );
 
 const authLink = new ApolloLink((operation, forward) => {
-  operation.setContext(({ headers = {} }) => ({
-    headers: {
-      ...headers,
-      'x-token': localStorage.getItem('token'),
-    },
-  }));
+  operation.setContext(({ headers = {} }) => {
+    const token = localStorage.getItem('token');
+
+    if (token) {
+      headers = { ...headers, 'x-token': token };
+    }
+
+    return { headers };
+  });
 
   return forward(operation);
 });
@@ -50,7 +53,7 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
     graphQLErrors.forEach(({ message, locations, path }) => {
       console.log('GraphQL error', message);
 
-      if (message === 'NOT_AUTHENTICATED') {
+      if (message === 'UNAUTHENTICATED') {
         signOut(client);
       }
     });