Add schedule loader

.env

@@ -0,0 +1 @@
+VITE_CFP_BASE_URL=http://cfp.localhost/api/conferences/

src/App.jsx

@@ -1,11 +1,8 @@
 import './App.css';
+import ScheduleLoader from './ScheduleLoader.jsx';
 
 function App() {
-
+  return (<ScheduleLoader/>);
-  return (
-    <>
-    </>
-  );
 }
 
 export default App;

src/ScheduleLoader.jsx

@@ -0,0 +1,21 @@
+import useConferences from './hooks/useConferences.js';
+
+export default function ScheduleLoader() {
+    const {
+        conferences,
+        error,
+        isLoading,
+    } = useConferences();
+
+    return (<>
+        {isLoading && <p>Please wait...</p>}
+        {error && <p>Error: {error}</p>}
+        {conferences && <>
+            <label>Select a conference</label>
+            <select>
+                {conferences.map(conference => <option key={conference.id}
+                                                       value={conference.id}>{conference.title}</option>)}
+            </select>
+        </>}
+    </>);
+}

src/hooks/useCfpRequest.js

@@ -0,0 +1,7 @@
+import useSWR from 'swr';
+
+const fetcher = (...args) => fetch(...args).then(res => res.json());
+
+export default function useCfpRequest(path = '') {
+    return useSWR(import.meta.env.VITE_CFP_BASE_URL.concat(path), fetcher);
+}

src/hooks/useConferences.js

@@ -0,0 +1,17 @@
+import useCfpRequest from './useCfpRequest.js';
+import { useMemo } from 'react';
+import { dateSorter } from '../utils.js';
+
+export default function useConferences() {
+    const {
+        data,
+        ...rest
+    } = useCfpRequest();
+
+    const conferences = useMemo(() => Array.isArray(data) ? data.sort(dateSorter('start_date')) : data, [data]);
+
+    return {
+        conferences,
+        ...rest,
+    };
+}

src/main.jsx

@@ -4,7 +4,7 @@ import App from './App.jsx';
 import './index.css';
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
+    <StrictMode>
-    <App />
+        <App />
-  </StrictMode>,
+    </StrictMode>,
 );

src/utils.js

@@ -0,0 +1,10 @@
+function sorter(a, b, fieldFn) {
+    const fieldA = fieldFn(a);
+    const fieldB = fieldFn(b);
+
+    return fieldA === fieldB ? 0 : (
+        fieldA < fieldB ? -1 : 1
+    );
+}
+
+export const dateSorter = key => (a, b) => sorter(a, b, item => Date.parse(item[key]));