WIP

README.md

@@ -0,0 +1,7 @@
+#flexor-web
+
+Flexor Web App.
+
+## License
+
+Copyright © 2019 Flexor.cc

config/local.json

@@ -0,0 +1,3 @@
+{
+    "apiUrl": "http://localhost:5000"
+}

package.json

@@ -0,0 +1,47 @@
+{
+    "name": "flexor-web",
+    "description": "Flexor API server.",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "start": "webpack-dev-server --config webpack.config.ts",
+        "build": "webpack --config webpack.config.ts",
+        "deploy:batch:dev": "az storage blob upload-batch -s ./dist/ -d $web --account-name flexordev",
+        "deploy:batch:prod": "az storage blob upload-batch -s ./dist/ -d $web --account-name flexor",
+        "deploy:config:dev": "az storage blob upload -f ./config/dev.json -c flexordev -n config.json",
+        "deploy:config:prod": "az storage blob upload -f ./config/prod.json -c flexor -n config.json",
+        "deploy:dev": "run-s deploy:batch:dev deploy:config:dev",
+        "deploy:prod": "run-s deploy:batch:prod deploy:config:prod"
+    },
+    "devDependencies": {
+        "@types/html-webpack-plugin": "^3.2.1",
+        "@types/mini-css-extract-plugin": "^0.8.0",
+        "@types/react": "^16.9.2",
+        "@types/react-dom": "^16.9.0",
+        "@types/react-redux": "^7.1.2",
+        "@types/react-router-dom": "^4.3.5",
+        "@types/webpack": "^4.39.1",
+        "@types/webpack-dev-server": "^3.1.7",
+        "bulma": "^0.7.5",
+        "css-loader": "^3.2.0",
+        "html-webpack-plugin": "^3.2.0",
+        "mini-css-extract-plugin": "^0.8.0",
+        "node-sass": "^4.12.0",
+        "npm-run-all": "^4.1.5",
+        "sass-loader": "^8.0.0",
+        "style-loader": "^1.0.0",
+        "ts-loader": "^6.0.4",
+        "ts-node": "^8.3.0",
+        "typescript": "^3.6.2",
+        "webpack": "^4.39.3",
+        "webpack-cli": "^3.3.7",
+        "webpack-dev-server": "^3.8.0"
+    },
+    "dependencies": {
+        "react": "^16.9.0",
+        "react-dom": "^16.9.0",
+        "react-redux": "^7.1.1",
+        "react-router-dom": "^5.0.1",
+        "redux": "^4.0.4"
+    }
+}

src/app.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+
+import store from './store'
+import App from './components/app'
+
+render(
+    <Provider store={store}>
+        <App />
+    </Provider>,
+    document.getElementById('app')
+)

src/components/app/app.scss

@@ -0,0 +1,24 @@
+@charset "utf-8";
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap');
+
+$primary-color: #6a5acd;
+$family-sans-serif: "Open Sans", sans-serif;
+$primary: $primary-color;
+
+@import "../../../node_modules/bulma/sass/utilities/_all.sass";
+@import "../../../node_modules/bulma/sass/base/_all.sass";
+@import "../../../node_modules/bulma/sass/grid/columns.sass";
+
+div#main-menu {
+    background-color: $primary-color;
+    bottom: 0;
+    left: 0;
+    padding: 20px;
+    position: absolute;
+    top: 0;
+}
+
+div#main-column {
+    padding: 20px;
+}

