CodersforLearning · github-classroom · Jun 21, 2021 · Jun 22, 2021 · Jun 23, 2021 · Jun 23, 2021
diff --git a/.gitignore b/.gitignore
@@ -132,3 +132,4 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+*.pem
diff --git a/README.md b/README.md
@@ -1,3 +1,8 @@
+# Deployment 
+
+The website is deployed at http://ubuntu@ec2-13-239-60-176.ap-southeast-2.compute.amazonaws.com:9000/
+
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

diff --git a/package.json b/package.json
@@ -6,6 +6,8 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "firebase": "^8.6.8",
+    "firebaseui": "^4.8.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+     rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+     crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,11 +27,19 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" 
+    integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 
+    crossorigin="anonymous"></script>
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="login">
+      <div id="firebaseui-auth-container"></div>
+    </div>
+
+    <div id="root" style="display:none"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/server.js b/server.js
@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+
+app.use(express.static(path.join(__dirname, 'build')))
+
+app.get('/', function(req, res) {
+    res.sendFile(path.join(__dirname, 'build', 'index.html'));
+});
+
+app.listen(9000);
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,54 @@
-.App {
-  text-align: center;
+body {
+  background-color: #282c34;
+  color: white;
+  overflow: hidden;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.App {
+  height: 100vh;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.left {
+  border-right: 5px solid green;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+.right {
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  font-size: 2em;
+}
+
+.description {
+  text-align: center;
 }
 
-.App-link {
-  color: #61dafb;
+.create-tasks {
+  margin: auto;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.submit {
+  margin-left: 10px;
+  border-radius: 10px;
+  font-size: 1.2em;
+  background-color: red;
 }
+
+.todo-header {
+  margin-left: 10px;
+}
+
+.task-complete {
+  text-decoration: line-through;
+}
+
+input[type="checkbox"] {
+  transform: scale(1.3);
+  margin-left: 10px;
+}
+
+#login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,171 @@
+/* eslint-disable no-unused-vars */
 import logo from './logo.svg';
 import './App.css';
+import React from 'react';
+import { render } from '@testing-library/react';
+import firebase from "firebase/app"
+import "firebase/analytics"
+import "firebase/auth"
+import "firebase/firestore"
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+const firebaseConfig = {
+  apiKey: "AIzaSyDqqHDbwML8Q-5trbu-he4bgSvAOH6USE4",
+  authDomain: "todo-app-f9f30.firebaseapp.com",
+  projectId: "todo-app-f9f30",
+  storageBucket: "todo-app-f9f30.appspot.com",
+  messagingSenderId: "769594505515",
+  appId: "1:769594505515:web:f29c98515ac036fe606d6e",
+  measurementId: "G-XV346X9JN4"
+}
+
+firebase.initializeApp(firebaseConfig);
+
+let firebaseui = require('firebaseui');
+let ui = new firebaseui.auth.AuthUI(firebase.auth());
+
+ui.start('#firebaseui-auth-container', {
+  signInOptions: [
+    firebase.auth.EmailAuthProvider.PROVIDER_ID
+  ]
+});
+
+var uiConfig = {
+  callbacks: {
+    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
+      document.getElementById('root').style.display = "block";
+      document.getElementById('login').style.display = 'none';
+      return true;
+    }
+  }
+}
+
+ui.start('#firebaseui-auth-container', uiConfig);
+
+class Task extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {color: 'white'};
+    this.changeColor = this.changeColor.bind(this);
+  }
+
+  changeColor() {
+    this.setState({color: 'red'});
+  }
+
+  render() {
+    return (
+      // double curly braces needed
+      <p style={{color: this.state.color}} onClick={this.changeColor}>
+        {this.props.name}
+      </p>
+    );
+  }
+}
+
+class ListItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {className: '', completed: false}
+    this.handleDeletion = this.handleDeletion.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleDeletion() {
+    this.props.handleDoubleClick(this.props.name);
+  }
+
+  handleClick() {
+    if (this.state.completed) {
+      this.setState({className: '', completed: false})
+    }
+
+    else {
+      this.setState({className: 'task-complete', completed: true})
+    }
+  }
+
+  render() {
+    return (
+      <li className={this.state.className}> 
+        <span onDoubleClick={this.handleDeletion}>
+          {this.props.name} 
+        </span> 
+        <input type="checkbox" onClick={this.handleClick} /> 
+      </li>
+    );
+  }
+}
+
+class TaskList extends React.Component {
+
+  render() {
+    return (
+      <ol> 
+          {
+            // need to come up with proper key system
+            this.props.tasks.map((task, index) => 
+              <ListItem name={task} key={index} handleDoubleClick={this.props.handleDoubleClick}/>
+            )
+          }
+      </ol>
+    );
+  }
+}
+
+// component function
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {value: '', tasks: []};
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleDoubleClick = this.handleDoubleClick.bind(this);
+  }
+
+  handleChange(e) {
+    this.setState({value: e.target.value});
+  }
+
+  handleSubmit(e) {
+    let updated_tasks = this.state.tasks.concat(this.state.value);
+    this.setState({tasks: updated_tasks, value: ''});
+    e.preventDefault();
+  }
+
+  handleDoubleClick(task) {
+    let index = this.state.tasks.indexOf(task);
+    let tasks_copy = this.state.tasks.slice();
+    tasks_copy.splice(index, 1);
+    this.setState({tasks: tasks_copy})
+
+  }
+
+  render() {
+    return (
+      <div id="main-app" className="App row">
+        <div className="col-6 left d-flex align-items-center justify-content-center">
+          <div className="row row-cols-1">
+            <div className="description col">
+              <p> To add tasks to your todo list, enter them in the text box and press
+                submit. To mark tasks as complete, click the checkbox beside them. To delete
+                tasks, double click on the task. 
+              </p>
+            </div>
+            <div className="create-tasks col d-flex align-items-center justify-content-center">
+              <form onSubmit={this.handleSubmit}>
+                <input type="text" value={this.state.value} onChange={this.handleChange} />
+                <input className="submit" type="submit" value="submit" />
+              </form>
+            </div>
+          </div>
+        </div>
+        <div className="col-6 right">
+          <h1 className="todo-header"> Todo List </h1>
+          <TaskList tasks={this.state.tasks} handleDoubleClick={this.handleDoubleClick}/>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default App;