fix: forgot to update page (#938)

client/src/app/pages/dashboard/users/games/_game/_playtype/SpecificSessionPage.tsx

@@ -138,7 +138,8 @@ function SessionPage({ data, game, playtype }: UGPT & { data: SessionReturns })
 					<EditableText
 						as="h1"
 						className="enable-rfs"
-						initial={session.name}
+						initialText={session.name || ""}
+						placeholderText={session.name || "Untitled Session"}
 						onSubmit={(name) => {
 							const newSession: SessionReturns = {
 								...sessionData,
@@ -156,7 +157,8 @@ function SessionPage({ data, game, playtype }: UGPT & { data: SessionReturns })
 					/>
 
 					<EditableText
-						initial={session.desc ?? "No Description..."}
+						initialText={session.desc || ""}
+						placeholderText={session.desc || "No Description..."}
 						className="fs-5"
 						onSubmit={(desc) => {
 							const newSession: SessionReturns = {

client/src/components/targets/quests/editor/EditableQuest.tsx

@@ -24,48 +24,33 @@ export default function EditableQuest({
 	return (
 		<Card
 			header={
-				<div>
+				<div className="vstack gap-2">
 					<EditableText
-						initial={quest.name}
-						onChange={(name) =>
+						as="h1"
+						initialText={quest.name}
+						placeholderText={quest.name || "Untitled Quest"}
+						onSubmit={(name) =>
 							onChange({
 								...quest,
 								name,
 							})
 						}
-					>
-						{(text) => (
-							<h3>
-								{text}
-								<span className="ms-2 text-hover-white">
-									<Icon type="pencil-alt" />
-								</span>
-							</h3>
-						)}
-					</EditableText>
+						authorised
+					/>
 
 					<EditableText
-						initial={quest.desc}
-						onChange={(desc) =>
+						initialText={quest.desc}
+						placeholderText={quest.desc || "Please set a description."}
+						onSubmit={(desc) =>
 							onChange({
 								...quest,
 								desc,
 							})
 						}
-					>
-						{(desc) => (
-							<div>
-								{desc}
-								<span className="ms-2 text-hover-white">
-									<Icon type="pencil-alt" />
-								</span>
-							</div>
-						)}
-					</EditableText>
+						authorised
+					/>
 
-					<div className="mt-4">
-						<Muted>Game: {FormatGame(quest.game, quest.playtype)}</Muted>
-					</div>
+					<Muted>Game: {FormatGame(quest.game, quest.playtype)}</Muted>
 				</div>
 			}
 		>
@@ -157,43 +142,33 @@ function QuestSection({
 	const [show, setShow] = useState(false);
 
 	return (
-		<div>
-			<EditableText
-				initial={section.title}
-				onChange={(title) =>
-					onChange({
-						...section,
-						title,
-					})
-				}
-			>
-				{(text) => (
-					<h5>
-						{text}
-						<span className="ms-2 text-hover-white">
-							<Icon type="pencil-alt" />
-						</span>
-					</h5>
-				)}
-			</EditableText>
-			<EditableText
-				initial={section.desc}
-				onChange={(desc) =>
-					onChange({
-						...section,
-						desc,
-					})
-				}
-			>
-				{(desc) => (
-					<div>
-						{desc === "" ? <Muted>No Description...</Muted> : desc}
-						<span className="ms-2 text-hover-white">
-							<Icon type="pencil-alt" />
-						</span>
-					</div>
-				)}
-			</EditableText>
+		<>
+			<div className="vstack gap-2">
+				<EditableText
+					as="h4"
+					initialText={section.title}
+					placeholderText="Untitled Section"
+					onSubmit={(title) =>
+						onChange({
+							...section,
+							title,
+						})
+					}
+					authorised
+				/>
+
+				<EditableText
+					initialText={section.desc}
+					placeholderText="No Description..."
+					onSubmit={(desc) =>
+						onChange({
+							...section,
+							desc,
+						})
+					}
+					authorised
+				/>
+			</div>
 			<br />
 			{section.rawGoals.length === 0 ? (
 				<Muted>No Goals...</Muted>
@@ -252,7 +227,7 @@ function QuestSection({
 					}}
 				/>
 			)}
-		</div>
+		</>
 	);
 }
 

client/src/components/util/EditableText.tsx

@@ -1,27 +1,34 @@
 import React, { useState } from "react";
 import { Button, Form, InputGroup } from "react-bootstrap";
 import Icon from "./Icon";
+import Muted from "./Muted";
 
 export default function EditableText({
 	as = "p",
 	onSubmit,
-	initial,
-	authorised,
+	initialText,
+	placeholderText,
 	className,
+	authorised,
 }: {
 	as?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span";
 	onSubmit: (value: string) => void;
-	initial: string;
-	authorised: boolean;
+	initialText: string;
+	placeholderText: string;
 	className?: string;
+	authorised: boolean;
 }) {
-	const [text, setText] = useState(initial);
+	const [text, setText] = useState(initialText);
 	const [editing, setEditing] = useState(false);
 
 	if (editing) {
 		return (
 			<InputGroup>
-				<Form.Control value={text} onChange={(e) => setText(e.target.value)} />
+				<Form.Control
+					value={text}
+					placeholder={placeholderText}
+					onChange={(e) => setText(e.target.value)}
+				/>
 				<Button
 					variant="success"
 					type="submit"
@@ -41,7 +48,7 @@ export default function EditableText({
 			onClick={() => authorised && setEditing(true)}
 			className={`d-flex gap-2 ${authorised ? "cursor-pointer" : ""}`}
 		>
-			{React.createElement(as, { className }, text)}
+			{React.createElement(as, { className }, text ? text : <Muted>{placeholderText}</Muted>)}
 			{authorised && <Icon type="pencil-alt" />}
 		</div>
 	);