6 -select time period on map- Delnia

client/src/App.js

@@ -2,6 +2,8 @@ import { Route, Routes } from "react-router-dom";
 import About from "./pages/About";
 import ModalTestingPage from "./pages/ModalTestingPage";
 import Home from "./pages/Home";
+import SliderTest from "./pages/SliderTest";
+import DataFetchingTest from "./pages/DataFetchingTest";
 
 import RhythmsPanelTestingPage from "./pages/RhythmsPanelTestingPage";
 
@@ -10,9 +12,11 @@ import RhythmsPanelTestingPage from "./pages/RhythmsPanelTestingPage";
 const App = () => (
 	<>
 	<Routes>
+	<Route path="/" element={<Home />} />
+		<Route path="/SliderTest" element={<SliderTest />} />
+		<Route path="/ModalTestingPage" element={<ModalTestingPage />} />
 		<Route path="/" element={<Home />} />
 		<Route path="/about/this/site" element={<About />} />
-		<Route path="/testingpage" element={<ModalTestingPage />} />
 		<Route path="/RhythmsPanelTestingPage" element={<RhythmsPanelTestingPage />}
 			/></Routes>
 	</>

client/src/components/DualRangeSlider.js

@@ -0,0 +1,96 @@
+import React from "react";
+import { Range } from "react-range";
+
+const DualRangeSlider = ({ selectedRange, onChangeRange }) => {
+	const min = 1400;
+	const max = 2023;
+	const step = 50;
+
+	const handleChange = (newValues) => {
+		onChangeRange(newValues);
+	};
+
+	const railLabels = [1500, 1600, 1700, 1800, 1900];
+
+	return (
+		<div style={{ margin: "20px", maxWidth: "400px" }}>
+			<h2>
+				Range: {selectedRange[0]} - {selectedRange[1]}
+			</h2>
+			<div
+				style={{
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					position: "relative",
+				}}
+			>
+				<Range
+					step={step}
+					min={min}
+					max={max}
+					values={selectedRange}
+					onChange={handleChange}
+					renderTrack={({ props, children }) => (
+						<div
+							{...props}
+							style={{
+								...props.style,
+								height: "6px",
+								width: "100%",
+								backgroundColor: "#ddd",
+								position: "relative",
+							}}
+						>
+							{children}
+							<div
+								style={{
+									position: "absolute",
+									height: "6px",
+									width: `${
+										((selectedRange[1] - selectedRange[0]) / (max - min)) * 100
+									}%`,
+									backgroundColor: "#007bbb",
+									left: `${((selectedRange[0] - min) / (max - min)) * 100}%`,
+								}}
+							></div>
+							{railLabels.map((label, index) => (
+								<div
+									key={index}
+									style={{
+										position: "absolute",
+										bottom: "-25px",
+										left: `${((label - min) / (max - min)) * 100}%`,
+										transform: "translateX(-50%)",
+									}}
+								>
+									{label}
+								</div>
+							))}
+						</div>
+					)}
+					renderThumb={({ props }) => (
+						<div
+							{...props}
+							style={{
+								...props.style,
+								height: "20px",
+								width: "20px",
+								backgroundColor: "#007bbb",
+								borderRadius: "50%",
+								outline: "none",
+							}}
+						/>
+					)}
+				/>
+			</div>
+			<div style={{ display: "flex", justifyContent: "space-between" }}>
+				<span>{min}</span>
+				<span>{max}</span>
+			</div>
+		</div>
+	);
+};
+
+export default DualRangeSlider;
+// src: https://codesandbox.io/s/multi-range-slider-react-js-forked-4uq1uo?file=/src/component/multiRangeSlider/MultiRangeSlider.js:529-589

client/src/components/RhythmsWithSlider.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from "react";
+import DualRangeSlider from "./DualRangeSlider";
+
+const RhythmsWithSlider = ({ rhythms }) => {
+	const [selectedRange, setSelectedRange] = useState([1400, 2023]);
+	const [filteredRhythms, setFilteredRhythms] = useState([]);
+
+	// Update rhythms when user change the slider
+	// This strictly just shows the rhythms in selected range(for now!)
+	useEffect(() => {
+		const updatedRhythms = rhythms.filter((rhythm) => {
+			const rhythmStartYear = parseInt(rhythm.timePeriod.split("-")[0]);
+			const rhythmEndYear = parseInt(rhythm.timePeriod.split("-")[1]);
+			return (
+				rhythmStartYear >= selectedRange[0] && rhythmEndYear <= selectedRange[1]
+			);
+		});
+		setFilteredRhythms(updatedRhythms);
+	}, [selectedRange, rhythms]);
+
+	return (
+		<div>
+			<DualRangeSlider
+				selectedRange={selectedRange}
+				onChangeRange={setSelectedRange}
+			/>
+			<div style={{ display: "flex", flexDirection: "column" }}>
+				{filteredRhythms.map((rhythm, index) => (
+					<div key={index} style={{ display: "flex", alignItems: "center" }}>
+						<div
+							// all inline styles are just for testing
+							style={{
+								width: "20px",
+								height: "20px",
+								backgroundColor: "blue",
+								borderRadius: "50%",
+								marginRight: "10px",
+							}}
+						></div>
+						<span>{rhythm.title} {rhythm.timePeriod }</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default RhythmsWithSlider;

client/src/pages/Home.js

@@ -63,11 +63,15 @@ export function Home() {
 					/>
 				</div>
 				<br></br>
+				<Link to="/ModalTestingPage">Modal Testing</Link>
+				<br></br>
+				<Link to="/SliderTest">slider test</Link>
+				<br></br>
 				<Link to="/about/this/site">About</Link>
 				<br></br>
 				<Link to="/RhythmsPanelTestingPage">RhythmsPanelTestingPage</Link>
 
-				<Link to="/testingpage">Modal Testing Page</Link>
+				<Link to="/ModalTestingPage">Modal Testing Page</Link>
 			</div>
 		</main>
 	);

client/src/pages/SliderTest.js

@@ -0,0 +1,50 @@
+import React from "react";
+import RhythmsWithSlider from "../components/RhythmsWithSlider";
+ const rhythms = [
+		{
+			title: "DC Hand dancing",
+			url: "https://www.youtube.com/watch?v=M6uM0qrjetQ",
+			location: "Washington DC",
+			description: "I have both Video and Description",
+			timePeriod: "1500-2010",
+		},
+		{
+			title: "Rumba Guaguanco",
+			location: "Havana, Cuba",
+			description: "I have no video to play, for more information google me!",
+			timePeriod: "1600-1800",
+		},
+		{
+			title: "DC Hand dancing 2",
+			url: "https://www.youtube.com/watch?v=M6uM0qrjetQ",
+			location: "Washington DC",
+			timePeriod: "1700-2000",
+		},
+		{
+			title: "Adaha and Konkoma",
+			audioUrl:
+				"https://soundcloud.com/shugo_srd/shugz-king-of-my-castle?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing",
+			location: "Washington DC",
+			timePeriod: "2015-2020",
+		},
+		{
+			title: "Dance Band Highlife",
+			audioUrl:
+				"https://soundcloud.com/eduleon42/are-we-going-out-tonight-vol-3?si=0cd23cdd892b41c6ad451505b21c0d3f&utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing",
+			location: "Washington DC",
+			description:
+				"Dance band likely had its immediate roots in the orchestras founded and popularized by West African coastal elites who lived in the region’s expanding colonial and cosmopolitan cities",
+			timePeriod: "1900-2008",
+		},
+ ];
+// timePeriod is different from what Man has put in Rhythms Table.(year_start/year_end)
+const SliderTest = () => {
+	return (
+		<div>
+			<h1>Testing the Date Filtering </h1>
+			<RhythmsWithSlider rhythms={rhythms} />
+		</div>
+	);
+};
+
+export default SliderTest;