mirror of
https://github.com/fergalmoran/100-tunes.git
synced 2025-12-22 09:30:28 +00:00
Basic render working
This commit is contained in:
Fergal Moran
13
.editorconfig
Normal file
13
.editorconfig
Normal file
@@ -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
|
||||
1
.eslintcache
Normal file
1
.eslintcache
Normal file
@@ -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",[]]
|
||||
@@ -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",
|
||||
"eject": "react-scripts eject"
|
||||
"test": "BROWSER=none react-scripts test",
|
||||
"eject": "BROWSER=none react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
|
||||
402
public/data/tunes.json
Normal file
402
public/data/tunes.json
Normal file
@@ -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"
|
||||
}
|
||||
]
|
||||
38
src/App.css
38
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);
|
||||
}
|
||||
}
|
||||
|
||||
31
src/App.tsx
31
src/App.tsx
@@ -1,26 +1,15 @@
|
||||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import React from "react";
|
||||
import "./App.css";
|
||||
import TuneList from "./components/TuneList";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">100 Tunes</header>
|
||||
|
||||
<TuneList />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
29
src/components/TuneList.tsx
Normal file
29
src/components/TuneList.tsx
Normal file
@@ -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;
|
||||
6
src/models/tune.ts
Normal file
6
src/models/tune.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
interface Tune {
|
||||
id: number;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export default Tune;
|
||||
Reference in New Issue
Block a user