feat: add option to link sessions

Author: coderbyheart

src/App.tsx

@@ -35,6 +35,7 @@ export const App = () => {
 			1700: 'Closing & Retro',
 			1730: 'Dinner Break',
 			1900: 'Evening Activities',
+			1946: `You can add links, too!|${import.meta.env.PUBLIC_HOMEPAGE}`,
 		},
 		hidePastSessions: false,
 	}
@@ -118,7 +119,9 @@ export const App = () => {
 							onAdd={(add) => {
 								updateSessions((sessions) => ({
 									...sessions,
-									[parseInt(`${add.hour}${add.minute}`, 10)]: add.name,
+									[parseInt(`${add.hour}${add.minute}`, 10)]: `${add.name}${
+										add.url === '' ? '' : `|${add.url.toString()}`
+									}`,
 								}))
 							}}
 							onDelete={(time) => {

src/Editor.tsx

@@ -1,5 +1,6 @@
 import { AddIcon, DeleteIcon } from 'app/FeatherIcons'
 import formStyles from 'app/Form.module.css'
+import { SessionName } from 'app/SessionName'
 import tableStyles from 'app/Table.module.css'
 import { formatEventTime, toEventTime } from 'app/time'
 import { useRef, useState } from 'react'
@@ -8,6 +9,7 @@ type AddSession = {
 	name: string
 	hour: string
 	minute: string
+	url: string
 }
 
 const toNumber = (n: string) => {
@@ -18,6 +20,9 @@ const toNumber = (n: string) => {
 	}
 }
 
+const urlRegex =
+	/^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/
+
 export const Editor = ({
 	conferenceDate,
 	sessions,
@@ -34,19 +39,22 @@ export const Editor = ({
 		name: '',
 		hour: '19',
 		minute: '45',
+		url: '',
 	})
 	const inputRef = useRef<HTMLInputElement>(null)
 	const isInputValid = () => {
 		const hour = toNumber(add.hour)
 		const minute = toNumber(add.minute)
+		const urlIsValid = add.url !== '' ? urlRegex.test(add.url) : true
 		return (
 			add.name.length > 0 &&
 			hour !== null &&
 			hour >= 0 &&
 			hour <= 23 &&
 			minute !== null &&
 			minute >= 0 &&
-			minute <= 59
+			minute <= 59 &&
+			urlIsValid
 		)
 	}
 
@@ -58,6 +66,7 @@ export const Editor = ({
 		updateAdd({
 			...add,
 			name: '',
+			url: '',
 		})
 		inputRef.current?.focus()
 	}
@@ -114,25 +123,58 @@ export const Editor = ({
 							/>
 						</td>
 						<td>
-							<input
-								className={formStyles.Input}
-								type="text"
-								value={add.name}
-								onKeyUp={({ key }) => {
-									if (key === 'Enter') {
-										if (isInputValid()) {
-											addAction(add)
-											onAdd(add)
+							<form className={formStyles.Form}>
+								<fieldset>
+									<label htmlFor="name">Session name</label>
+									<input
+										className={formStyles.TextInput}
+										type="text"
+										value={add.name}
+										id={'name'}
+										onKeyUp={({ key }) => {
+											if (key === 'Enter') {
+												if (isInputValid()) {
+													addAction(add)
+													onAdd(add)
+												}
+											}
+										}}
+										onChange={({ target: { value } }) =>
+											updateAdd({
+												...add,
+												name: value,
+											})
 										}
-									}
-								}}
-								onChange={({ target: { value } }) =>
-									updateAdd({
-										...add,
-										name: value,
-									})
-								}
-							/>
+										placeholder='e.g. "Intro Session"'
+									/>
+								</fieldset>
+								<fieldset>
+									<label htmlFor="url">
+										Optional: URL to use as a hyperlink.
+									</label>
+									<input
+										className={formStyles.TextInput}
+										type="url"
+										id="url"
+										value={add.url ?? ''}
+										onChange={({ target: { value } }) =>
+											updateAdd({
+												...add,
+												url: value,
+											})
+										}
+										onKeyUp={({ key }) => {
+											if (key === 'Enter') {
+												if (isInputValid()) {
+													addAction(add)
+													onAdd(add)
+												}
+											}
+										}}
+										placeholder='e.g. "https://example.com/"'
+									/>
+								</fieldset>
+							</form>
 						</td>
 					</tr>
 					{Object.entries(sessions).map(([time, name]) => (
@@ -150,7 +192,9 @@ export const Editor = ({
 							<td className={'time'}>
 								{formatEventTime(eventTime(time as unknown as number))}
 							</td>
-							<td>{name}</td>
+							<td>
+								<SessionName name={name} />
+							</td>
 						</tr>
 					))}
 				</tbody>

src/Form.module.css

@@ -40,6 +40,11 @@
   }
 }
 
+.TextInput {
+  composes: Input;
+  width: calc(100% - 1rem);
+}
+
 .DateEditor {
   display: flex;
   flex-direction: column;
@@ -51,3 +56,17 @@
     flex-direction: row;
   }
 }
+
+.Form label {
+  width: 100%;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+.Form fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+.Form fieldset + fieldset {
+  margin-top: 1rem;
+}

src/Schedule.tsx

@@ -1,3 +1,4 @@
+import { SessionName } from 'app/SessionName'
 import tableStyles from 'app/Table.module.css'
 import {
 	formatEventTime,
@@ -116,7 +117,9 @@ export const Schedule = ({
 								conferenceDate={userTime(0)}
 								startTime={userTime(time as unknown as number)}
 							/>
-							<td>{name}</td>
+							<td>
+								<SessionName name={name} />
+							</td>
 						</tr>
 					))}
 			</tbody>

src/SessionName.tsx

@@ -0,0 +1,38 @@
+const sessionLinkRegEx =
+	/^(.+)\|(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))$/
+
+export const toURL = (url: string): URL | undefined => {
+	try {
+		return new URL(url)
+	} catch {
+		console.error(`Invalid URL: ${url}`)
+		return undefined
+	}
+}
+
+export const formatSessionName = (
+	name: string,
+): { sessionName: string; url?: URL } => {
+	let sessionName = name
+	let url: URL | undefined = undefined
+	const matches = sessionLinkRegEx.exec(name)
+	if (matches !== null) {
+		sessionName = matches[1]
+		url = toURL(matches[2])
+	}
+	return {
+		sessionName,
+		url,
+	}
+}
+
+export const SessionName = ({ name }: { name: string }) => {
+	const { sessionName, url } = formatSessionName(name)
+	if (url !== undefined)
+		return (
+			<a href={url.toString()} target="_blank" rel="noreferrer">
+				{sessionName}
+			</a>
+		)
+	return <>{sessionName}</>
+}

src/Table.module.css

@@ -53,3 +53,7 @@
 .Table th small {
   opacity: 0.5;
 }
+
+.Table a {
+  color: var(--color-text);
+}