feat(add slack button): add button and basic landing page (#152)

* feat(add slack button): add button and basic landing page

* style(slack button): make it bigger

package.json

@@ -37,6 +37,7 @@
     "pm2": "^4.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "uuid": "^8.3.0"
   },
   "engines": {
@@ -77,7 +78,9 @@
     "jest": "^26.4.2",
     "lint-staged": "^10.4.0",
     "nodemon": "^2.0.4",
+    "postcss": "^8.0.5",
     "postcss-loader": "^4.0.2",
+    "precss": "^4.0.0",
     "prettier": "^2.1.2",
     "semantic-release": "^17.1.1",
     "style-loader": "^1.2.1",

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('precss'), require('autoprefixer')],
+}

web/client/App.js

@@ -1,14 +1,31 @@
 import React from 'react'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 
+import Header from './components/Header'
+import Frame from './components/Frame'
+import Landing from './pages/Landing'
 import Dashboard from './pages/Dashboard'
 
 import './App.pcss'
 
 const App = () => {
   return (
-    <div>
-      <Dashboard />
-    </div>
+    <>
+      <div className="inner">
+        <Router>
+          <Header />
+          <Switch>
+            <Route exact path="/">
+              <Landing />
+            </Route>
+            <Route path="/dashboard">
+              <Dashboard />
+            </Route>
+          </Switch>
+        </Router>
+      </div>
+      <Frame />
+    </>
   )
 }
 

web/client/App.pcss

@@ -1,5 +1,26 @@
-ul, ol {
+@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Open+Sans&display=swap');
+
+* {
+  color: #000000;
+}
+
+html,
+body {
+  margin: 0;
+  font-family: 'Open Sans', sans-serif;
+}
+
+ul,
+ol {
   margin: 0;
   padding: 0;
   list-style: none;
-}
+}
+
+a {
+  text-decoration: none;
+}
+
+.inner {
+  padding: 32px;
+}

web/client/components/AddToSlack.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+import config from '../../config'
+
+const AddToSlack = () => {
+  const [url, setUrl] = useState('')
+
+  const getInstallUrlPath = async () => {
+    try {
+      const response = await fetch(
+        `${config.prod.app}${config.prod.installUrlPath}`,
+      )
+      const { installUrl } = await response.json()
+
+      setUrl(installUrl)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  useEffect(() => {
+    getInstallUrlPath()
+  }, [])
+
+  return url ? (
+    <a href={url}>
+      <img
+        alt="Add to Slack"
+        height="60"
+        src="https://platform.slack-edge.com/img/add_to_slack.png"
+        srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x,
+        https://platform.slack-edge.com/img/[email protected] 2x"
+      />
+    </a>
+  ) : null
+}
+
+export default AddToSlack

web/client/components/Frame.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import './Frame.pcss'
+
+const Frame = () => {
+  return (
+    <>
+      <div id="top"></div>
+      <div id="right"></div>
+      <div id="bottom"></div>
+      <div id="left"></div>
+    </>
+  )
+}
+
+export default Frame

web/client/components/Frame.pcss

@@ -0,0 +1,35 @@
+#top {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 16px;
+  background: #000000;
+}
+
+#right {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 16px;
+  height: 100vh;
+  background: #000000;
+}
+
+#bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 16px;
+  background: #000000;
+}
+
+#left {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 100vh;
+  background: #000000;
+}

web/client/components/Header.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import UserMenu from '../components/UserMenu'
+
+import './Header.pcss'
+
+const Header = () => {
+  return (
+    <header>
+      <a className="logo" href="/">
+        Post Your Standup
+      </a>
+      <UserMenu />
+    </header>
+  )
+}
+
+export default Header

web/client/components/Header.pcss

@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  & .logo {
+    font-family: 'Bangers', cursive;
+    font-size: 50px;
+  }
+}

web/client/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Post Your Standup Dashboard</title>
+    <title>Post Your Standup</title>
   </head>
   <body>
     <div id="root"></div>

web/client/pages/Dashboard.js

@@ -1,13 +1,11 @@
 import React from 'react'
 
 import Workspaces from '../components/Workspaces'
-import UserMenu from '../components/UserMenu'
 import withAuth from '../hocs/withAuth'
 
 const Dashboard = () => {
   return (
     <div>
-      <UserMenu />
       <h1>Dashboard</h1>
       <Workspaces />
     </div>

web/client/pages/Landing.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import AddToSlack from '../components/AddToSlack'
+
+const Landing = () => {
+  return (
+    <div>
+      <h1>Post your Standup</h1>
+      <AddToSlack />
+    </div>
+  )
+}
+
+export default Landing

web/config.js

@@ -2,4 +2,8 @@ module.exports = {
   server: {
     port: 4100,
   },
+  prod: {
+    app: 'https://post-your-standup.codinginsights.blog',
+    installUrlPath: '/install-url',
+  },
 }

webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const webpack = require('webpack')
-const autoprefixer = require('autoprefixer')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 require('dotenv').config()
@@ -12,7 +11,7 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js',
     chunkFilename: '[id].js',
-    publicPath: '',
+    publicPath: '/',
   },
   resolve: {
     extensions: ['.js', '.jsx'],
@@ -28,24 +27,17 @@ module.exports = {
         test: /\.pcss$/,
         exclude: /node_modules/,
         use: [
-          { loader: 'style-loader' },
+          {
+            loader: 'style-loader',
+          },
           {
             loader: 'css-loader',
             options: {
-              modules: {
-                localIdentName: '[name]__[local]___[hash:base64:5]',
-              },
-              sourceMap: true,
+              importLoaders: 1,
             },
           },
           {
             loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                ident: 'postcss',
-                plugins: () => [autoprefixer({})],
-              },
-            },
           },
         ],
       },
@@ -68,4 +60,7 @@ module.exports = {
     }),
   ],
   devtool: 'source-map',
+  devServer: {
+    historyApiFallback: true,
+  },
 }