Basic render working

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintcache

@@ -0,0 +1 @@
+[{"/home/fergalm/dev/100-tunes/src/reportWebVitals.ts":"1","/home/fergalm/dev/100-tunes/src/App.tsx":"2","/home/fergalm/dev/100-tunes/src/components/TuneList.tsx":"3"},{"size":425,"mtime":1610941863467,"results":"4","hashOfConfig":"5"},{"size":215,"mtime":1610961270327,"results":"6","hashOfConfig":"5"},{"size":763,"mtime":1610962667637,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1rmiskh",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/fergalm/dev/100-tunes/src/reportWebVitals.ts",[],"/home/fergalm/dev/100-tunes/src/App.tsx",[],"/home/fergalm/dev/100-tunes/src/components/TuneList.tsx",[]]

package.json

@@ -17,10 +17,10 @@
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "BROWSER=none react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "BROWSER=none react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "BROWSER=none react-scripts eject"
   },
   "eslintConfig": {
     "extends": [

public/data/tunes.json

@@ -0,0 +1,402 @@
+[
+    {
+        "id": 1,
+        "url": "https://www.youtube.com/watch?v=c-vixuayY0c"
+    },
+    {
+        "id": 2,
+        "url": "https://www.youtube.com/watch?v=ujx9iGshfIg"
+    },
+    {
+        "id": 3,
+        "url": "https://www.youtube.com/watch?v=2Ll9j78hThY"
+    },
+    {
+        "id": 4,
+        "url": "https://www.youtube.com/watch?v=fhV33bOsJ5M"
+    },
+    {
+        "id": 5,
+        "url": "https://www.youtube.com/watch?v=zqR9XodCk_I"
+    },
+    {
+        "id": 6,
+        "url": "https://www.youtube.com/watch?v=Jq7wz0OxI_Y"
+    },
+    {
+        "id": 7,
+        "url": "https://www.youtube.com/watch?v=JLcfvwa3GKY"
+    },
+    {
+        "id": 8,
+        "url": "https://www.youtube.com/watch?v=8jnunm86BkM"
+    },
+    {
+        "id": 9,
+        "url": "https://www.youtube.com/watch?v=4GioJHgnZWc"
+    },
+    {
+        "id": 10,
+        "url": "https://www.youtube.com/watch?v=xbSmhSYLDvs"
+    },
+    {
+        "id": 11,
+        "url": "https://www.youtube.com/watch?v=lVKePKD7F1M"
+    },
+    {
+        "id": 12,
+        "url": "https://www.youtube.com/watch?v=eLBsiApVBhI"
+    },
+    {
+        "id": 13,
+        "url": "https://www.youtube.com/watch?v=SstGOZK-nbc"
+    },
+    {
+        "id": 14,
+        "url": "https://www.youtube.com/watch?v=u-8PTWdHqME"
+    },
+    {
+        "id": 15,
+        "url": "https://www.youtube.com/watch?v=19h1IaijxgA"
+    },
+    {
+        "id": 16,
+        "url": "https://www.youtube.com/watch?v=Xjy9gTTGnDs"
+    },
+    {
+        "id": 17,
+        "url": "https://www.youtube.com/watch?v=-b3RKjH9p2w"
+    },
+    {
+        "id": 18,
+        "url": "https://www.youtube.com/watch?v=paEfZLf2bXI"
+    },
+    {
+        "id": 19,
+        "url": "https://www.youtube.com/watch?v=ZgcwK965I54"
+    },
+    {
+        "id": 20,
+        "url": "https://www.youtube.com/watch?v=AkSN7gVNv4k"
+    },
+    {
+        "id": 21,
+        "url": "https://www.youtube.com/watch?v=NWX7nqbjZ0A"
+    },
+    {
+        "id": 22,
+        "url": "https://www.youtube.com/watch?v=zB_WbAqn_Mk"
+    },
+    {
+        "id": 23,
+        "url": "https://www.youtube.com/watch?v=39vAjgAZncY"
+    },
+    {
+        "id": 24,
+        "url": "https://www.youtube.com/watch?v=w2DK71tAUHk"
+    },
+    {
+        "id": 25,
+        "url": "https://www.youtube.com/watch?v=PG6LMYD3VRk"
+    },
+    {
+        "id": 26,
+        "url": "https://www.youtube.com/watch?v=z9kbrqg4j0U"
+    },
+    {
+        "id": 27,
+        "url": "https://www.youtube.com/watch?v=q3m5szOtkfI"
+    },
+    {
+        "id": 28,
+        "url": "https://www.youtube.com/watch?v=OHB1EBKhYzA"
+    },
+    {
+        "id": 29,
+        "url": "https://www.youtube.com/watch?v=r5pM5cNoZMw"
+    },
+    {
+        "id": 30,
+        "url": "https://www.youtube.com/watch?v=qRIGUtnDfQ4"
+    },
+    {
+        "id": 31,
+        "url": "https://www.youtube.com/watch?v=c-vixuayY0c"
+    },
+    {
+        "id": 32,
+        "url": "https://www.youtube.com/watch?v=dyEgyrz0fNM"
+    },
+    {
+        "id": 33,
+        "url": "https://www.youtube.com/watch?v=iKDoepOe18Y"
+    },
+    {
+        "id": 34,
+        "url": "https://www.youtube.com/watch?v=kNcHM5zJGt4"
+    },
+    {
+        "id": 35,
+        "url": "https://www.youtube.com/watch?v=RLzFea_z06M"
+    },
+    {
+        "id": 36,
+        "url": "https://www.youtube.com/watch?v=g7ibSZa4uvU"
+    },
+    {
+        "id": 37,
+        "url": "https://www.youtube.com/watch?v=Zlt3W8Oeym0"
+    },
+    {
+        "id": 38,
+        "url": "https://www.youtube.com/watch?v=SuwPeLkYH_w"
+    },
+    {
+        "id": 39,
+        "url": "https://www.youtube.com/watch?v=NhnKg9WYmDQ"
+    },
+    {
+        "id": 40,
+        "url": "https://www.youtube.com/watch?v=gpe6QpUMiC4"
+    },
+    {
+        "id": 41,
+        "url": "https://www.youtube.com/watch?v=f7sWls3-_p4"
+    },
+    {
+        "id": 42,
+        "url": "https://www.youtube.com/watch?v=K27avUBkpm8"
+    },
+    {
+        "id": 43,
+        "url": "https://www.youtube.com/watch?v=GdruKZqG7vI"
+    },
+    {
+        "id": 44,
+        "url": "https://www.youtube.com/watch?v=VQVxTA9z6_c"
+    },
+    {
+        "id": 45,
+        "url": "https://www.youtube.com/watch?v=TR7rrtjSvp4"
+    },
+    {
+        "id": 46,
+        "url": "https://www.youtube.com/watch?v=BQnj-BT3RwI"
+    },
+    {
+        "id": 47,
+        "url": "https://www.youtube.com/watch?v=eitTCESgaQk"
+    },
+    {
+        "id": 48,
+        "url": "https://www.youtube.com/watch?v=OtSNYAYJWyA"
+    },
+    {
+        "id": 49,
+        "url": "https://www.youtube.com/watch?v=RS-JMZYmYYE"
+    },
+    {
+        "id": 50,
+        "url": "https://www.youtube.com/watch?v=nUOxX_UNCuM"
+    },
+    {
+        "id": 51,
+        "url": "https://www.youtube.com/watch?v=c4hF2PzQqXc"
+    },
+    {
+        "id": 52,
+        "url": "https://www.youtube.com/watch?v=STwJqk4a8dw"
+    },
+    {
+        "id": 53,
+        "url": "https://www.youtube.com/watch?v=XzceHLdD_iA"
+    },
+    {
+        "id": 54,
+        "url": "https://www.youtube.com/watch?v=NmjYxFfwr4M"
+    },
+    {
+        "id": 55,
+        "url": "https://www.youtube.com/watch?v=4muh5lTToUA"
+    },
+    {
+        "id": 56,
+        "url": "https://www.youtube.com/watch?v=caBnWv80VbY"
+    },
+    {
+        "id": 57,
+        "url": "https://www.youtube.com/watch?v=622I_IqibvQ"
+    },
+    {
+        "id": 58,
+        "url": "https://www.youtube.com/watch?v=3qIIGBuDe9g"
+    },
+    {
+        "id": 59,
+        "url": "https://www.youtube.com/watch?v=P-JizHfXJEM"
+    },
+    {
+        "id": 60,
+        "url": "https://www.youtube.com/watch?v=Un4CeV_l3pI"
+    },
+    {
+        "id": 61,
+        "url": "https://www.youtube.com/watch?v=y9opJNenN0M"
+    },
+    {
+        "id": 62,
+        "url": "https://www.youtube.com/watch?v=T3mnevmwVw8"
+    },
+    {
+        "id": 63,
+        "url": "https://www.youtube.com/watch?v=rw_HXX33EG8"
+    },
+    {
+        "id": 64,
+        "url": "https://www.youtube.com/watch?v=PscfLhTeFKo"
+    },
+    {
+        "id": 65,
+        "url": "https://www.youtube.com/watch?v=u-8PTWdHqME"
+    },
+    {
+        "id": 66,
+        "url": "https://www.youtube.com/watch?v=ccuIOgiarsk"
+    },
+    {
+        "id": 67,
+        "url": "https://www.youtube.com/watch?v=Qs1lUTC7SUA"
+    },
+    {
+        "id": 68,
+        "url": "https://www.youtube.com/watch?v=TwmMnIG9kaQ"
+    },
+    {
+        "id": 69,
+        "url": "https://www.youtube.com/watch?v=WWuh8aB-E8k"
+    },
+    {
+        "id": 70,
+        "url": "https://www.youtube.com/watch?v=kfZSPxhLVDw"
+    },
+    {
+        "id": 71,
+        "url": "https://www.youtube.com/watch?v=yhFaWehhxpE"
+    },
+    {
+        "id": 72,
+        "url": "https://www.youtube.com/watch?v=QgBsouTF2OY"
+    },
+    {
+        "id": 73,
+        "url": "https://www.youtube.com/watch?v=G9X9uRzH568"
+    },
+    {
+        "id": 74,
+        "url": "https://www.youtube.com/watch?v=lF0GQk99fNI"
+    },
+    {
+        "id": 75,
+        "url": "https://www.youtube.com/watch?v=hzjZzLDjjRo"
+    },
+    {
+        "id": 76,
+        "url": "https://www.youtube.com/watch?v=z27XcFgxSkE"
+    },
+    {
+        "id": 77,
+        "url": "https://www.youtube.com/watch?v=N6uFc451SG0"
+    },
+    {
+        "id": 78,
+        "url": "https://www.youtube.com/watch?v=oqa_DVZqYrU"
+    },
+    {
+        "id": 79,
+        "url": "https://www.youtube.com/watch?v=O8coFTo9c5c"
+    },
+    {
+        "id": 80,
+        "url": "https://www.youtube.com/watch?v=B6y6O24pjpI"
+    },
+    {
+        "id": 81,
+        "url": "https://www.youtube.com/watch?v=CgsJXBSRuEM"
+    },
+    {
+        "id": 82,
+        "url": "https://www.youtube.com/watch?v=82L_5wc5dtE"
+    },
+    {
+        "id": 83,
+        "url": "https://www.youtube.com/watch?v=NymZqqPMK1Q"
+    },
+    {
+        "id": 84,
+        "url": "https://www.youtube.com/watch?v=_X8o-D0rod0"
+    },
+    {
+        "id": 85,
+        "url": "https://www.youtube.com/watch?v=jtz9Y40IE_k"
+    },
+    {
+        "id": 86,
+        "url": "https://www.youtube.com/watch?v=WfIXO5kW-kg"
+    },
+    {
+        "id": 87,
+        "url": "https://www.youtube.com/watch?v=xmNvhCngyH0"
+    },
+    {
+        "id": 88,
+        "url": "https://www.youtube.com/watch?v=apg6ofBWmH0"
+    },
+    {
+        "id": 89,
+        "url": "https://www.youtube.com/watch?v=8reYmrLHFZY"
+    },
+    {
+        "id": 90,
+        "url": "https://www.youtube.com/watch?v=LScKsSmqy5E"
+    },
+    {
+        "id": 91,
+        "url": "https://www.youtube.com/watch?v=fT91SXdm6_0"
+    },
+    {
+        "id": 92,
+        "url": "https://www.youtube.com/watch?v=v8FLYLRV_I8"
+    },
+    {
+        "id": 93,
+        "url": "https://www.youtube.com/watch?v=5x5BeCjVYcM"
+    },
+    {
+        "id": 94,
+        "url": "https://www.youtube.com/watch?v=56cj9w156Hs"
+    },
+    {
+        "id": 95,
+        "url": "https://www.youtube.com/watch?v=nxw-HNdRPt0"
+    },
+    {
+        "id": 96,
+        "url": "https://www.youtube.com/watch?v=yJRtZWubtkw"
+    },
+    {
+        "id": 97,
+        "url": "https://www.youtube.com/watch?v=tH79t9wRy9U"
+    },
+    {
+        "id": 98,
+        "url": "https://www.youtube.com/watch?v=LEh7_zxe8kM"
+    },
+    {
+        "id": 99,
+        "url": "https://www.youtube.com/watch?v=2TaO6F-Eu3k"
+    },
+    {
+        "id": 100,
+        "url": "https://www.youtube.com/watch?v=yKfbINyh6C8"
+    }
+]

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,26 +1,15 @@
-import React from 'react';
+import React from "react";
-import logo from './logo.svg';
+import "./App.css";
-import './App.css';
+import TuneList from "./components/TuneList";
 
 function App() {
-  return (
+    return (
-    <div className="App">
+        <div className="App">
-      <header className="App-header">
+            <header className="App-header">100 Tunes</header>
-        <img src={logo} className="App-logo" alt="logo" />
+
-        <p>
+            <TuneList />
-          Edit <code>src/App.tsx</code> and save to reload.
+        </div>
-        </p>
+    );
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
 }
 
 export default App;

src/components/TuneList.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import Tune from "../models/tune";
+
+const MixList = () => {
+    const [tunes, setTunes] = useState<Tune[]>([]);
+    useEffect(() => {
+        const getData = async () => {
+            try {
+                const mixes: Tune[] = await (
+                    await fetch("/data/tunes.json")
+                ).json();
+                setTunes(mixes);
+            } catch (err) {
+                console.error("TuneList", "getData", err);
+            }
+        };
+        getData();
+    }, []);
+
+    return (
+        <div>
+            <h1>Here's a list of tunes</h1>
+            {tunes.map((m) => (
+                <pre key={m.id}>Fart: {m.url}</pre>
+            ))}
+        </div>
+    );
+};
+export default MixList;

src/models/tune.ts

@@ -0,0 +1,6 @@
+interface Tune {
+    id: number;
+    url: string;
+}
+
+export default Tune;