Jason
/
safaribook-learning-react-2ed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: Jason:5ee5e563fc620a59316937176373a88a57b35612
Branches Tags
Jason:chap06
Jason:chap05
Jason:master
...
compare: Jason:5e88e1d79f4f4b403d7fb6573b17459e2bfa76f7
Branches Tags
Jason:chap06
Jason:chap05
Jason:master

3 Commits
5ee5e563fc ... 5e88e1d79f

Author SHA1 Message Date
jason-zhu 5e88e1d79f Working on chap06 2023-10-22 00:53:31 +11:00
Jason Zhu 09b754eddc 6.1 Building a Star Rating Component: fill functions required by StarRating component 2022-01-12 23:47:54 +11:00
Jason Zhu d38c22ac87 6.1 Building a Star Rating Component: render 3 star rated to make sure react-icons is working 2022-01-12 23:40:27 +11:00
9 changed files with 82 additions and 0 deletions
Show Stats Expand all files Collapse all files

5
recipes-app/.idea/.gitignore vendored 100644
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

6
recipes-app/.idea/inspectionProfiles/Project_Default.xml 100644
View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

8
recipes-app/.idea/modules.xml 100644
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/recipes-app.iml" filepath="$PROJECT_DIR$/.idea/recipes-app.iml" />
</modules>
</component>
</project>

12
recipes-app/.idea/recipes-app.iml 100644
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
recipes-app/.idea/vcs.xml 100644
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>

15
recipes-app/package-lock.json generated
View File

@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
}
@ -12952,6 +12953,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
},
"node_modules/react-icons": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -25025,6 +25034,12 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
},
"react-icons": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"requires": {}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
recipes-app/package.json
View File

@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},

4
recipes-app/src/components/Menu.jsx
View File

@ -1,5 +1,6 @@
import React from "react";
import Recipe from "./Recipe";
import StarRating from "./StarRating";
export default function Menu({ recipes }) {
return (
@ -12,6 +13,9 @@ export default function Menu({ recipes }) {
<Recipe key={i} {...recipe} />
))}
</div>
<div>
<StarRating />
</div>
</article>
);
}

25
recipes-app/src/components/StarRating.jsx 100644
View File

@ -0,0 +1,25 @@
import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
export default function StarRating({ totalStars = 5 }) {
const [selectedStarts, setSelectedStars] = useState(3);
return (
<>
{createArray(totalStars).map((n, i) => (
<Star
key={i}
selected={selectedStarts > i}
onSelect={() => setSelectedStars(i + i)}/>
))}
<p>
{selectedStarts} of {totalStars} stars
</p>
</>
);
}
const Star = ({ selected = false, onSelect = f => f }) => (
<FaStar color={selected ? "red" : "grey"} onClick={onSelect} />
);
const createArray = (length) => [...Array(length)];