fix: forgot to update page (#938)

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>
 	);