From 762ae09a0ea3d06b2634a02079e46d9ed5eb473d Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Mon, 15 Nov 2021 15:42:29 -0600 Subject: [PATCH 1/7] chapter 3 or 4? --- src/components/Repairs.js | 30 ++++++++++++++++++++++++ src/components/customers/CustomerList.js | 5 ++++ 2 files changed, 35 insertions(+) diff --git a/src/components/Repairs.js b/src/components/Repairs.js index e69de29..c69fe2f 100644 --- a/src/components/Repairs.js +++ b/src/components/Repairs.js @@ -0,0 +1,30 @@ +import React from "react" + +export const Repairs = () => { + const [customers, assignCustomers] = useState([]) + + useEffect( + () => { + fetch("http://localhost:8088/customers") + .then(res => res.json()) + .then(customerAr(customers) customerArray: any + setCustomers(customers) => { } + ) + }, + [] + ) + + return ( + <> +

Honey Rae's Repair Shop

+ + { + customers.map( + (customerObject) => { + return

(customerObject.name)

+ } + ) + } + + ) +} diff --git a/src/components/customers/CustomerList.js b/src/components/customers/CustomerList.js index e69de29..9865173 100644 --- a/src/components/customers/CustomerList.js +++ b/src/components/customers/CustomerList.js @@ -0,0 +1,5 @@ +import React, { useEffect, useState } from "react" + +export const CustomerList = () => { + +} -- 2.47.3 From 80648de7b77627138998ab56292508c9234db5fd Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Tue, 16 Nov 2021 14:15:22 -0600 Subject: [PATCH 2/7] committing comments/documentation on the code --- src/components/Repairs.js | 13 +++++++++---- src/index.js | 4 ++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/Repairs.js b/src/components/Repairs.js index c69fe2f..9a726a4 100644 --- a/src/components/Repairs.js +++ b/src/components/Repairs.js @@ -1,19 +1,24 @@ +/* imports React library */ import React from "react" +import { useEffect, useState } from "react" +/* State is stored directly in the application file */ +/* const [customers, assignCustomers] is called a deconstruction array */ export const Repairs = () => { + /* assignCustomers holds an array of the assigned customers a dependancy/subset of customers. i.e. this is your state variable */ const [customers, assignCustomers] = useState([]) useEffect( () => { fetch("http://localhost:8088/customers") .then(res => res.json()) - .then(customerAr(customers) customerArray: any - setCustomers(customers) => { } + .then((customers) => { + assignCustomers(customers) } ) - }, + }, [] ) - +/* JSX, returns whatever HTML code you want rendered to the DOM */ return ( <>

Honey Rae's Repair Shop

diff --git a/src/index.js b/src/index.js index ef2edf8..15fa79a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; import reportWebVitals from './reportWebVitals'; +import {Repairs} from './components/Repairs.js' ReactDOM.render( - + , document.getElementById('root') ); -- 2.47.3 From 9b666ced64fa31e1e97971cc71a247afdc8224e4 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Tue, 16 Nov 2021 14:34:29 -0600 Subject: [PATCH 3/7] committing more documentation/notes --- src/components/Repairs.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Repairs.js b/src/components/Repairs.js index 9a726a4..1f659c4 100644 --- a/src/components/Repairs.js +++ b/src/components/Repairs.js @@ -7,11 +7,18 @@ import { useEffect, useState } from "react" export const Repairs = () => { /* assignCustomers holds an array of the assigned customers a dependancy/subset of customers. i.e. this is your state variable */ const [customers, assignCustomers] = useState([]) - +/* Once the customers array is retrieved, it needs to end up inside of the state variable "customers" */ +/* assignCustomers must be invoked to set the value of customers */ +/* customerArray => { + customers = customerArray +} +This is not allowed in React, even if it works in vanilla JS. */ useEffect( () => { fetch("http://localhost:8088/customers") + /* updates application state from permanent state and converts the result to JSON */ .then(res => res.json()) + /* passes the customers state variable to the .then function as a parameter and then calls that parameter in the assignCustomers function to change application state */ .then((customers) => { assignCustomers(customers) } ) @@ -24,6 +31,7 @@ export const Repairs = () => {

Honey Rae's Repair Shop

{ + /* .map converting items to convert items from an array to HTML */ customers.map( (customerObject) => { return

(customerObject.name)

-- 2.47.3 From d413352725920acc64ba70f9d72b20ac69d7a8e0 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Tue, 16 Nov 2021 15:43:13 -0600 Subject: [PATCH 4/7] saving progress on ch 4 --- src/components/Repairs.js | 26 +++------------ src/components/customers/CustomerList.js | 42 +++++++++++++++++++++++- 2 files changed, 45 insertions(+), 23 deletions(-) diff --git a/src/components/Repairs.js b/src/components/Repairs.js index 1f659c4..0a3cf43 100644 --- a/src/components/Repairs.js +++ b/src/components/Repairs.js @@ -1,34 +1,16 @@ -/* imports React library */ -import React from "react" -import { useEffect, useState } from "react" +import { CustomerList } from "./customers/CustomerList" /* State is stored directly in the application file */ /* const [customers, assignCustomers] is called a deconstruction array */ export const Repairs = () => { /* assignCustomers holds an array of the assigned customers a dependancy/subset of customers. i.e. this is your state variable */ - const [customers, assignCustomers] = useState([]) -/* Once the customers array is retrieved, it needs to end up inside of the state variable "customers" */ -/* assignCustomers must be invoked to set the value of customers */ -/* customerArray => { - customers = customerArray -} -This is not allowed in React, even if it works in vanilla JS. */ - useEffect( - () => { - fetch("http://localhost:8088/customers") - /* updates application state from permanent state and converts the result to JSON */ - .then(res => res.json()) - /* passes the customers state variable to the .then function as a parameter and then calls that parameter in the assignCustomers function to change application state */ - .then((customers) => { - assignCustomers(customers) } - ) - }, - [] - ) + + /* JSX, returns whatever HTML code you want rendered to the DOM */ return ( <>

Honey Rae's Repair Shop

+ { /* .map converting items to convert items from an array to HTML */ diff --git a/src/components/customers/CustomerList.js b/src/components/customers/CustomerList.js index 9865173..d79ba7d 100644 --- a/src/components/customers/CustomerList.js +++ b/src/components/customers/CustomerList.js @@ -1,5 +1,45 @@ -import React, { useEffect, useState } from "react" +import { useEffect, useState } from "react" + export const CustomerList = () => { +/* imports React library */ + /* assignCustomers holds an array of the assigned customers a dependancy/subset of customers. i.e. this is your state variable */ + /* State is stored directly in the application file */ +/* const [customers, assignCustomers] is called a deconstruction array */ + const [customers, setCustomers] = useState([]) +/* Once the customers array is retrieved, it needs to end up inside of the state variable "customers" */ +/* assignCustomers must be invoked to set the value of customers */ +/* customerArray => { + customers = customerArray } +This is not allowed in React, even if it works in vanilla JS. */ + useEffect( + () => { + fetch("http://localhost:8088/customers") + /* updates application state from permanent state and converts the result to JSON */ + .then(res => res.json()) + /* passes the customers state variable to the .then function as a parameter and then calls that parameter in the assignCustomers function to change application state */ + .then((customers) => { + setCustomers(customers) } + ) + }, + [] + ) +/* JSX, returns whatever HTML code you want rendered to the DOM */ + return ( + <> +

Honey Rae's Repair Shop

+ + { + /* .map converting items to convert items from an array to HTML */ + customers.map( + (customerObject) => { + return

(customerObject.name)

+ } + ) + } + + ) +} + -- 2.47.3 From d277b1f4bbff1b5fc8ba455ab13ac9c79a93ca51 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Tue, 16 Nov 2021 15:51:10 -0600 Subject: [PATCH 5/7] deleted unnecessary code and fixed syntax errors --- src/components/Repairs.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/Repairs.js b/src/components/Repairs.js index 0a3cf43..690cd73 100644 --- a/src/components/Repairs.js +++ b/src/components/Repairs.js @@ -11,15 +11,6 @@ export const Repairs = () => { <>

Honey Rae's Repair Shop

- - { - /* .map converting items to convert items from an array to HTML */ - customers.map( - (customerObject) => { - return

(customerObject.name)

- } - ) - } ) } -- 2.47.3 From 2a804eb51ef053b348a348d1cf0076dec9408b70 Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Wed, 17 Nov 2021 17:17:22 -0600 Subject: [PATCH 6/7] saving progress up to chapter 6 --- src/components/EmployeesList.js | 33 ++++++++++++ src/components/Repairs.js | 6 ++- src/components/customers/CustomerList.js | 66 +++++++++++++++++++----- 3 files changed, 91 insertions(+), 14 deletions(-) create mode 100644 src/components/EmployeesList.js diff --git a/src/components/EmployeesList.js b/src/components/EmployeesList.js new file mode 100644 index 0000000..427fd30 --- /dev/null +++ b/src/components/EmployeesList.js @@ -0,0 +1,33 @@ +import React from "react" +import { + useEffect, + useState +} from "react" + +export const EmployeeList = () => { + const [employees, setEmployees] = useState([]) + + useEffect( + () => { + + fetch("http://localhost:8088/employees") + /* updates application state from permanent state and converts the result to JSON */ + .then(res => res.json()) + /* passes the employees state variable to the .then function as a parameter and then calls that parameter in the assignCustomers function to change application state */ + .then((employees) => { + setEmployees(employees) + }) + }, + [] + ) + return( + <> + { + /* .map converting items to convert items from an array to HTML */ + employees.map( + (employeeObject) => { + return

{employeeObject.name}

+ } + ) + } ) +} \ No newline at end of file diff --git a/src/components/Repairs.js b/src/components/Repairs.js index 690cd73..99d0f4b 100644 --- a/src/components/Repairs.js +++ b/src/components/Repairs.js @@ -1,4 +1,5 @@ import { CustomerList } from "./customers/CustomerList" +import { EmployeeList } from "./EmployeesList" /* State is stored directly in the application file */ /* const [customers, assignCustomers] is called a deconstruction array */ @@ -9,8 +10,11 @@ export const Repairs = () => { /* JSX, returns whatever HTML code you want rendered to the DOM */ return ( <> -

Honey Rae's Repair Shop

+

Honey Rae's Repairs

+

Customer List

+

Employee List

+ ) } diff --git a/src/components/customers/CustomerList.js b/src/components/customers/CustomerList.js index d79ba7d..1a0c20d 100644 --- a/src/components/customers/CustomerList.js +++ b/src/components/customers/CustomerList.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react" +/* import { useEffect, useState } from "react" export const CustomerList = () => { @@ -7,39 +7,79 @@ export const CustomerList = () => { /* assignCustomers holds an array of the assigned customers a dependancy/subset of customers. i.e. this is your state variable */ /* State is stored directly in the application file */ /* const [customers, assignCustomers] is called a deconstruction array */ - const [customers, setCustomers] = useState([]) +/* const [customers, setCustomers] = useState([]) /* Once the customers array is retrieved, it needs to end up inside of the state variable "customers" */ /* assignCustomers must be invoked to set the value of customers */ /* customerArray => { customers = customerArray } This is not allowed in React, even if it works in vanilla JS. */ - useEffect( +/* useEffect( () => { fetch("http://localhost:8088/customers") /* updates application state from permanent state and converts the result to JSON */ - .then(res => res.json()) + /* .then(res => res.json()) /* passes the customers state variable to the .then function as a parameter and then calls that parameter in the assignCustomers function to change application state */ - .then((customers) => { - setCustomers(customers) } - ) +// .then((customers) => { + // setCustomers(customers) } +/* ) }, [] - ) + ) /* JSX, returns whatever HTML code you want rendered to the DOM */ - return ( + /* return ( <> -

Honey Rae's Repair Shop

{ /* .map converting items to convert items from an array to HTML */ - customers.map( + /* customers.map( (customerObject) => { - return

(customerObject.name)

+ return

{customerObject.name}

} ) } ) -} +} + */ + +import React, { useEffect, useState } from "react" + +export const CustomerList = () => { + // useEffect runs when the state is set by setting it to an empty array + const [customers, setCustomers] = useState([]) + // totalCustomerMessage is the state variable holding an array of all the customers + const [totalCustomerMessage, updateMessage] = useState("") + + useEffect( + () => { + fetch("http://localhost:8088/customers") + .then(res => res.json()) + .then((data) => { + setCustomers(data) + }) + }, + [] + ) +// This useEffect runs only when the state of customers changes + useEffect( + () => { + updateMessage(`You have ${customers.length} customers.`) + }, + [customers] + ) + + return ( + <> +
{totalCustomerMessage}
+ { + customers.slice(0,5).map( + (customerObject) => { + return

{customerObject.name}

+ } + ) + } + + ) +} -- 2.47.3 From db68004cf062e0a046f55e093e8edf95d33224cb Mon Sep 17 00:00:00 2001 From: bytesparallel Date: Thu, 18 Nov 2021 11:33:44 -0600 Subject: [PATCH 7/7] saving progress on chapter 6 --- src/components/EmployeesList.js | 64 ++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/src/components/EmployeesList.js b/src/components/EmployeesList.js index 427fd30..e1a4796 100644 --- a/src/components/EmployeesList.js +++ b/src/components/EmployeesList.js @@ -1,33 +1,39 @@ -import React from "react" -import { - useEffect, - useState -} from "react" +import React, { useEffect, useState } from "react" export const EmployeeList = () => { - const [employees, setEmployees] = useState([]) + const [employees, changeEmployee] = useState([]) useEffect( - () => { - - fetch("http://localhost:8088/employees") - /* updates application state from permanent state and converts the result to JSON */ - .then(res => res.json()) - /* passes the employees state variable to the .then function as a parameter and then calls that parameter in the assignCustomers function to change application state */ - .then((employees) => { - setEmployees(employees) - }) - }, - [] - ) - return( - <> - { - /* .map converting items to convert items from an array to HTML */ - employees.map( - (employeeObject) => { - return

{employeeObject.name}

- } - ) - } ) -} \ No newline at end of file + () => { + fetch("http://localhost:8088/employees") + .then(res => res.json()) + .then((data) => { + changeEmployee(data) + }) + }, + [] + ) + + useEffect(() => { + /* + 1. Use .map() to get the specialty of each employee + 2. Then update a state variable to be a comma-separated string + (e.g. "iPhone, Printers, ...") + */ + }, [employees]) + + return ( + <> +
+ Specialties: +
+ { + employees.map( + (employee) => { + return

{employee.name}

+ } + ) + } + + ) +} -- 2.47.3