(chore) - make some code quality optimisations like moving to getToken setToken helpers

Author: JoviDeCroock

src/components/CreateLink.js

@@ -42,7 +42,9 @@ const CreateLink = ({ history }) => {
           placeholder="The URL for the link"
         />
       </div>
-      <button type="button" disabled={fetching} onClick={postMutation}>Submit</button>
+      <button type="button" disabled={fetching} onClick={postMutation}>
+        Submit
+      </button>
     </div>
   );
 }

src/components/Header.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { withRouter } from 'react-router';
-import { AUTH_TOKEN } from '../constants';
+import { getToken, removeToken } from "../utils";
 
 const Header = ({ history }) => {
-  const authToken = localStorage.getItem(AUTH_TOKEN);
+  const authToken = getToken();
   return (
     <div className="flex pa1 justify-between nowrap orange">
       <div className="flex flex-fixed black">
@@ -34,8 +34,8 @@ const Header = ({ history }) => {
           <div
             className="ml1 pointer black"
             onClick={() => {
-              localStorage.removeItem(AUTH_TOKEN)
-              history.push(`/`)
+              removeToken();
+              history.push(`/`);
             }}
           >
             logout

src/components/Link.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { useMutation } from 'urql';
 import gql from 'graphql-tag';
-import { timeDifferenceForDate } from "../utils";
-import { AUTH_TOKEN } from "../constants";
+import { timeDifferenceForDate, getToken } from "../utils";
 
 const VOTE_MUTATION = gql`
   mutation VoteMutation($linkId: ID!) {
@@ -24,13 +23,13 @@ const VOTE_MUTATION = gql`
 `;
 
 const Link = ({ link, index }) => {
-  const authToken = localStorage.getItem(AUTH_TOKEN);
+  const authToken = getToken();
   const [{ fetching }, executeMutation] = useMutation(VOTE_MUTATION);
 
   const voteMutation = React.useCallback(() => {
     executeMutation({ linkId: link.id });
   }, [link, executeMutation]);
-  console.log(link);
+
   return (
     <div className="flex mt2 items-start">
       <div className="flex items-center">

src/components/LinkList.js

@@ -78,7 +78,8 @@ const NEW_VOTES_SUBSCRIPTION = gql`
 
 const LinkList = ({ location, match, history }) => {
   const isNewPage = location.pathname.includes("new");
-  const getQueryVariables = React.useCallback(() => {
+
+  const variables = React.useMemo(() => {
     const page = parseInt(match.params.page, 10);
 
     const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0;
@@ -89,7 +90,7 @@ const LinkList = ({ location, match, history }) => {
 
   const [{ data, error, fetching }] = useQuery({
     query: FEED_QUERY,
-    variables: getQueryVariables(),
+    variables,
   });
 
   useSubscription({ query: NEW_VOTES_SUBSCRIPTION });

src/components/Login.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useMutation } from 'urql';
 import gql from 'graphql-tag';
-import { AUTH_TOKEN } from "../constants";
+import { setToken } from '../utils';
 
 const SIGNUP_MUTATION = gql`
   mutation SignupMutation($email: String!, $password: String!, $name: String!) {
@@ -30,7 +30,7 @@ const Login = ({ history }) => {
   const mutate = React.useCallback(() => {
     executeMutation({ email, password, name }).then(({ data }) => {
       const { token } = login ? data.login : data.signup;
-      localStorage.setItem(AUTH_TOKEN, token);
+      setToken(token);
       history.push(`/`);
     });
   }, [email, password, name, executeMutation, history, login]);

src/index.js

@@ -13,9 +13,10 @@ import { cacheExchange } from '@urql/exchange-graphcache';
 import { BrowserRouter } from 'react-router-dom';
 import "./styles/index.css";
 import App from "./components/App";
-import { AUTH_TOKEN, LINKS_PER_PAGE } from './constants';
+import { LINKS_PER_PAGE } from './constants';
 import { FEED_QUERY } from './components/LinkList';
 import * as serviceWorker from "./serviceWorker";
+import { getToken } from './utils';
 
 const cache = cacheExchange({
   keys: {
@@ -27,6 +28,9 @@ const cache = cacheExchange({
   // Optimistic is not possible due to the nature of the data-structure
   // every vote needs to have an unique id for a unique userId...
 
+  // We could write a resolver to format createdAt to the new value as well.
+  // This would be dependent on a new version of the graphcache.
+
   // Mutations that need updates due to adding/removing/... to a list
   // Will most likely come here. We can't make assumptions for adding to
   // a list.
@@ -67,14 +71,15 @@ const subscriptionClient = new SubscriptionClient(
 
 const client = createClient({
   fetchOptions: () => {
-    const token = localStorage.getItem(AUTH_TOKEN);
+    const token = getToken();
     return {
       headers: {
         authorization: token ? `Bearer ${token}` : ""
       }
     }
   },
   url: "http://localhost:4000",
+  // TODO: suspense is waiting for new urql version
   // suspense: true,
   exchanges: [
     dedupExchange,

src/utils.js

@@ -1,3 +1,5 @@
+import { AUTH_TOKEN } from "./constants";
+
 function timeDifference(current, previous) {
   const milliSecondsPerMinute = 60 * 1000;
   const milliSecondsPerHour = milliSecondsPerMinute * 60;
@@ -31,3 +33,7 @@ export function timeDifferenceForDate(date) {
   const updated = new Date(date).getTime();
   return timeDifference(now, updated);
 }
+
+export const getToken = () => window.localStorage.getItem(AUTH_TOKEN);
+export const setToken = (token) => window.localStorage.setItem(AUTH_TOKEN, token);
+export const removeToen = () => window.localStorage.removeItem(AUTH_TOKEN);