Refactoring code

Author: adostal

client/components/AppFrame.tsx

@@ -7,8 +7,8 @@ const decorate = withStyles((theme) => ({
     '@global': {
         html: {
             background: theme.palette.background.default,
-            WebkitFontSmoothing: 'antialiased', // Antialiasing.
-            MozOsxFontSmoothing: 'grayscale', // Antialiasing.
+            WebkitFontSmoothing: 'antialiased', // Antialiasing
+            MozOsxFontSmoothing: 'grayscale', // Antialiasing
         },
         body: {
             margin: 0,

client/contexts/ThemeContext.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {PaletteType} from '@material-ui/core';
 
 const getPaletteType = (): PaletteType => {
-    const defaultTheme: PaletteType = 'dark';
+    const defaultTheme: PaletteType = 'light';
     try {
         const find = localStorage.getItem('paletteType');
         if (find === null) {

client/with/initApollo.ts

@@ -13,7 +13,7 @@ if (!process.browser) {
     global.fetch = fetch;
 }
 
-const create = (initialState: any, {getToken}: any, req?: any) => {
+const create = (initialState: any, {getToken}: {getToken: () => string}, req?: any) => {
     const baseUrl = req ? `${req.protocol}://${req.get('Host')}` : '';
     const httpLink = createHttpLink({
         uri: `${baseUrl}/graphql`,
@@ -39,7 +39,7 @@ const create = (initialState: any, {getToken}: any, req?: any) => {
     });
 };
 
-export const initApollo = (initialState: any, options: any, req?: any) => {
+export const initApollo = (initialState: any, options: {getToken: () => string}, req?: any) => {
     // Make sure to create a new client for every server-side request so that data
     // isn't shared between connections (which would be bad)
     if (!process.browser) {

client/with/withApollo.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import {NextDocumentContext} from 'next/document';
 import Head from 'next/head';
+import {AppComponentContext} from 'next/app';
+import {ApolloClient} from 'apollo-boost';
 import {getDataFromTree} from 'react-apollo';
 import * as cookie from 'cookie';
 import {initApollo} from './initApollo';
@@ -9,13 +10,13 @@ declare const process: any;
 
 const parseCookies = (req?: any, options = {}) => cookie.parse(req ? req.headers.cookie || '' : document.cookie, options);
 
-type AppType = React.ComponentClass<any> & {getInitialProps?: (ctx: NextDocumentContext) => any};
+type AppType = React.ComponentClass<any> & {getInitialProps?: (ctx: AppComponentContext) => any};
 
 export const withApollo = (App: AppType): React.ComponentClass<any> => {
     return class PageWithApollo extends React.Component<any> {
-        private apolloClient: any;
+        private readonly apolloClient: any;
 
-        static async getInitialProps(ctx: any) {
+        static async getInitialProps(ctx: AppComponentContext & {ctx: {apolloClient: ApolloClient<any>}}) {
             const {
                 Component,
                 router,
@@ -26,17 +27,14 @@ export const withApollo = (App: AppType): React.ComponentClass<any> => {
 
             ctx.ctx.apolloClient = apollo;
 
-            let appProps = {};
-            if (App.getInitialProps) {
-                appProps = await App.getInitialProps(ctx);
-            }
-
             if (res && res.finished) {
                 // When redirecting, the response is finished.
                 // No point in continuing to render
                 return {};
             }
 
+            const appProps = App.getInitialProps ? await App.getInitialProps(ctx) : {};
+
             // Run all graphql queries in the component tree
             // and extract the resulting data
             try {
@@ -55,12 +53,10 @@ export const withApollo = (App: AppType): React.ComponentClass<any> => {
                 Head.rewind();
             }
 
-            // Extract query data from the Apollo's store
-            const apolloState = apollo.cache.extract();
-
             return {
                 ...appProps,
-                apolloState,
+                // Extract query data from the Apollo's store
+                apolloState: apollo.cache.extract(),
             };
         }
 

client/with/withAuthAdmin.tsx

@@ -1,9 +1,16 @@
 import * as React from 'react';
+import {ApolloClient, ApolloQueryResult} from 'apollo-boost';
 import gql from 'graphql-tag';
 import Router from 'next/router';
 import cookie from 'cookie';
+import {Account, Query} from '@graphql-model';
+import {NextDocumentContext} from 'next/document';
 
-const checkLoggedIn = (apolloClient: any): Promise<{loggedInUser: any}> => {
+interface LoggedInUserResponse {
+    readonly loggedInUser: Pick<Account, 'id' | 'firstName' | 'lastName'>;
+}
+
+const checkLoggedIn = (apolloClient: ApolloClient<any>): Promise<Partial<LoggedInUserResponse>> => {
     return apolloClient
         .query({
             query: gql`
@@ -16,54 +23,54 @@ const checkLoggedIn = (apolloClient: any): Promise<{loggedInUser: any}> => {
                 }
             `,
         })
-        .then(({data}: any) => {
-            return {loggedInUser: data};
+        .then(({data}: ApolloQueryResult<Query>) => {
+            if (!data || !data.me) {
+                throw new Error('User is not logged');
+            }
+            return {loggedInUser: data.me};
         })
         .catch(() => {
             // Fail gracefully
-            return {loggedInUser: {}};
+            return {loggedInUser: undefined};
         });
 };
 
-const redirect = (context: any, target: string) => {
-    if (context.res) {
-        // server
-        // 303: "See other"
+const redirect = async (target: string, context?: NextDocumentContext): Promise<boolean> => {
+    if (context && context.res) {
         context.res.writeHead(303, {Location: target});
         context.res.end();
+        return true;
     } else {
-        // In the browser, we just pretend like this never even happened ;)
-        Router.replace(target);
+        return await Router.replace(target);
     }
 };
 
-export const withAuthAdmin = (BaseComponent: any) => {
-    return class extends React.Component {
-        signout = (apolloClient: any) => () => {
+export interface WithAuthAdminProps extends LoggedInUserResponse {
+    readonly logout: (client: ApolloClient<any>) => () => Promise<void>;
+}
+
+export const withAuthAdmin = (BaseComponent: React.ComponentType<WithAuthAdminProps>) => {
+    return class extends React.Component<LoggedInUserResponse> {
+        handleOnLogout = (apolloClient: ApolloClient<any>) => async () => {
             document.cookie = cookie.serialize('token', '', {
                 maxAge: -1, // Expire the cookie immediately
             });
-
-            // Force a reload of all the current queries now that the user is
-            // logged in, so we don't accidentally leave any state around.
-            apolloClient.cache.reset().then(() => {
-                // Redirect to a more useful page when signed out
-                redirect({}, '/login');
-            });
+            await apolloClient.cache.reset();
+            await redirect('/login');
         };
 
-        static async getInitialProps(context: any, _: any) {
+        static async getInitialProps(context: NextDocumentContext & {apolloClient: ApolloClient<any>}) {
             const {loggedInUser} = await checkLoggedIn(context.apolloClient);
-            if (!loggedInUser.me) {
+            if (!loggedInUser) {
                 // If not signed in, send them somewhere more useful
-                redirect(context, '/login');
+                await redirect('/login', context);
             }
 
             return {loggedInUser};
         }
 
         render() {
-            return <BaseComponent {...this.props} logout={this.signout} />;
+            return <BaseComponent {...this.props} logout={this.handleOnLogout} />;
         }
     };
 };

package-lock.json

@@ -48,29 +48,29 @@
   "dependencies": {
     "@material-ui/core": "1.4.0",
     "@material-ui/icons": "1.1.0",
-    "apollo-boost": "^0.1.10",
-    "apollo-link-context": "^1.0.8",
-    "apollo-server-express": "^2.0.0",
-    "autoprefixer": "^9.0.1",
-    "cookie": "^0.3.1",
+    "apollo-boost": "0.1.10",
+    "apollo-link-context": "1.0.8",
+    "apollo-server-express": "2.0.0",
+    "autoprefixer": "9.0.1",
+    "cookie": "0.3.1",
     "dotenv": "6.0.0",
     "express": "4.16.3",
     "graphql": "0.13.2",
     "graphql-import": "0.6.0",
     "graphql-tag": "2.9.2",
     "graphql-tools": "3.0.5",
     "intl": "1.2.5",
-    "isomorphic-unfetch": "^2.1.0",
+    "isomorphic-unfetch": "2.1.0",
     "next": "6.1.1",
-    "nprogress": "^0.2.0",
+    "nprogress": "0.2.0",
     "react": "16.4.1",
-    "react-apollo": "^2.1.9",
+    "react-apollo": "2.1.9",
     "react-dom": "16.4.1",
     "react-intl": "2.4.0"
   },
   "devDependencies": {
-    "@types/autoprefixer": "^6.7.3",
-    "@types/cookie": "^0.3.1",
+    "@types/autoprefixer": "6.7.3",
+    "@types/cookie": "0.3.1",
     "@types/express": "4.16.0",
     "@types/glob": "5.0.35",
     "@types/intl": "1.2.0",
@@ -85,7 +85,7 @@
     "babel-plugin-react-intl": "2.4.0",
     "coveralls": "3.0.2",
     "fork-ts-checker-webpack-plugin": "0.4.3",
-    "glob": "^7.1.2",
+    "glob": "7.1.2",
     "graphql-code-generator": "0.10.3",
     "graphql-codegen-typescript-template": "0.10.3",
     "husky": "0.14.3",

package.json

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import {ApolloConsumer} from 'react-apollo';
-import {withAuthAdmin} from '../../client/with';
+import {withAuthAdmin, WithAuthAdminProps} from '../../client/with';
 
-class Page extends React.Component<any> {
+class Page extends React.Component<WithAuthAdminProps> {
     render() {
-        const {logout} = this.props;
+        const {logout, loggedInUser} = this.props;
         return (
             <ApolloConsumer>
                 {(client) => (
                     <div>
-                        Hello {this.props.loggedInUser.me.firstName}!<br />
+                        Hello {loggedInUser.firstName}!<br />
                         <button onClick={logout(client)}>Sign out</button>
                     </div>
                 )}