feat(Client): mockConnection

Co-authored-by: Johan Nyman <[email protected]>

packages/apps/client/src/App.tsx

@@ -1,32 +1,20 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+import React from 'react'
 import { TestInterface } from './TestInterface.tsx'
 import { APIConnection } from './api/ApiConnection.ts'
 
 import './App.css'
+import { RundownList } from './RundownList/RundownList.tsx'
+import { CurrentRundown } from './CurrentRundown/CurrentRundown.tsx'
 import { TestPlaylists } from './TestPlaylists.tsx'
-function App(props: { api: APIConnection }) {
-	const [count, setCount] = useState(0)
-
+function App(props: { api: APIConnection }): React.JSX.Element {
 	return (
 		<>
 			<div>
-				<a href="https://vitejs.dev" target="_blank">
-					<img src={viteLogo} className="logo" alt="Vite logo" />
-				</a>
-				<a href="https://react.dev" target="_blank">
-					<img src={reactLogo} className="logo react" alt="React logo" />
-				</a>
+				<RundownList />
 			</div>
-			<h1>Vite + React</h1>
-			<div className="card">
-				<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-				<p>
-					Edit <code>src/App.tsx</code> and save to test HMR
-				</p>
+			<div>
+				<CurrentRundown />
 			</div>
-			<p className="read-the-docs">Click on the Vite and React logos to learn more!!</p>
 			<div>
 				<TestInterface api={props.api} />
 			</div>

packages/apps/client/src/CurrentRundown/CurrentRundown.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { AppStore } from '../stores/AppStore'
+import { Segment } from './Segment'
+
+const CurrentRundown = observer((): React.JSX.Element => {
+	const openRundown = AppStore.rundownStore.openRundown
+
+	if (!openRundown) {
+		return <p>No open rundown</p>
+	}
+
+	function onClose() {
+		openRundown?.close()
+	}
+
+	return (
+		<>
+			<h1>{openRundown.name}</h1>
+			<p>
+				<button onClick={onClose}>Close</button>
+			</p>
+			<ul>
+				{openRundown.segmentsInOrder.map((segment) => (
+					<li key={segment.id}>
+						<Segment segment={segment} />
+					</li>
+				))}
+			</ul>
+		</>
+	)
+})
+CurrentRundown.displayName = 'CurrentRundown'
+
+export { CurrentRundown }

packages/apps/client/src/CurrentRundown/Line.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { UILine } from '../model/UILine'
+
+const Line = observer(({ line }: { line: UILine | undefined }): React.JSX.Element | null => {
+	if (!line) return null
+	return <p>{line.slug}</p>
+})
+Line.displayName = 'Line'
+
+export { Line }

packages/apps/client/src/CurrentRundown/Segment.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { UISegment } from '../model/UISegment'
+import { Line } from './Line'
+
+const Segment = observer(({ segment }: { segment: UISegment | undefined }): React.JSX.Element | null => {
+	if (!segment) return null
+
+	return (
+		<>
+			<p>{segment.name}</p>
+			<ul>
+				{segment.linesInOrder.map((line) => (
+					<li key={line.id}>
+						<Line line={line} />
+					</li>
+				))}
+			</ul>
+		</>
+	)
+})
+Segment.displayName = 'Segment'
+
+export { Segment }

packages/apps/client/src/RundownList/RundownEntry.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { AppStore } from '../stores/AppStore'
+import { UIRundownId } from '../model/UIRundown'
+
+const RundownEntry = observer(({ rundownId }: { rundownId: UIRundownId }): React.JSX.Element => {
+	const rundownEntry = AppStore.rundownStore.allRundowns.get(rundownId)
+
+	function onOpen() {
+		if (!rundownEntry) return
+		AppStore.rundownStore.loadRundown(rundownEntry.playlistId)
+	}
+
+	return (
+		<p>
+			{rundownEntry?.name} <button onClick={onOpen}>Open</button>
+		</p>
+	)
+})
+RundownEntry.displayName = 'RundownEntry'
+
+export { RundownEntry }

packages/apps/client/src/RundownList/RundownList.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { keys } from 'mobx'
+import { observer } from 'mobx-react-lite'
+import { AppStore } from '../stores/AppStore'
+import { UIRundownId } from '../model/UIRundown'
+import { RundownEntry } from './RundownEntry'
+
+const RundownList = observer((): React.JSX.Element => {
+	const allRundownIds = keys<UIRundownId>(AppStore.rundownStore.allRundowns)
+
+	return (
+		<>
+			<ul>
+				{allRundownIds.map((rundownId) => (
+					<li key={rundownId}>
+						<RundownEntry rundownId={rundownId} />
+					</li>
+				))}
+			</ul>
+		</>
+	)
+})
+RundownList.displayName = 'RundownList'
+
+export { RundownList }

packages/apps/client/src/lib/lib.ts

@@ -1,5 +1,5 @@
-import uuid from 'uuid';
+import { v4 } from 'uuid'
 
 export function randomId() {
-    return uuid.v4()
+	return v4()
 }