Add team support

Author: srebalaji

.babelrc

@@ -2,5 +2,12 @@
       "presets": [
         "@babel/preset-env",
         "@babel/preset-react"
+      ],
+      "plugins": [
+	      ["@babel/plugin-transform-runtime",
+		      {
+		        "regenerator": true
+		      }
+		    ]
       ]
     }

dist/main.js

@@ -14,20 +14,27 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@babel/runtime": "^7.9.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "axios": "^0.19.2",
+    "babel-runtime": "^6.26.0",
     "bootstrap": "^4.3.1",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.28",
     "mongodb": "^3.3.2",
-    "react-select": "^3.0.4"
+    "react-router-dom": "^5.1.2",
+    "react-select": "^3.0.4",
+    "reactstrap": "^8.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0",
+    "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.4.2",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "css-loader": "^2.1.1",
     "gh-pages": "^2.2.0",
     "html-loader": "^0.5.5",

package-lock.json

@@ -1,6 +1,10 @@
 import React, { Component, Fragment } from "react"
+import { Redirect, Link } from 'react-router-dom';
+import axios from 'axios'
 
 import 'bootstrap/dist/css/bootstrap.min.css'
+import { Input, Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import './styles/app.css'
@@ -10,23 +14,41 @@ import AsyncSelect from 'react-select/async'
 import moment from 'moment-timezone'
 
 import countriesData from '../data/country.json'
-
-// import countriesV2 from '../timezone-data/output.json'
 import countriesV2 from '../data/output_15k.json'
 
-const setLocal = (key, value) => {
-  localStorage.setItem(key, JSON.stringify(value))
-}
+import { setLocal, makeUnique, isValidName, isNameValid } from './helpers'
 
-const makeUnique = (items) => {
-  const arr = []
-  return items.filter((i) => {
-    if(!arr.includes(i.country)) {
-      arr.push(i.country)
-      return true
+const saveData = async (teamName, data) => {
+  const options = {
+      method: 'POST',
+      url: `https://f23le7ruh6.execute-api.ap-south-1.amazonaws.com/dev/write-doc?name=${teamName}`,
+      data: data
     }
-    return false
-  })
+
+    return axios(options).then((res) => {
+      console.log(res.data)
+      return true
+    }).catch((e) => {
+      console.log('Error in saving ', e)
+      return false
+    })
+}
+
+const readLists = async (teamName) => {
+  return axios.get(`https://f23le7ruh6.execute-api.ap-south-1.amazonaws.com/dev/read-doc?name=${teamName}`)
+    .then((res) => {
+      if (res.status === 200) {
+        if(res.data && res.data.response && res.data.response.zones) {
+          console.log(res.data.response.zones)
+          return res.data.response.zones
+        }
+        return null
+      }
+      return null
+    })
+    .catch((e) => {
+      return null
+    })
 }
 
 const countryName = (code = "IN") => countriesData.countries[code.toUpperCase()].name
@@ -35,26 +57,31 @@ const countryName = (code = "IN") => countriesData.countries[code.toUpperCase()]
 class App extends Component {
   constructor(props) {
     super(props)
-    const listsFromLocal = localStorage.getItem('items')
-    const lists = listsFromLocal ? JSON.parse(listsFromLocal) : [{"country":"Chennai  - India","timeZone":"Asia/Kolkata"}]
+    
+    const lists = []
     const countries = countriesV2
     const options = []
-    // const options = Object.values(countries.countries).map((country) => {
-    //   return {
-    //     value: `${country.abbr} - ${country.code}`,
-    //     label: country.name,
-    //     timeZone: country.zones[0],
-    //   }
-    // })
 
     this.state = {
       options: options,
       lists: lists,
-      value: ""
+      value: "",
+      popover: false,
+      shareButton: false,
+      shareButtonText: "Share",
+      shareError: "",
+      redirect: false,
     }
+
     this.handleCountry = this.handleCountry.bind(this)
     this.loadOptions = this.loadOptions.bind(this)
     this.deleteCountry = this.deleteCountry.bind(this)
+    this.handleForm = this.handleForm.bind(this)
+    this.toggle = this.toggle.bind(this)
+  }
+
+  toggle() {
+    this.setState({popover: !this.state.popover})
   }
 
   handleCountry(e) {
@@ -65,17 +92,71 @@ class App extends Component {
       lists: [...new Set(this.state.lists)],
       value: ""
     }, () => {
-      setLocal('items', this.state.lists)
+      if (this.props.fromTeam &&
+        this.props.match &&
+        this.props.match.params &&
+        this.props.match.params.id) {
+        const teamName = this.props.match.params.id
+        saveData(teamName, this.state.lists)
+          .catch(e => console.log(e))
+      } else if(!this.props.fromTeam) {
+        setLocal('items', this.state.lists)
+      }
     })
   }
 
   deleteCountry(name) {
     const lists = this.state.lists.filter(l => l.country != name)
     this.setState({lists: lists}, () => {
-      setLocal('items', this.state.lists)
+      if (this.props.fromTeam &&
+        this.props.match &&
+        this.props.match.params &&
+        this.props.match.params.id) {
+        const teamName = this.props.match.params.id
+        saveData(teamName, this.state.lists)
+          .catch(e => console.log(e))
+      } else if(!this.props.fromTeam) {
+        setLocal('items', this.state.lists)
+      }
     })
   }
 
+  async handleForm(e) {
+    e.preventDefault()
+    this.setState({shareButton: true, shareButtonText: "Creating link..!"})
+
+    const formData = new FormData(e.target)
+    const teamName = formData.get('teamName')
+
+    const isRegexValid = isNameValid(teamName)
+    
+    if (!isRegexValid) {
+      this.setState({shareError: "Name can only be alpha numeric..!", shareButton: false, shareButtonText: "Share"})
+      return
+    }
+
+    const isValid = await isValidName(teamName)
+
+    if (!isValid) {
+      this.setState({shareError: "Name is already taken. Please try someother name", shareButton: false, shareButtonText: "Share"})
+      return
+    }
+
+    const listsFromLocal = localStorage.getItem('items')
+    const lists = listsFromLocal ? JSON.parse(listsFromLocal) : [{"country":"Chennai  - India","timeZone":"Asia/Kolkata"}]
+
+    console.log('Share with others', teamName)
+
+    const isSaveData = await saveData(teamName, lists)
+    
+    if (!isSaveData) {
+      this.setState({shareError: "Some other occured. Please try again later..!", shareButton: false, shareButtonText: "Share"})
+      return
+    }
+
+    this.setState({redirect: true, teamName: teamName})
+  }
+
   loadOptions(input, callback) {
     const countries = countriesV2
     const reg = new RegExp(`^${input}`, "gi")
@@ -89,7 +170,18 @@ class App extends Component {
     callback(output)
   }
 
-  componentDidMount() {
+  async componentDidMount() {
+    let lists = []
+    if (this.props.match && this.props.match.params && this.props.match.params.id) {
+      const savedData = await readLists(this.props.match.params.id)
+      if (savedData) lists = savedData
+    } else {
+      const listsFromLocal = localStorage.getItem('items')
+      lists = listsFromLocal ? JSON.parse(listsFromLocal) : [{"country":"Chennai  - India","timeZone":"Asia/Kolkata"}]
+    }
+    
+    this.setState({lists: lists})
+
     this.interval = setInterval(() => {
       this.setState({lists: this.state.lists})
     }, 1000)
@@ -100,12 +192,34 @@ class App extends Component {
   }
 
   render() {
+    if (this.state.redirect) {
+      window.location = `/team/${this.state.teamName}`
+    }
     return (
       <div className="container">
         <div className="row">
           <div className="col-md-10 offset-md-1">
             <h3 className="text-center" id="title">TimeZone Track </h3>
-            <AsyncSelect id="country" className="text-center" cacheOptions loadOptions={this.loadOptions} placeholder={"Search for your City"} onChange={this.handleCountry} noOptionsMessage={() => "Search for your City"} value={this.state.value}/>
+
+            <div id="country" className="">
+              <Button id="share" type="button" color="primary" className={`${this.props.fromTeam ? 'd-none' : ''}`}>
+                Share this page with your team
+              </Button>
+
+              <Popover placement="bottom" isOpen={this.state.popover} target="share" fade={false} toggle={this.toggle}>
+                <PopoverHeader>Share with your team</PopoverHeader>
+                <PopoverBody>
+                  <form onSubmit={this.handleForm}>
+                    <Input type="text" placeholder="Enter some unique name" name="teamName" autoFocus={true}/>
+                    <p id="share-error-red">{this.state.shareError}</p>
+                    <Input type="submit" value={this.state.shareButtonText} className="btn btn-outline-primary" disabled={this.state.shareButton}/>
+                  </form>
+                </PopoverBody>
+              </Popover>
+
+              <AsyncSelect className="text-center" cacheOptions loadOptions={this.loadOptions} placeholder={"Search for your City"} onChange={this.handleCountry} noOptionsMessage={() => "Search for your City"} value={this.state.value}/>
+            </div>
+
             <List lists={this.state.lists} deleteCountry={this.deleteCountry}/>
           </div>
         </div>
@@ -128,11 +242,18 @@ class List extends Component {
         <Card countryName={list.country} timezone={list.timeZone} deleteCountry={this.props.deleteCountry} key={list.country}/>
       )
     })
-    return (
-      <div className="cards">
-        {lists}
-      </div>
-    )
+
+    if (lists.length > 0) {
+      return (
+        <div className="cards">
+          {lists}
+        </div>
+      )
+    } else {
+      return (
+        <h5 className="text-center" id="loading">Loading..! </h5>
+      )
+    }
   }
 }
 

package.json

@@ -0,0 +1,44 @@
+import axios from 'axios'
+
+const setLocal = (key, value) => {
+  localStorage.setItem(key, JSON.stringify(value))
+}
+
+const makeUnique = (items) => {
+  const arr = []
+  return items.filter((i) => {
+    if(!arr.includes(i.country)) {
+      arr.push(i.country)
+      return true
+    }
+    return false
+  })
+}
+
+const isValidName = async (teamName) => {
+  return axios.get(`https://f23le7ruh6.execute-api.ap-south-1.amazonaws.com/dev/exists-doc?name=${teamName}`)
+    .then((res) => {
+      if (res.status === 200) {
+        return true
+      }
+      return false
+    })
+    .catch((e) => {
+      return false
+    })
+}
+
+const isNameValid = (teamName) => {
+	const letters = /^[0-9a-zA-Z]+$/
+	if (teamName.match(letters)) {
+		return true
+	}
+	return false
+}
+
+export {
+	setLocal,
+	makeUnique,
+	isValidName,
+	isNameValid,
+}

src/app.js

@@ -1,6 +1,21 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("app"));
+ReactDOM.render((
+	<BrowserRouter>
+		<React.Fragment>
+		</React.Fragment>
+		<Switch>
+			<Route exact path='/' component={App}/>
+
+	    <Route exact path='/team/:id' render={(props) => (
+			  <App {...props} fromTeam={true}/>
+			)}/>
+
+	    <Route path="*" component={App} />
+    </Switch>
+	</BrowserRouter>
+), document.getElementById("app"));