Merge pull request #54 from AStarStartup/Issue27

Learn.React.Section5 #27

mcc/package.json

@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "radium": "^0.26.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

mcc/readme.md

@@ -1,12 +1,3 @@
-# Assignment
+# Astartup Mission Control Center
 
-* Create TWO new components: UserInput and UserOutput.
-* UserInput should hold an input element, UserOutput two paragraphs.
-* Output multiple UserOutput components in the App component (any paragraph texts of your choice).
-* Pass a username (of your choice) to UserOutput via props and display it there.
-* Add state to the App component (=> the username) and pass the username to the UserOutput component.
-* Add a method to manipulate the state (=> an event-handler method).
-* Pass the event-handler method reference to the UserInput component and bind it to the input-change event.
-* Ensure that the new input entered by the user overwrites the old username passed to UserOutput.
-* Add two-way-binding to your input (in UserInput) to also display the starting username.
-* Add styling of your choice to your components/ elements in the components - both with inline styles and stylesheets.
+The Astartup Mission Control Center is a browser extension for producing Simple Startup Syndication content.

mcc/src/App.js

@@ -1,33 +1,86 @@
-import React, { Component } from "react";
-import "./App.css";
-import UserInput from "./UserInput";
-import UserOutput from "./UserOutput/UserOutput";
+import React, { Component } from 'react';
+import Classes from './App.module.css';
+import Radium, { StyleRoot } from 'radium';
+import Accounts from './Components/Accounts/Accounts';
+import UserInput from './Components/UserInput';
+import AccountValidator from './Components/AccountValidator';
+import Hud from './Components/Hud/Hud'
 
 class App extends Component {
+  constructor(Props) {
+    super(Props);
+    console.log('[App.js] constructor');
+  }
+
   state = {
-    username: 'A-Star'
+    AppTitle: 'Astartup Mission Control Center',
+    StartupName: 'My Startup',
+    Accounts: [
+      { Username: 'Root', ID: 0, Name: 'Super user', Password: '0' },
+      { Username: 'Foo',  ID: 1, Name: 'Mr Foo',     Password: '1' },
+      { Username: 'Bar',  ID: 2, Name: 'Mr Bar',     Password: '2' },
+    ],
+    ShowAccounts: true
   };
 
-  HandleChangeUsername = (event) => {
-    this.setState({username: event.target.value});
+  static getDerivedStateFromProps(Props, State) {
+    console.log('[App.js] getDerivedStateFromProps', Props);
+    return State;
+  }
+
+  HandleAccountNameChange = (event, id) => {
+    const AccountIndex = this.state.Accounts.findIndex(p => {
+      return p.id === id;
+    });
+
+    const Target = { ...this.state.Accounts[AccountIndex]};
+
+    Target.Name = event.target.value;
+
+    const Accounts = [...this.state.Accounts];
+    Accounts[AccountIndex] = Target;
+
+    this.setState({Accounts: event.target.Accounts});
+  }
+
+  HandleAccountDelete = (AccountIndex) => {
+    window.alert('Works :-)');
+    //const AccountsState = this.state.Accounts.slice(); //< Better to do:
+    const Accounts = [...this.state.Accounts];
+    PermissionStatus.splice(AccountIndex, 1);
+    this.setState({Accounts: Accounts});
+  }
+
+  HandleToggleShowAccounts = () => {
+    const VisibleState = !this.state.ShowAccounts;
+    this.setState({ShowAccounts: VisibleState});
   }
 
   render() {
+
+    let AccountsView = null;
+    if (this.state.ShowAccounts) {
+      AccountsView = (
+        <Accounts 
+          Accounts={this.state.Accounts}
+          Click={this.HandleAccountDelete}
+          Change={this.HandleAccountNameChange} />
+      );
+    }
+
     return (
-      <div className="App">
-        <h1>Astartup Mission Control Center</h1>
-        <UserInput 
-          changed={this.HandleChangeUsername}
-          CurrentName={this.state.username} />
-        <UserOutput 
-          username={this.state.username} />
-        <UserOutput 
-          username="" />
-        <UserOutput 
-          username="" />
-      </div>
+      <StyleRoot>
+        <div className={Classes.App}>
+          <Hud 
+            AppTitle={this.state.AppTitle}
+            ShowAccounts={this.state.ShowAccounts}
+            Accounts={this.state.Accounts}
+            Clicked={this.HandleToggleShowAccounts} />
+          {AccountsView}
+        </div>
+      </StyleRoot>
     );
   }
 }
 
-export default App;
+export default Radium(App);