ready

Author: larmax

firstapp/src/Components/Cockpit/Cockpit.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import styles from './Cockpit.module.css';
-import Aux from '../../hoc/Aux';
 const cockpit = (props) => {
 
   const assignedClasses = [];
@@ -27,13 +26,17 @@ const cockpit = (props) => {
 
   return(
     <>
-    <h1>tekstä</h1>
+    <h1>{props.appTitle }</h1>
     <p className={assignedClasses.join(' ')}>lisää tekstiä</p>
 
     <button
     className={btnClass}
     onClick={props.clicked}> Toggle Persons </button>
+    <button
+    onClick={props.login }>
+    Log In
+</button>
     </>
   )
 };
-export default cockpit;
+export default React.memo(cockpit);

firstapp/src/Components/persons/Persons.js

@@ -15,7 +15,9 @@ class Persons extends PureComponent{
 
   componentDidMount(){
     console.log('[Persons.js] Inside componentWillMount ');
+console.log('lastpersonref',React.createRef());
         this.lastPersonRef.current.focus();
+
 }
 
     componentWillReceiveProps(nextProps){
@@ -43,12 +45,14 @@ componentDidUpdate(){
       console.log('[Persons.js] inside render');
   return this.props.persons.map( (person, index) => {
     return <Person
-      click={() =>   this.props.clicked( index )}
-      nimi={ person.nimi }
+      click = {() =>   this.props.clicked( index )}
+      nimi = { person.nimi }
       sijainti = { index }
       ref = { this.lastPersonRef }
-      key={ person.id  }
-      changed={( event ) => this.props.changed( event, person.id )}
+      authenticated = { this.props.isAuthenticated }
+      key = { person.id  }
+      changed = {( event ) => this.props.changed( event, person.id )}
+      isAuthenticated = {this.props.authenticated}
         />
 
   } );

firstapp/src/Components/persons/person/Person.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 import withClass from '../../../hoc/WithClass'
 import styles from './Person.module.css';
+import { AuthContext } from '../../../containers/App'
 
 class Person extends Component {
   constructor(props){
@@ -24,19 +24,16 @@ this.inputElement = React.createRef();
 
   }
 focus(){
- this.inputElement.current.focus();       
+ this.inputElement.current.focus();
 }
 
   render(){
       console.log('[Person.js] inside render');
-// const rnd = Math.random();
-// console.log('rnd:', rnd);
-// if ( rnd > 0.7 ) {
-//   throw new Error ( 'Something went wrong' );
-// }
-
     return (
         <>
+        <AuthContext.Consumer>
+        {auth => auth ? <p>Authenticated!</p> : <p> :( </p> }
+          </AuthContext.Consumer>
             <p onClick={this.props.click}>I am {this.props.nimi} and I am {4} years old!</p>
             <p>{this.props.children}</p>
             <input

firstapp/src/containers/App.js

@@ -8,6 +8,9 @@ import Cockpit from '../Components/Cockpit/Cockpit'
 import WithClass from '../hoc/WithClass';
 // import ErrorBoundary from './ErrorBoundary/ErrorBoundary';
 
+export const AuthContext = React.createContext(false);
+
+
 class App extends PureComponent {
   constructor(props){
     super(props);
@@ -34,8 +37,17 @@ class App extends PureComponent {
   // }
 
   componentWillUpdate(nextProps,nextState){
-    console.log('Inside componentWillUpdate, nextProps');
+    console.log('Inside componentWillUpdate', nextProps, nextState);
+
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState){
+  console.log('[UPDATE App.js] Inside getDerivedStateFromProps ', nextProps, prevState);
+return prevState;
+  }
 
+  getSnapshotBeforeUpdate(){
+    console.log('[UPDATE App.js] Inside   getSnapshotBeforeUpdate');
   }
 
   componentDidUpdate(){
@@ -50,7 +62,8 @@ class App extends PureComponent {
     ],
     otherState: 'joku muu value',
     showPersons: false,
-    timesClicked: 0
+    timesClicked: 0,
+    authenticated: false
   }
 
   nimiChangedHandler = (event, id) => {
@@ -72,6 +85,11 @@ class App extends PureComponent {
     console.log('id:',id);
   }
 
+  loginHandler = () => {
+    this.setState({authenticated: true  })
+
+  }
+
   togglePersonsHandler = () => {
     let personsLength = this.state.persons.length
     console.log('personsLength',personsLength);
@@ -103,9 +121,11 @@ class App extends PureComponent {
 
       persons = (
         <div>
-        <Persons persons = {this.state.persons}
+        <Persons
+        persons = {this.state.persons}
         clicked={this.deletePersonHandler}
         changed={this.nimiChangedHandler}
+
         />
         </div>
       );
@@ -122,8 +142,12 @@ class App extends PureComponent {
       showPersons={this.state.showPersons}
       persons={this.state.persons}
       clicked={this.togglePersonsHandler}
+      login={this.loginHandler}
       />
+      <AuthContext.Provider
+      value={this.state.authenticated}>
       {persons}
+      </AuthContext.Provider>
       </div>
     );
 

firstapp/src/hoc/WithClass.js

@@ -1,14 +1,20 @@
 import React, { Component } from 'react';
 
 const withClass = (WrappedComponent, className) => {
-  return class extends Component {
-    render() {
-      return (
-        <div className={className}>
-        <WrappedComponent {...this.props} />
-        </div>
-      )
+    const WithClass = class extends Component {
+        render () {
+            return (
+                <div className={className}>
+                    <WrappedComponent ref={this.props.forwardedRef} {...this.props} />
+                </div>
+            )
+        }
     }
-  }
+
+    return React.forwardRef((props, ref) => {
+        return <WithClass {...props} forwardedRef={ref} />
+    });
 }
+
+
 export default withClass;