From 8568b7e099dbe99e31e19a4b71da8cf314f6a668 Mon Sep 17 00:00:00 2001 From: Ricardorouge Date: Tue, 15 Feb 2022 06:57:11 -0500 Subject: [PATCH 1/8] test --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index 2320ed32b..511c24b5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "react-stateful-widgets", "version": "0.0.1", "license": "ISC", "dependencies": { From bb5232e164d66d1eb7d631b340e100b4fc725d0a Mon Sep 17 00:00:00 2001 From: Ricardorouge Date: Tue, 15 Feb 2022 07:11:29 -0500 Subject: [PATCH 2/8] got the counter component to work --- src/components/Counter.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 447a5e849..13145b0df 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -46,32 +46,33 @@ STEP 6: This click handler needs to use 'setCount' to set the 'count' to be zero again. */ -import React from 'react'; /* STEP 0 */ +import React,{useState} from 'react'; /* STEP 0 */ export default function Counter() { + const[count,setCount] = useState(0); /* STEP 1 */ const increment = () => { - /* STEP 4 */ + setCount(count+1); }; const decrement = () => { - /* STEP 5 */ + setCount(count-1); }; const reset = () => { - /* STEP 6 */ + setCount(0); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'royalblue', /* STEP 2 */ + color: count % 2 === 0 ? 'royalblue' : 'crimson' /* STEP 2 */ }; return (

Counter

- Number 0 is even {/* STEP 3 */} + Number {count} is {count % 2 ? 'even' : 'odd'}
From 97ccb177d6e440d6d3c8dc9abfb504d45034ca00 Mon Sep 17 00:00:00 2001 From: Ricardorouge Date: Tue, 15 Feb 2022 07:30:57 -0500 Subject: [PATCH 3/8] did the input component but react isnt working for somne reason will come back --- src/components/Input.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Input.js b/src/components/Input.js index 36bf8fe03..a8f4d1e10 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -34,34 +34,35 @@ STEP 6: We need to add an extra prop to the element like so: value={inputValue} */ -import React from 'react'; /* STEP 0 */ +import React,{useState} from 'react'; /* STEP 0 */ export default function Input() { - /* STEP 1 */ + const[inputValue,setInputValue] = useState(''); const changeInput = evt => { // When the input changes, its whole value can be found inside the event object. // Log out the synthetic event object 'evt' and see for yourself. const { value } = evt.target; - + setInputValue(value); /* STEP 4 */ }; const reset = () => { /* STEP 5 */ + setInputValue(''); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'royalblue', /* STEP 2 */ + color: inputValue.length > 10? 'crimson':'royalblue' , /* STEP 2 */ }; return (

Input

-
{/* STEP 3 */} +
{inputValue.toUpperCase}
{/* STEP 3 */}
- {/* STEP 6 */} + {/* STEP 6 */}
From 7f9063ec3f87b040ba8d75d1a7c49a9a5de4a18f Mon Sep 17 00:00:00 2001 From: Ricardorouge Date: Tue, 15 Feb 2022 07:36:18 -0500 Subject: [PATCH 4/8] created the mood component --- src/components/Moods.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Moods.js b/src/components/Moods.js index 98b49467f..4792bd5eb 100644 --- a/src/components/Moods.js +++ b/src/components/Moods.js @@ -28,7 +28,7 @@ STEPS 4, 5, 6: Inside these click handlers set the correct mood, using 'setMood' and the variables below the imports. */ -import React from 'react'; /* STEP 0 */ +import React,{useState} from 'react'; /* STEP 0 */ const initialMood = 'Not sure how I feel'; const happyMood = 'Quite happy!'; @@ -36,27 +36,30 @@ const sadMood = 'Rather sad'; export default function Moods() { /* STEP 1 */ - +const[mood,setMood] = useState('happy'); const makeHappy = () => { /* STEP 4 */ + setMood('happy'); }; const makeSad = () => { /* STEP 5 */ + setMood('sad'); }; const reset = () => { /* STEP 6 */ + setMood('happy'); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'crimson', /* STEP 2 */ + color: mood === 'happy'? 'royalblue' : 'crimson', /* STEP 2 */ }; return (

Moods

-
Not sure how I feel
{/* STEP 3 */} +
I feel {mood}
{/* STEP 3 */}
From ee56712ff2dcf287c75b5c38c0b0905e51994206 Mon Sep 17 00:00:00 2001 From: Ricardorouge Date: Tue, 15 Feb 2022 08:01:58 -0500 Subject: [PATCH 5/8] did the programmers component, using .find method to get featured name --- src/components/Programmers.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Programmers.js b/src/components/Programmers.js index e34c4f392..23376d208 100644 --- a/src/components/Programmers.js +++ b/src/components/Programmers.js @@ -11,7 +11,7 @@ We can only feature one awesome programmer at a time. Find comments below to help you along. */ -import React from 'react'; +import React,{useState} from 'react'; // Use this variable ONLY to initialize a slice of state! // There is something in the JSX right now breaking this rule... @@ -27,6 +27,8 @@ export const listOfAwesome = [ export default function Programmers() { // We'll have to use the state hook twice, as we need two slices of state. // The programmers list on the one hand, and the id of the featured programmer on the other. + const[programmers,setProgrammers] = useState(listOfAwesome); + const[featured,setFeatured] = useState(null); const getNameOfFeatured = () => { // Leave this for last! @@ -34,12 +36,15 @@ export default function Programmers() { // It's going to utilize both slices of state to return the _name_ of the featured dev. // The beauty of closures is that we can "see" both slices of state from this region // of the program, without needing to inject the information through arguments. + + const foundDev = programmers.find(dev=> dev.id === featured); + return foundDev.name; }; const style = { fontSize: '1.5em', marginTop: '0.5em', - color: 'royalblue', // 🤔 color turns to gold, when celebrating + color: featured? 'gold' : 'royalblue', // 🤔 color turns to gold, when celebrating }; return ( @@ -50,9 +55,9 @@ export default function Programmers() { /* Nasty bug! We should map over a slice of state, instead of 'listOfAwesome'. We might think: "it works, though!" But if the list of programmers is not state, we could never add or edit programmers in the future. The list would be a static thing." */ - listOfAwesome.map(dev => + programmers.map(dev =>
- {dev.name} + {dev.name}
) } @@ -62,7 +67,7 @@ export default function Programmers() { // Ternaries are fantastic to render "one thing or the other" depending on the "truthiness" of something. // Pseudo-code: if the currently featured id is truthy render text 1, otherwise render text 2. // Replace the hard-coded false with the correct variable. - false + featured ? `🎉 Let's celebrate ${getNameOfFeatured()}! 🥳` : 'Pick an awesome programmer' } From d79f4ac28ac7df4cf21af9c40b4ca512f6adcb60 Mon Sep 17 00:00:00 2001 From: Ricardorouge Date: Tue, 15 Feb 2022 08:10:49 -0500 Subject: [PATCH 6/8] did the spinner component --- src/components/Spinner.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Spinner.js b/src/components/Spinner.js index d0326fd34..a5e8e9262 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -37,23 +37,24 @@ STEP 4: Do you remember the operator we use to do "not"? */ -import React from 'react'; /* STEP 0 */ +import React,{useState} from 'react'; /* STEP 0 */ export default function Spinner() { /* STEP 1 */ - +const[spinnerOn,setSpinnerOn] = useState(true); const toggleSpinner = () => { /* STEP 4 */ + setSpinnerOn(!spinnerOn); }; return (

Spinner

{ - true &&
--+--
/* STEP 2 */ + spinnerOn &&
--+--
/* STEP 2 */ }
); From d5a86ff603415df14fbb3ffec441c81c0c4602ed Mon Sep 17 00:00:00 2001 From: Ricardorouge Date: Tue, 15 Feb 2022 08:21:01 -0500 Subject: [PATCH 7/8] completed square component --- src/components/Squares.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Squares.js b/src/components/Squares.js index 25ab72546..2a65a4d3b 100644 --- a/src/components/Squares.js +++ b/src/components/Squares.js @@ -14,7 +14,7 @@ Only one square (or none) can be active at any given point. Find comments below to help you along. */ -import React from 'react'; +import React,{useState} from 'react'; // Use this variable ONLY to initialize a slice of state! const listOfSquareIds = ['sqA', 'sqB', 'sqC', 'sqD']; @@ -24,13 +24,15 @@ export default function Squares() { // 'activeSquare'. One holds the _array_ of square ids, and the other keeps track // of the currently active square. On page load there's no active square, // so the value of 'activeSquare' should be null. + const [squares,setSquares] = useState(listOfSquareIds); + const [activeSquare,setActiveSquare] = useState(null); const getClassName = id => { // This is NOT a click handler but a helper, used inside the JSX (see below). // It should return a string containing the class name of 'active', if the id passed // as the argument matches the active square in state, empty string otherwise. // Right-click and "inspect element" on the square to see its effect. - return '' + return id === activeSquare ? 'active' : '' }; const markActive = id => { @@ -38,6 +40,7 @@ export default function Squares() { // Set the id argument to become the active id in state // (unless it already is, in which case we should reset // the currently active square id back to initial state). + id === activeSquare? setActiveSquare(null) : setActiveSquare(id); }; return ( @@ -48,7 +51,7 @@ export default function Squares() { // Nasty bug! We should map over a slice of state, instead of 'listOfSquareIds'. // We might say: "it works, though!" But if the list of squares is not state, // we could never add squares, change squares or remove squares in the future. Fix! - listOfSquareIds.map(id => + squares.map(id =>
Date: Tue, 15 Feb 2022 09:09:04 -0500 Subject: [PATCH 8/8] fixed the input section --- src/components/Input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input.js b/src/components/Input.js index a8f4d1e10..cfd5cbaa3 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -60,7 +60,7 @@ export default function Input() { return (

Input

-
{inputValue.toUpperCase}
{/* STEP 3 */} +
{inputValue.toUpperCase()}
{/* STEP 3 */}
{/* STEP 6 */}