Merge pull request #25 from andela/staging

Merge from staging

.babelrc

@@ -3,6 +3,10 @@
   "plugins": [
     "transform-class-properties",
     "transform-object-rest-spread",
-    "transform-decorators-legacy"
+    "transform-decorators-legacy",
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": true
+    }]
   ]
 }

.env-sample

@@ -0,0 +1,4 @@
+GOOGLE_CLIENT_ID=
+NODE_ENV=
+HOST=
+PORT=

.eslintrc.json

@@ -3,7 +3,8 @@
   "env": {
     "node": true,
     "es6": true,
-    "mocha": true
+    "mocha": true,
+    "jest": true
   },
   "globals": {
     "document": true,

.gitignore

@@ -24,3 +24,6 @@ coverage
 db.json
 client/src/middleware
 client/src/components/Home/components/Preloader.jsx
+.coveralls.yml
+coverage
+*.snap

.travis.yml

@@ -0,0 +1,8 @@
+after_success:
+  - npm run coveralls
+  - npm run codecov
+email: false
+language: node_js
+node_js:
+  - "8.9.2"
+script: npm test

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Ghoulies Team.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,77 @@
-# andela-teams-2
+# taps-client
+This is the client side for [Andela TAPS](https://ghoulies-taps-client.herokuapp.com/).
+
+[![Andela](https://andela-badge.herokuapp.com/)](https://andela.com)
+[![Build Status](https://travis-ci.org/andela/taps-client.svg?branch=staging)](https://travis-ci.org/andela/taps-client)
+[![Coverage Status](https://coveralls.io/repos/github/andela/taps-client/badge.svg?branch=code-coverage-integration-158580405)](https://coveralls.io/github/andela/taps-client?branch=code-coverage-integration-158580405)
+[![Hound CI](https://camo.githubusercontent.com/23ee7a697b291798079e258bbc25434c4fac4f8b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f50726f7465637465645f62792d486f756e642d6138373364312e737667)](https://houndci.com)
+
+
+Andela Taps seeks to automate some of the routine actions taken by __simulations learning facilitators__ at Andela.
+
+Here is a useful scenario. When a new cohort (class) begins simulations (*sims*) at Andela, the cohort is broken into teams, and each team is assigned to a learning facilitator. The learning facilitator then creates a few Slack channels, a Github repo, and a Pivotal Tracker board. For each of these, the facilitator has to add every member of the team to the channel/repo/board. This is obviously a task that should be automated, especially considering that even the names of the channels/repo/board are always in a particular format. Andela Taps seeks to automate these and many more routine tasks performed by facilitators.
+
+## Technologies Used
+### Frontend
+- [React](https://facebook.github.io/react/) A JavaScript library for building user interfaces.
+- [Redux](http://redux.js.org/) A predictable state container for JavaScript apps.
+- [Webpack](https://webpack.js.org/) A JavaScript tool for bundling scripts, images, styles and other assets
+- [Babel](https://babeljs.io/) A JavaScript compiler for converting codes written in ES6 or JSX to ES5 that is supported by many browsers
+
+## Usage
+
+### Prerequisites ###
+You are going to need
+
+* Linux, macOS or Windows
+* node version 8.9.2
+
+### Getting Set Up ###
+* Clone this repository to your local machine
+```
+$ https://github.com/andela/taps-client.git
+```
+* Change directory into the taps-client directory
+```
+$ cd taps-client
+```
+* Install all required dependencies by running
+```
+$ npm install
+```
+* Once installation is done, create a .env file and fill it with the neccessary environment variables **(see .env-sample for the neccessary environment variables required)**
+* To start the application, run
+```
+npm run dev
+```
+## Testing
+
+This project uses [jest](https://jestjs.io/) for testing.
+* Ensure you run `yarn` (or `npm install`) to install necessary packages.
+* Run `npm test` to run tests and display code coverage results.
+
+## License
+
+[MIT](LICENSE)
+
+## FAQ
+
+### Is this an Open-Source Application?
+
+```
+Yes it is, and contributing to the development of this application is by raising PRs.
+```
+
+### Who can contribute?
+
+```
+Anyone! This application is open to all those who want to contribute to open-source 
+development and are willing to follow set standards for contributing.
+```
+
+### Can I clone this application for personal use?
+
+```
+Yes! This application is licensed under MIT, and is open for whatever you may choose 
+to use it for.
+```

app.json

@@ -0,0 +1,13 @@
+{
+    "name": "taps-client",
+    "scripts": {},
+    "env": {
+      "GOOGLE_CLIENT_ID": {
+        "required": true
+      }
+    },
+    "formation": {},
+    "addons": [],
+    "buildpacks": []
+  }
+

client/public/index.html

@@ -5,14 +5,31 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#385cd7">
-  <title>Andela stuff</title>
+  <title>Andela taps</title>
+  <link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="/favicons/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="msapplication-TileImage" content="/favicons/ms-icon-144x144.png">
+  <meta name="theme-color" content="#ffffff">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
     crossorigin="anonymous">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"></link>
   <link rel="stylesheet" href="/css/materialize.min.css" media="screen,projection">
   <link rel="stylesheet" href="/css/utils.css">
 </head>
-
 <body>
   <noscript>
     <div class="text-center">This site requires JavaScript. Please enable it in your browser settings.</div>

client/src/config/host.js

@@ -1,4 +1,4 @@
 const host = window.location.hostname === 'localhost' ?
-  'http://localhost:8000/v1' : 'https://andela-teams-core.herokuapp.com/v1/';
+  'http://localhost:8000/v1' : 'https://ghoulies-taps-server.herokuapp.com/v1/';
 
 export default host;

client/src/modules/Auth/components/ExtraForm.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import MappleToolTip from 'reactjs-mappletooltip';
 
 const ExtraForm = ({
   handleForm, handleChange, slackId, githubId
@@ -8,17 +9,44 @@ const ExtraForm = ({
     <form className="col s12" onSubmit={handleForm}>
       <div className="row">
         <div className="input-field col s12 ">
+          <i className="prefix fab fa-slack fa-2x" />
           <input
             id="Slack_id"
             name="slackId"
-            type="number"
+            type="text"
             onChange={handleChange}
             value={slackId}
             className="validate"
+            pattern="[a-zA-Z0-9_-]{4,15}"
           />
           <label htmlFor="Slack_id">Slack Id</label>
+          <div className="right">
+            <MappleToolTip
+              direction="top"
+              textColor="rgba(56, 93, 215, 0.98)"
+              mappleType="contra"
+            >
+              <div>
+                <i className="tooltip fa fa-question-circle" />
+              </div>
+              <div>
+                <div>
+                  <h5 className="">Need help getting slack ID?</h5>
+                  <h6>Follow these simple steps</h6>
+                  <ul>
+                    <li><i className="far fa-dot-circle" /> &nbsp;Login to your slack account</li>
+                    <li><i className="far fa-dot-circle" /> &nbsp;At the top left corner, click on your name/username</li>
+                    <li><i className="far fa-dot-circle" /> &nbsp;From the pop up that appear, click on <b>Profile & Account</b> link</li>
+                    <li><i className="far fa-dot-circle" /> &nbsp;Click on <b>More actions</b> icon <img src="./resources/images/more1.png" height="13px" width="30px" alt="more" /></li>
+                    <li><i className="far fa-dot-circle" /> &nbsp;Click on <b>Copy member ID</b> to copy your slack membership ID(slack ID)</li>
+                  </ul>
+                </div>
+              </div>
+            </MappleToolTip>
+          </div>
         </div>
         <div className="input-field col s12">
+          <i className="prefix fab fa-github fa-2x" />
           <input
             id="github"
             type="text"

client/src/modules/CreateTeam/components/Form.jsx

@@ -1,25 +1,61 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Dropdown } from 'semantic-ui-react'
+import slack from '../../../../public/resources/images/slack.png';
+import pt from '../../../../public/resources/images/pt.jpg';
 
-const Form = ({
+/**
+ * @description stateless form component
+ * @param {object} props
+ * @returns {JSX} jsx
+ */
+export const Form = ({
   handleChange,
   name,
   desc,
   checked,
   handleSubmit,
-  submitting
+  submitting,
+  menuChange
 }) => {
   let showSubmitButton = false;
+  let teamName = 'example';
+
   if (name.trim() && desc.trim()) {
     showSubmitButton = true;
   }
+
+  if (name.trim()) {
+    teamName = name
+  }
+
+  // github dropdown options
+  const githubOptions = [
+    {key: `ah-${teamName}-frontend`, text: `ah-${teamName}-frontend`, value: `ah-${teamName}-frontend`},
+    {key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
+    {key: `${teamName}-ah`, text: `${teamName}-ah`, value: `${teamName}-ah`},
+    {key: `ah-${teamName}-backend`, text: `ah-${teamName}-backend`, value: `ah-${teamName}-backend`},
+  ]
+
+  const ptOptions = [
+    {key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
+    {key: `${teamName}-ah`, text: `${teamName}-ah`, value: `${teamName}-ah`}
+  ]
+
+  const slackOptions = [
+    {key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
+    {key: `${teamName}-general`, text: `${teamName}-general`, value: `${teamName}-general`},
+    {key: `${teamName}-standups`, text: `${teamName}-standups`, value: `${teamName}-standups`},
+    {key: `${teamName}-bots`, text: `${teamName}-bots`, value: `${teamName}-bots`}
+  ]
+
   return (
     <form
       className="col s12 m8 l6 form-wrapper z-depth-5  center-block custom-form"
       onSubmit={handleSubmit}
     >
-      <div className="row form-header nav-blue ">
-        <h6 className="center white-text">Create a team</h6>
+      <div className="row form-header team-form-header white border-bottom">
+        <h6 className="center text-header">Create a team</h6>
       </div>
       <div className="form-wrapper-inner">
         <div className="row">
@@ -53,28 +89,41 @@ const Form = ({
         <div className="row">
           <div className="input-field col m6 s12">
             <select onChange={handleChange} name="visibility">
-              <option value>Private</option>
-              <option value={false}>Public</option>
+              <option value>Public</option>
+              <option value={false}>Private</option>
             </select>
             <label>Team visibility</label>
           </div>
         </div>
+        <div className="team-accounts top-margin">
+          <i className="fab fa-github integration-icon">`</i>
+          <Dropdown name='github' onChange={menuChange} placeholder='Repo name'
+           fluid multiple selection search options={githubOptions} />
+        </div>
+        <div className="team-accounts top-margin">
+          <img src={pt} className="integration-icon small-icon" alt="pt-image"/>
+          <Dropdown placeholder='PT name' fluid multiple selection search options={ptOptions} />
+        </div>
+        <div className="team-accounts top-margin">
+          <img src={slack} className="integration-icon small-icon" alt="slack-image"/>
+          <Dropdown placeholder='channel name' fluid multiple selection search options={slackOptions} />
+        </div>
         {!showSubmitButton && (
-          <div className="row">
-            <button className="waves-effect waves-light btn col s12 disabled">
-              Submit
+          <div className="submit-btn">
+            <button className="btn form-subimt-btn right disabled top-margin bottom-margin">
+            Submit
             </button>
           </div>
         )}
         {showSubmitButton && (
-          <div className="row">
+          <div className="submit-btn">
             {!submitting && (
-              <button className="waves-effect waves-light btn col s12 nav-blue">
+              <button className="top-margin bottom-margin btn right nav-blue">
                 Submit
               </button>
             )}
             {submitting && (
-              <button className="waves-effect waves-light btn col s12 disabled">
+              <button className="btn right disabled top-margin bottom-margin">
                 Submitting...
               </button>
             )}