Working on chap06

recipes-app/.idea/.gitignore

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

recipes-app/.idea/inspectionProfiles/Project_Default.xml

@@ -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>

recipes-app/.idea/modules.xml

@@ -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>

recipes-app/.idea/recipes-app.iml

@@ -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>

recipes-app/.idea/vcs.xml

@@ -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>

recipes-app/src/components/Menu.jsx

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

recipes-app/src/components/StarRating.jsx

@@ -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 }) => (
+const Star = ({ selected = false, onSelect = f => f }) => (
-    <FaStar color={selected ? "red" : "grey"} />
+  <FaStar color={selected ? "red" : "grey"} onClick={onSelect} />
-)
+);
 
-const createArray = length => [...Array(length)];
+const createArray = (length) => [...Array(length)];