feat: basic code with Work Periods

implemented via challenge 256744b5-db4f-471d-807b-51c681486ca8
winner madopcode

Author: MadOPcode

.eslintignore

@@ -0,0 +1 @@
+src/decls

.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["react-important-stuff", "plugin:prettier/recommended"],
+  "parser": "babel-eslint"
+}

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# macOS cache files
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+10.22.1

.prettierignore

@@ -0,0 +1,7 @@
+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
+coverage

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": false
+}

README.md

@@ -1,2 +1,158 @@
-# taas-admin-app
-taas-admin-app for managing taas administrative activities
+# Topcoder TaaS Admin Micro-app
+
+This is a [single-spa](https://single-spa.js.org/) example React microapp.
+
+> NOTE. This application have been configured to be run as child app of a single-spa application. So while this app can be deployed and run independently, we would need some frame [single-spa](https://single-spa.js.org/) which would load it. While technically we can achieve running this app as standalone app it's strongly not recommended by the author of the `single-spa` approach, see this [GitHub Issue](https://github.com/single-spa/single-spa/issues/640) for details.
+
+## Requirements
+
+- node - v10.22.1
+- npm - v6.14.6
+
+## Technology Stack
+
+- React 16.12
+- Router via [Reach Router](https://reach.tech/router/)
+- CSS Modules with SCSS
+- [React Inline SVG](https://github.com/airbnb/babel-plugin-inline-react-svg)
+- We use **Redux Store** for storing page data if we need to edit it. Otherwise we can use local state.
+- [react-redux-toastr](https://www.npmjs.com/package/react-redux-toastr) for success/error popups in the bottom left corner.
+
+## Config
+
+For available variables config which depend on the running environment (`APPENV=dev` or `APPENV=prod`), please refer to `config/development.js` and `config/production.js`.
+
+For application constants which don't depend on the running environment use `src/constants/index.js`.
+
+## NPM Commands
+
+| Command               | Description                                                       |
+| --------------------- | ----------------------------------------------------------------- |
+| `npm start`           | Run server which serves production ready build from `dist` folder |
+| `npm run dev`         | Run app in the development mode                                   |
+| `npm run dev-https`   | Run app in the development mode using HTTPS protocol              |
+| `npm run build`       | Build app for production and puts files to the `dist` folder      |
+| `npm run analyze`     | Analyze dependencies sizes and opens report in the browser        |
+| `npm run lint`        | Check code for lint errors                                        |
+| `npm run format`      | Format code using prettier                                        |
+| `npm run test`        | Run unit tests                                                    |
+| `npm run watch-tests` | Watch for file changes and run unit tests on changes              |
+| `npm run coverage`    | Generate test code coverage report                                |
+
+## Deployment to Production
+
+- `npm i` - install dependencies
+- `npm build` - build code to `dist/` folder
+- Now you can host `dist/` folder using any static server. For example, you may run a simple `Express` server by running `npm start`.
+
+### Deploying to Heroku
+
+Make sure you have [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli) installed and you have a Heroku account. And then inside the project folder run the next commands:
+
+- If there is not Git repository initiated yet, create a repo and commit all the files:
+  - `git init`
+  - `git add .`
+  - `git commit -m 'initial commit'`
+- `heroku apps:create` - create Heroku app
+- `git push heroku master` - push changes to Heroku and trigger deploying
+- Now you have to configure frame app to use the URL provided by Heroku like `https://<APP-NAME>.herokuapp.com/topcoder-micro-frontends-teams.js` to load this micro-app.
+
+## How to run Locally for Development
+
+TaaS App is done using Single SPA micro-frontend architecture https://single-spa.js.org/. So to start it, we would also have to run Frame App and Navbar App. Here I would show the steps to run locally everything we need.
+
+### Local Authentication
+
+First of all, to authenticate locally we have to run a local authentication service.
+
+- Clone this repository into `taas-admin-app`.
+- Inside the folder `taas-admin-app/local/auth-local` run `npm start`.
+- You would need npm 5+ for it. This would start a local sever on port 5000 which could be used for local Authentication.
+
+### Local Domain
+
+Some config files are using domain `local.topcoder-dev.com`. You can change it to `localhost` in all the configs of each repo mentioned below. Or on your local machine, update file `/etc/hosts` add the line `127.0.0.1 local.topcoder-dev.com`. This file has another path on Windows.
+
+### Run Applications
+
+1. Run **Frame** App:
+
+   ```sh
+   git clone https://github.com/topcoder-platform/micro-frontends-frame.git
+   cd micro-frontends-frame
+   # inside folder "micro-frontends-frame" run:
+
+   nvm use # or make sure to use Node 10
+   npm i   # to install dependencies
+
+   # set environment variables:
+
+   export APPMODE="development"
+   export APPENV="local-multi"
+
+   npm run local-server
+
+   # this would start frame server on http://localhost:3000
+   ```
+
+   open one more terminal window in the same folder and run:
+
+   ```sh
+   # set environment variables:
+
+   export APPMODE="development"
+   export APPENV="local-multi"
+
+   npm run local-client
+
+   # this host frame client code on http://localhost:8080
+   ```
+
+2. Run **Navbar** micro-app:
+
+   ```sh
+   git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
+   cd micro-frontends-navbar-app
+   ```
+
+   Update in file `micro-frontends-navbar-app/blob/dev/config/dev.js` values for `ACCOUNTS_APP_CONNECTOR` and `AUTH` to `http://localhost:5000` so Navbar app which handles authentication uses our local Authentication service.
+
+   ```sh
+   # inside folder "micro-frontends-navbar-app" run:
+
+   nvm use # or make sure to use Node 10
+   npm i   # to install dependencies
+
+   npm run dev
+
+   # this host navbar app as http://localhost:3001/navbar/topcoder-micro-frontends-navbar-app.js
+   ```
+
+3. Run **TaaS** micro-app:
+
+   ```sh
+   # inside folder "taas-app" run:
+
+   nvm use # or make sure to use Node 10
+   npm i   # to install dependencies
+
+   npm run dev
+
+   # this host TaaS App as http://localhost:8501/taas-app/topcoder-micro-frontends-teams.js
+   ```
+
+4. Now we have to update the `micro-frontends-frame` app to show our local version of TaaS App, instead of remote one. Update file `micro-frontends-frame/config/micro-frontends-config-local.json`:
+
+   ```js
+   // replace line
+   "@topcoder/micro-frontends-teams": "https://platform.topcoder-dev.com/taas-app/topcoder-micro-frontends-teams.js",
+
+   // with line:
+   "@topcoder/micro-frontends-teams": "http://localhost:8501/taas-app/topcoder-micro-frontends-teams.js",
+   ```
+
+- Now open in the browser http://localhost:8080/taas/myteams.
+- If you are not logged-in yet, you should be redirected to the login page.
+- If you cannot see the application and redirect doesn't happen, make sure that file "http://local.topcoder-dev.com:8501/taas-app/topcoder-micro-frontends-teams.js" is loaded successfully in the Network tab.
+
+Congratulations, you successfully run the project. If you had some issue, please, try to go through README of https://github.com/topcoder-platform/micro-frontends-frame and https://github.com/topcoder-platform/micro-frontends-navbar-app.

auth-local/README

@@ -0,0 +1,11 @@
+1. Run any static files server inside this directory, for example:
+   - `npx http-server . -p 5000`
+   - `php -S localhost:5000`
+2. Run your application on http://localhost:3000.
+3. Now you can open http://localhost:5000 in browser and click login (wait it a little bit, it may take time to redirect you). After you login, you should be redirected back to http://localhost:3000
+
+PS. You may also download latest version of `setupAuth0WithRedirect.js` file from here - https://github.com/topcoder-platform/tc-auth-lib/blob/dev/web-assets/js/setupAuth0WithRedirect.js
+
+
+
+

auth-local/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Auth0</title>
+    <meta charset="utf-8" />
+    <script language="javascript" type="text/javascript" src="./setupAuth0WithRedirect.js"></script>
+</head>
+
+<body>
+    Loaded...redirecting to auth0.(see browser console log)
+    <script>
+        window.onload = authSetup;
+    </script>
+    <a href="?retUrl=http://localhost:3000" >Login</a>
+</body>
+
+</html>

auth-local/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "login-locally",
+  "version": "1.0.0",
+  "description": "Run any static files server inside this directory.",
+  "scripts": {
+    "start": "npx http-server . -p 5000"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}