Merge pull request #1 from chris-arnold-nmtafe/main

Gallery "next" Link and animation speed slider.

src/components/GalleryItem.js

@@ -1,48 +1,51 @@
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import React, { useState, useEffect } from "react";
 import { sculptureList } from "../data/list.js";
 
 const GalleryItem = () => {
-  // get the param from the url
-  // 'http://localhost/gallery/1'
-  // useParams => 1
-  const { id } = useParams();
+    // get the param from the url
+    // 'http://localhost/gallery/1'
+    // useParams => 1
+    const { id } = useParams();
 
-  // create our state gfor the gallery item to show
-  // null default
-  const [item, setItem] = useState(null);
+    // create our state gfor the gallery item to show
+    // null default
+    const [item, setItem] = useState(null);
 
-  // use effect search the sculturelist array for the id taken from the params url
-  useEffect(() => {
-    // serach the scultureList array for the item with the id of 1
-    // in the array find the item with the id of 1
-    let sculpture = sculptureList.find((item) => {
-      return item.id == id;
-    });
+    // use effect search the sculturelist array for the id taken from the params url
+    useEffect(() => {
+        // serach the scultureList array for the item with the id of 1
+        // in the array find the item with the id of 1
+        const itemIndex = sculptureList.findIndex(item => {
+            return item.id == id;
+        });
+        let sculpture = sculptureList[itemIndex];
+        let nextSculptureID = sculptureList[(itemIndex + 1) % sculptureList.length].id;
 
-    // set state of item to be the individual sculpture
-    setItem(sculpture);
-  }, [id]);
+        // set state of item to be the individual sculpture
+        setItem({ art: sculpture, next: nextSculptureID, index: itemIndex });
+    }, [id]);
 
-  // render template
-  return (
-    <div className="box mt-3">
-      {item ? (
-        <>
-          <h2 className="title is-5">
-            <i>{item.name}</i> by {item.artist}
-          </h2>
-          <h3 className="subtitle is-6">
-            ({item.id + 1} of {sculptureList.length})
-          </h3>
-          <img src={item.url} alt={item.alt} />
-          <p>{item.description}</p>
-        </>
-      ) : (
-        <p> Item not found</p>
-      )}
-    </div>
-  );
+    // render template
+    return (
+        <div className="box mt-3">
+            {item ? (
+                <>
+                    <h2 className="title is-5">
+                        <i>{item.art.name}</i> by {item.art.artist}
+                    </h2>
+                    <Link to={`/gallery/${item.next}`}>Next</Link>
+                    <h3 className="subtitle is-6">
+                        ({item.index + 1} of {sculptureList.length})
+                    </h3>
+                    <img src={item.art.url} alt={item.art.alt} />
+                    <p>{item.art.description}</p>
+                </>
+            ) : (
+                <p> Item not found</p>
+            )}
+        </div>
+    );
 };
 
 export default GalleryItem;

src/components/StyledComponent.js

@@ -1,11 +1,26 @@
 import React from "react";
 
 export default function StyledComponent() {
-  return (
-    <section className="box mt-3">
-      <section className="animatedSection box">
-        This is a styled section with animation
-      </section>
-    </section>
-  );
+    const [looptime, setLoopTime] = React.useState("3000");
+    const animatedSection = {
+        color: "blue",
+        backgroundColor: "lightgray",
+        padding: "10px",
+        bordeRadius: "5px",
+        maxWidth: "100vw",
+        animation: `fadeInScale ${looptime}ms ease-in-out infinite`,
+    };
+    const setLoop = event => {
+        setLoopTime(event.target.value);
+    };
+    return (
+        <section className="box mt-3">
+            <div className="box">
+                <input type="range" className="slider" onChange={setLoop} min={100} max={10000} value={looptime} />
+            </div>
+            <section className="animatedSection box" style={animatedSection}>
+                This is a styled section with animation
+            </section>
+        </section>
+    );
 }