Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c7a394f

Browse files
update comments fp exercise
1 parent 3115b85 commit c7a394f

File tree

9 files changed

+161
-95
lines changed

9 files changed

+161
-95
lines changed

‎src/components/functional-programming/closure/Page.jsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,45 @@
1+
/* eslint-disable jsx-a11y/accessible-emoji */
12
import React from "react";
23
import "./exercise";
34

45
const Page = () => (
56
<React.Fragment>
67
<h2>Closure</h2>
7-
<h3>Exercise</h3>
8+
<blockquote>
9+
Closure is when a function is able to remember and access its lexical
10+
scope even when that function is executing outside its lexical scope. Kyle
11+
Simpson
12+
</blockquote>
13+
<blockquote>
14+
"[Lexical scoping] how a parser resolves variable names when functions are
15+
nested". Mozilla Dev Net
16+
</blockquote>
17+
<h3>🏋️‍♀️Exercise</h3>
818
<p>
919
Open the console on your browser and type [closure exercise] in the
10-
console filter. You should see on the console the console.log() for this
20+
console filter. You should see on the console the console.log for this
1121
exercise.
1222
</p>
1323
<p>
14-
Task, implement the <code>function add()</code> in
15-
`src/components/functional-programming/closure/exercise` so
24+
<input type="checkbox" /> 1. Go to{" "}
25+
<code>src/components/functional-programming/closure/exercise.js</code> and
26+
uncomment line 11. You should get the following error "TypeError: addFive
27+
is not a function"
28+
</p>
29+
<p>
30+
<input type="checkbox" /> 2. To fix it you are only allowed to change the{" "}
31+
<code>function add()</code>. The <code>function add()</code> should be
32+
implemented in a way that
1633
<code>addFive(7)</code> outputs 12
34+
<br />
35+
🚨 YOU CAN ONLY EDIT THE function add() IN THAT FILE 🚨
36+
</p>
37+
38+
<p>
39+
You know your implementation works because you'll see on the console:
40+
[closure exercise] addFive(7) is 12
1741
</p>
18-
<h3>Discussion about the solution</h3>
42+
<h3>Bonus, discuss about the solution with your peers</h3>
1943
<p>1- Is the inner function pure?</p>
2044
<p>2- What's executed first, the inner function or the outer function?</p>
2145
</React.Fragment>

‎src/components/functional-programming/closure/exercise.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ function add() {}
88
const addFive = add(5);
99

1010
let result;
11-
//result = addFive(7); // should output 12
11+
//result = addFive(7); // should output 12
1212

1313
console.log(`[closure exercise] addFive(7) is ${result}`);

‎src/components/functional-programming/composition/Page.jsx‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,48 @@
1+
/* eslint-disable jsx-a11y/accessible-emoji */
12
import React from "react";
23

3-
import { transformText } from "./example";
4-
import FormExercise from "./exercise";
4+
import { transformText } from "./exercise";
5+
import FormExercise from "./bonus";
56

67
const exampleText = "1 2 3 React GraphQL Academy is a m a z i n g";
78

89
const Page = () => (
910
<React.Fragment>
1011
<h2>Function composition</h2>
11-
<h3>Example</h3>
12-
Tranform the following text: "{exampleText}" so it becomes
13-
<strong> REACTJSACADEMYISAMAZING</strong>
12+
<h3>Exercise</h3>
13+
With the transformText function we can transform{" "}
14+
<strong>"{exampleText}"</strong> into
15+
<strong> "{transformText(exampleText)}"</strong>
1416
<p>
15-
Result: <strong>{transformText(exampleText)}</strong>
17+
Let's make that composition more declarative using a <code>compose</code>{" "}
18+
function:
1619
</p>
17-
<h3>Exercise</h3>
20+
<p>
21+
<input type="checkbox" /> 1. Your first task is to implement the compose
22+
function. Go to{" "}
23+
<code>
24+
{" "}
25+
src/components/functional-programming/composition/exercise/index.js
26+
</code>{" "}
27+
and follow the hints.
28+
</p>
29+
<p>
30+
<input type="checkbox" /> 2. Can you use your <code>compose</code>{" "}
31+
function to compose HoCs? You can try to use it along with the{" "}
32+
<code>withWidth</code> at the bottom of the file{" "}
33+
<code>src/components/App.jsx</code>
34+
</p>
35+
<h3>Bonus Exercise</h3>
1836
<p>
1937
Validate the following form composing the validators defined in
20-
`src/components/functional-programming/composition/exercise/valiators`. To
21-
do that you'll need to finish the implementation of the composeValidators
22-
function defined in
23-
`src/components/functional-programming/composition/exercise/index`
38+
<code>
39+
src/components/functional-programming/composition/bonus/valiators
40+
</code>
41+
. To do that you'll need to finish the implementation of the
42+
composeValidators function defined in
43+
<code>
44+
src/components/functional-programming/composition/bonus/index.js
45+
</code>
2446
</p>
2547
<FormExercise />
2648
<h3>Notes</h3>
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from "react";
2+
import { Form, Field } from "react-final-form";
3+
import { required, mustBeEmail, atLeastFiveCharacters } from "./validators";
4+
5+
// 🚧 Task 1, implement the composeValidators function
6+
// each validator has a value as input and returns undefined or the error message
7+
export const composeValidators = (...validators) => (value) =>
8+
validators.reduceRight((error, validator) => undefined, undefined);
9+
10+
// 🚧 Task 2, you need to use the composeValidators so
11+
// - Email is validated with required and mustBeEmail
12+
// - Password is validatie with required and atLeastFiveCharacters
13+
const FormExercise = () => (
14+
<Form
15+
onSubmit={onSubmit}
16+
render={({ handleSubmit, form, submitting, pristine, values }) => (
17+
<form onSubmit={handleSubmit}>
18+
<p>
19+
<Field
20+
name="email"
21+
component={Input}
22+
type="text"
23+
placeholder="Email"
24+
validate={composeValidators(mustBeEmail, required)}
25+
/>
26+
<br />
27+
Task: validate with required and must be an email
28+
</p>
29+
<p>
30+
<Field
31+
name="password"
32+
component={Input}
33+
type="password"
34+
placeholder="Password"
35+
validate={composeValidators(atLeastFiveCharacters, required)}
36+
/>
37+
<br />
38+
Task: validate with required and min length 5 characters
39+
</p>
40+
<button type="submit" disabled={submitting}>
41+
Submit
42+
</button>
43+
</form>
44+
)}
45+
/>
46+
);
47+
48+
const onSubmit = () => {};
49+
50+
const Input = ({ input, meta, placeholder, type }) => (
51+
<React.Fragment>
52+
<input {...input} type={type} placeholder={placeholder} />
53+
{meta.error && meta.touched && (
54+
<span style={{ color: "red" }}>{meta.error}</span>
55+
)}
56+
</React.Fragment>
57+
);
58+
59+
export default FormExercise;
File renamed without changes.

‎src/components/functional-programming/composition/example/index.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.
Lines changed: 17 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,22 @@
1-
import React from "react";
2-
import { Form, Field } from "react-final-form";
3-
import { required, mustBeEmail, atLeastFiveCharacters } from "./validators";
1+
/* eslint-disable no-unused-vars */
42

5-
// Task 1, implement the composeValidators function
6-
// each validator has a value as input and returns undefined or the error message
7-
export const composeValidators = (...validators) => value =>
8-
validators.reduceRight((error, validator) => undefined, undefined);
3+
const toUpperCase = (text) => text.toUpperCase();
94

10-
// Task 2, you need to use the composeValidators so
11-
// - Email is validated with required and mustBeEmail
12-
// - Password is validatie with required and atLeastFiveCharacters
13-
const FormExercise = () => (
14-
<Form
15-
onSubmit={onSubmit}
16-
render={({ handleSubmit, form, submitting, pristine, values }) => (
17-
<form onSubmit={handleSubmit}>
18-
<p>
19-
<Field
20-
name="email"
21-
component={Input}
22-
type="text"
23-
placeholder="Email"
24-
validate={composeValidators(mustBeEmail, required)}
25-
/>
26-
<br />
27-
Task: validate with required and must be an email
28-
</p>
29-
<p>
30-
<Field
31-
name="password"
32-
component={Input}
33-
type="password"
34-
placeholder="Password"
35-
validate={composeValidators(atLeastFiveCharacters, required)}
36-
/>
37-
<br />
38-
Task: validate with required and min length 5 characters
39-
</p>
40-
<button type="submit" disabled={submitting}>
41-
Submit
42-
</button>
43-
</form>
44-
)}
45-
/>
46-
);
5+
const removeSpaces = (text) => text.replace(/\s/g, "");
476

48-
const onSubmit = () => {};
7+
const removeNumbers = (text) => text.replace(/[0-9]/g,"");
498

50-
const Input = ({ input, meta, placeholder, type }) => (
51-
<React.Fragment>
52-
<input {...input} type={type} placeholder={placeholder} />
53-
{meta.error && meta.touched && (
54-
<span style={{ color: "red" }}>{meta.error}</span>
55-
)}
56-
</React.Fragment>
57-
);
9+
// 🚧 Task 0: comment out the following transformText function and uncomment the one bellow
10+
export const transformText = (text) =>
11+
toUpperCase(removeSpaces(removeNumbers(text)));
5812

59-
export default FormExercise;
13+
// 🚧 Task 1: implement the following compose function
14+
// export const transformText = compose(
15+
// toUpperCase,
16+
// removeNumbers,
17+
// removeSpaces
18+
// );
19+
// 🕵️‍♀️Hints:
20+
// - The compose function should return another function (think of the previous addFive, same idea)
21+
// - Spread the arguments of the compose function
22+
// - Use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight

‎src/components/functional-programming/memoization/Page.jsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable jsx-a11y/accessible-emoji */
12
import React from "react";
23
import "./exercise";
34

@@ -9,7 +10,7 @@ const Page = () => (
910
function call and returns the cached result when the same inputs are
1011
supplied again.
1112
</p>
12-
<h3>Exercise</h3>
13+
<h3>🏋️‍♀️ Exercise</h3>
1314
<p>
1415
Open the console on your browser and type [memoization exercise] in the
1516
console filter. You should see on the console the console.log() for this
@@ -20,6 +21,7 @@ const Page = () => (
2021
`src/components/functional-programming/memoization/exercise`:
2122
</p>
2223
<p>
24+
<input type="checkbox" />
2325
1. Pair up and explain to each other how the memoize function works with
2426
the doEasyWork function.
2527
</p>
@@ -29,15 +31,30 @@ const Page = () => (
2931
</ul>
3032

3133
<p>
34+
<input type="checkbox" />
3235
2. Explain to each other how the memoize function works with doHardWork.
3336
Does the memoize function work differently?
3437
</p>
3538

39+
<h3>Bonus exercise</h3>
3640
<p>
37-
3. Bonus, refactor the memoize function so it can memoize functions with
38-
any number of arguments. You can use the function doAnyWork to test your
41+
<input type="checkbox" />
42+
b.1, Refactor the memoize function so it can memoize functions with any
43+
number of arguments. You can use the function doAnyWork to test your
3944
refactored memoize function.
4045
</p>
46+
<p>
47+
<input type="checkbox" />
48+
b.2, Extract the key cache functionality to a "resolver" function. 🕵️‍♂️
49+
hint: see how{" "}
50+
<a
51+
href="https://github.com/lodash/lodash/blob/master/memoize.js"
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
>
55+
lodash implements it
56+
</a>
57+
</p>
4158
</React.Fragment>
4259
);
4360

‎src/components/functional-programming/memoization/exercise.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,5 @@ memoizedDoWork(4000);
5353
// const memoizedDoWork = memoize(doAnyWork);
5454
// console.log(`[memoization exercise] ${memoizedDoWork(1, 2, 3)} === 6 ?`);
5555
// console.log(`[memoization exercise] ${memoizedDoWork(1, 50, 104)} === 155 ?`);
56+
57+
// Bonus 2, extract the key cache functionality to a "resolver" function

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /