feat: add refresh button & auto-refresh interval selector in Space.jsx

Author: NourAlSalhi

src/components/DashboardControls.jsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+export default function DashboardControls({ onRefresh }) {
+  const [intervalTime, setIntervalTime] = useState(null);
+
+  useEffect(() => {
+    if (intervalTime) {
+      const id = setInterval(() => {
+        onRefresh();
+      }, intervalTime);
+      return () => clearInterval(id);
+    }
+  }, [intervalTime, onRefresh]);
+
+  return (
+    <div>
+      <button
+        onClick={onRefresh}
+      >
+        Refresh
+      </button>
+
+      <select
+        onChange={(e) =>
+          setIntervalTime(e.target.value === 'off' ? null : Number(e.target.value))
+        }
+      >
+        <option value="off">Auto Refresh: Off</option>
+        <option value={5000}>Every 5s</option>
+        <option value={30000}>Every 30s</option>
+        <option value={60000}>Every 1 min</option>
+      </select>
+    </div>
+  );
+}

src/pages/Space.jsx

@@ -2,7 +2,7 @@
  * SPACE & ASTRONOMY DASHBOARD TODOs
  * ---------------------------------
  * Easy:
- *  - [ ] Refresh button / auto-refresh interval selector
+ *  - [x] Refresh button / auto-refresh interval selector
  *  - [ ] Show last updated timestamp
  *  - [ ] Style astronauts list with craft grouping
  *  - [ ] Add loading skeleton or placeholder map area
@@ -17,32 +17,25 @@
  *  - [ ] Track path trail (polyline) on map over session
  *  - [ ] Extract map component & custom hook (useIssPosition)
  */
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
 import IssMap from '../components/IssMap.jsx';
+import DashboardControls from "../components/DashboardControls.jsx";
 
 export default function Space() {
   const [iss, setIss] = useState(null);
   const [crew, setCrew] = useState([]);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(false);
   const [lastUpdated, setLastUpdated] = useState(null);
-  const intervalRef = useRef(null);
-
-  useEffect(() => {
-    fetchData();
-    // Poll every 5s for updated ISS position only
-    intervalRef.current = setInterval(() => {
-      refreshIssOnly();
-    }, 5000);
-    return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
-  }, []);
-
+  
+  // Fetch both ISS position + crew
   async function fetchData() {
     try {
-      setLoading(true); setError(null);
+      setLoading(true);
+      setError(null);
       const [issRes, crewRes] = await Promise.all([
         fetch('http://api.open-notify.org/iss-now.json'),
         fetch('http://api.open-notify.org/astros.json')
@@ -53,38 +46,41 @@ export default function Space() {
       setIss(issJson);
       setCrew(crewJson.people || []);
       setLastUpdated(new Date());
-    } catch (e) { setError(e); } finally { setLoading(false); }
-  }
-
-  async function refreshIssOnly() {
-    try {
-      const res = await fetch('http://api.open-notify.org/iss-now.json');
-      if (!res.ok) throw new Error('Failed to refresh ISS');
-      const issJson = await res.json();
-      setIss(issJson);
-      setLastUpdated(new Date());
     } catch (e) {
-      // don't clobber existing data, but surface error
       setError(e);
+    } finally {
+      setLoading(false);
     }
   }
-//leaflet map component
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  
+  //leaflet map component
   return (
     <div>
       <h2>Space & Astronomy</h2>
+      <DashboardControls onRefresh={fetchData} />
       {loading && <Loading />}
       <ErrorMessage error={error} />
       {iss && (
         <Card title="ISS Current Location">
           <p>Latitude: {iss.iss_position.latitude}</p>
           <p>Longitude: {iss.iss_position.longitude}</p>
-          {lastUpdated && <p style={{ fontSize: '0.8rem', color: '#666' }}>Last updated: {lastUpdated.toLocaleTimeString()}</p>}
+          {lastUpdated && (
+            <p style={{ fontSize: '0.8rem', color: '#666' }}>
+              Last updated: {lastUpdated.toLocaleTimeString()}
+            </p>
+          )}
           <IssMap latitude={iss.iss_position.latitude} longitude={iss.iss_position.longitude} />
         </Card>
       )}
       <Card title={`Astronauts in Space (${crew.length})`}>
         <ul>
-          {crew.map(p => <li key={p.name}>{p.name} — {p.craft}</li>)}
+          {crew.map(p => (
+            <li key={p.name}>{p.name} — {p.craft}</li>
+          ))}
         </ul>
       </Card>
       {/* TODO: Add next ISS pass prediction form */}