Setting up client

.babelrc

@@ -0,0 +1,3 @@
+{
+  'presets': ['@babel/preset-env', '@babel/preset-react']
+}

.editorConfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+# editorconfig-tools is unable to ignore longs strings or urls
+max_line_length = null

.eslintignore

@@ -0,0 +1,2 @@
+/src/apollo.js
+/src/shared/util/createFileLink.js

.eslintrc.js

@@ -0,0 +1,44 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  plugins: ['react'],
+  parser: 'babel-eslint',
+  ecmaFeatures: { jsx: true },
+  extends: ['airbnb', 'prettier'],
+  rules: {
+    'no-underscore-dangle': 0,
+    'max-len': [1, 180, 2, { ignoreComments: true }],
+    'no-console': 0,
+    'no-unused-vars': [1, { vars: 'local', args: 'none' }],
+    'arrow-body-style': [2, 'as-needed'],
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/jsx-uses-react': 'error',
+    'react/jsx-uses-vars': 'error',
+    'react/forbid-prop-types': 0,
+    'react/jsx-no-bind': [
+      'error',
+      {
+        allowArrowFunctions: true,
+        allowBind: false,
+        ignoreRefs: true,
+      },
+    ],
+    'react/no-did-update-set-state': 'error',
+    'react/no-unknown-property': 'error',
+    'react/no-unused-prop-types': 'error',
+    'react/prop-types': 'error',
+    'react/react-in-jsx-scope': 'error',
+    'react/jsx-one-expression-per-line': 'off',
+    'react/jsx-boolean-value': 'off',
+  },
+  globals: {
+    React: true,
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+};

.gitignore

@@ -0,0 +1,8 @@
+/node_modules/
+/public
+
+.env
+
+package-lock.json
+
+.DS_Store

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 110,
+}

README.md

@@ -0,0 +1 @@
+## Slack Clone Client

package.json

@@ -0,0 +1,72 @@
+{
+  "name": "basic_authentication_server_client",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --config ./webpack.config.dev.js"
+  },
+  "author": "Craig Stroman",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-transform-async-to-generator": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/polyfill": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "dotenv": "^8.2.0",
+    "eslint": "^7.5.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-watch": "^7.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "install": "^0.13.0",
+    "npm": "^6.14.6",
+    "prettier": "^2.0.5",
+    "sass-loader": "^9.0.2",
+    "sass-resources-loader": "^2.0.3",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/styles": "^4.10.0",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-context": "^1.0.20",
+    "apollo-link-http": "^1.5.17",
+    "apollo-link-ws": "^1.0.20",
+    "apollo-utilities": "^1.3.4",
+    "graphql": "^15.3.0",
+    "graphql-tag": "^2.10.4",
+    "jwt-decode": "^2.2.0",
+    "lodash": "^4.17.19",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-apollo": "^3.1.5",
+    "react-dom": "^16.13.1",
+    "react-moment": "^0.9.7",
+    "react-router-dom": "^5.2.0",
+    "styled-components": "^5.1.1"
+  }
+}

src/App.jsx

@@ -0,0 +1,15 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { ApolloProvider } from 'react-apollo';
+import client from './apollo';
+import Home from './pages/Home/Home';
+
+const App = (
+  <>
+    <ApolloProvider client={client}>
+      <Home />
+    </ApolloProvider>
+  </>
+);
+
+ReactDOM.render(App, document.getElementById('app'));

src/apollo.js

@@ -0,0 +1,86 @@
+import { ApolloClient } from 'apollo-client';
+import { createHttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { setContext } from 'apollo-link-context';
+import { ApolloLink, split } from 'apollo-link';
+// import { WebSocketLink } from 'apollo-link-ws';
+import { getMainDefinition } from 'apollo-utilities';
+import createFileLink from './shared/util/createFileLink';
+
+const httpLink = createFileLink({ uri: 'http://localhost:8081/graphql' });
+
+const middlewareLink = setContext(() => ({
+  headers: {
+    'x-token': localStorage.getItem('token'),
+    'x-refresh-token': localStorage.getItem('refreshToken'),
+  },
+}));
+
+// eslint-disable-next-line arrow-body-style
+const afterwareLink = new ApolloLink((operation, forward) => {
+  return forward(operation).map((response) => {
+    const {
+      response: { headers },
+    } = operation.getContext();
+    if (headers) {
+      const token = headers.get('x-token');
+      const refreshToken = headers.get('x-refresh-token');
+
+      if (token) {
+        localStorage.setItem('token', token);
+      }
+
+      if (refreshToken) {
+        localStorage.setItem('refreshToken', refreshToken);
+      }
+    }
+
+    return response;
+  });
+});
+
+const httpLinkWithMiddleware = afterwareLink.concat(middlewareLink.concat(httpLink));
+
+// const wsLink = new WebSocketLink({
+//   uri: 'ws://localhost:8081/subscriptions',
+//   options: {
+//     reconnect: true,
+//     connectionParams: () => ({
+//       token: localStorage.getItem('token'),
+//       refreshToken: localStorage.getItem('refreshToken'),
+//     }),
+//   },
+// });
+
+// /**
+//  * Updates subscription with new login tokens.
+//  *
+//  * @param      {Object}  tokens  The tokens.
+//  */
+// export const updateSubScription = (tokens) => {
+//   if (wsLink.subscriptionClient.connectionParams.token === tokens.token) {
+//     return null;
+//   }
+
+//   wsLink.subscriptionClient.connectionParams.token = tokens.token;
+//   wsLink.subscriptionClient.connectionParams.refreshToken = tokens.refreshToken;
+
+//   wsLink.subscriptionClient.close();
+//   wsLink.subscriptionClient.connect();
+
+//   return wsLink;
+// };
+
+const link = split(
+  ({ query }) => {
+    const { kind, operation } = getMainDefinition(query);
+    return kind === 'OperationDefinition' && operation === 'subscription';
+  },
+  // wsLink,
+  httpLinkWithMiddleware,
+);
+
+export default new ApolloClient({
+  link,
+  cache: new InMemoryCache(),
+});

src/pages/Home/Home.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Home = <div>Home</div>;
+
+export default Home;