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

Working on chap06

chap06
jason-zhu 2023-10-22 00:53:31 +11:00
parent 09b754eddc
commit 5e88e1d79f
7 changed files with 57 additions and 7 deletions
Show Stats Download Patch File Download Diff File 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>

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

@ -14,7 +14,7 @@ export default function Menu({ recipes }) {
))}
</div>
<div>
<StarRating totalStars={10}/>
<StarRating />
</div>
</article>
);

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

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