src/components/app/app.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from 'react'
+import { HashRouter as Router, Route, Link } from 'react-router-dom'
+
+import Home from '../pages/home'
+
+import './app.scss'
+
+interface Props {
+    menuCollapsed: boolean
+    fetching: boolean
+}
+
+const App: FC<Props> = ({ menuCollapsed, fetching }) => {
+    const mainMenuWidth = 300
+    const mainColumnLeftMargin = menuCollapsed ? 0 : mainMenuWidth
+
+    return (
+        <Router>
+            <div>
+                <div id="main-menu" style={{ width: mainMenuWidth }}>
+                    <h1 className="is-size-2">
+                        <Link className="has-text-white" to="/">flxr</Link>
+                    </h1>
+
+                    <hr className="has-background-grey-lighter" />
+
+                    <p>
+                        <Link className="has-text-white" to="/">Timeline</Link>
+                    </p>
+                </div>
+
+                <div id="main-column" style={{ marginLeft: mainColumnLeftMargin }}>
+                    <Route exact path="/" component={Home} />
+                    <Route path="/login" component={Home} />
+                    <Route path="/signup" component={Home} />
+                </div>
+            </div>
+        </Router>
+    )
+}
+
+export default App

src/components/app/index.ts

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+
+import { getMenuCollapsed, getFetching } from '../../selectors'
+import { IAppState } from '../../types'
+
+import App from './app'
+
+const mapStateToProps = (state: IAppState) => ({
+    menuCollapsed: getMenuCollapsed(state),
+    fetching: getFetching(state),
+})
+
+export default connect(
+    mapStateToProps
+)(App)

src/components/pages/home/index.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+
+const Home: FC = () => (
+    <div>
+        <h1>Home</h1>
+    </div>
+)
+
+export default Home

src/index.ejs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Flexor</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+    </head>
+
+    <body>
+        <div id="app"></div>
+    </body>
+</html>

src/reducers/index.ts

@@ -0,0 +1,18 @@
+import { Reducer, AnyAction } from 'redux'
+import { IAppState } from '../types'
+
+const initialState: IAppState = {
+    menuCollapsed: false,
+    fetching: false,
+    authenticated: false,
+    notifications: [],
+}
+
+const reducer: Reducer<IAppState, AnyAction> = (state = initialState, action) => {
+    switch (action.type) {
+        default:
+            return state
+    }
+}
+
+export default reducer

src/routes/index.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react'
+import { Dispatch } from 'redux'
+import Home from '../components/pages/home'
+
+export interface Route {
+    id: string
+    path: string
+    component: FC
+    fetchInitialData?: (dispatch: Dispatch, ...args: any[]) => void
+}
+
+const routes: Route[] = [
+    {
+        id: 'home',
+        path: '/',
+        component: Home,
+    }
+]
+
+export default routes

src/selectors/index.ts

@@ -0,0 +1,4 @@
+import { IAppState } from '../types'
+
+export const getMenuCollapsed = (state: IAppState) => state.menuCollapsed
+export const getFetching = (state: IAppState) => state.fetching

src/store/index.ts

@@ -0,0 +1,6 @@
+import { createStore } from 'redux'
+import appReducer from '../reducers'
+
+const store = createStore(appReducer)
+
+export default store

src/types/index.ts

@@ -0,0 +1,13 @@
+export type INotificationType = 'info' | 'success' | 'error'
+
+export interface INotification {
+    type: INotificationType
+    message: string
+}
+
+export interface IAppState {
+    menuCollapsed: boolean
+    fetching: boolean
+    authenticated: boolean
+    notifications: INotification[]
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "strict": true,
+        "module": "commonjs",
+        "esModuleInterop": true,
+        "target": "es6",
+        "jsx": "react"
+    }
+}

webpack.config.ts

@@ -0,0 +1,56 @@
+import { Configuration } from 'webpack'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+
+const config: Configuration = {
+    devtool: 'eval-source-map',
+    entry: {
+        app: `${__dirname}/src/app.tsx`
+    },
+    output: {
+        path: `${__dirname}/dist`,
+        publicPath: '/',
+        filename: '[name].js',
+    },
+    devServer: {
+        contentBase: `${__dirname}/dist`,
+        historyApiFallback: true,
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js'],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts(x?)$/,
+                exclude: /node_modules/,
+                use: 'ts-loader',
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sourceMap: true,
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'Flexor',
+            hash: true,
+            template: 'src/index.ejs',
+        }),
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+        }),
+    ],
+}
+
+export default config