Deduplicate, don't debounce on first visit

packages/frontend/src/routes/Repertoires.tsx

@@ -6,18 +6,21 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { useLoadingEffect } from "@/hooks/useLoading";
+import { created, DEBOUNCE, modified } from "@/snippets";
 import { RepertoireId } from "common";
-import { Cause, Clock, Duration, Effect, Option } from "effect";
+import { Cause, Effect, Option } from "effect";
 import { Loader2, Plus } from "lucide-react";
-import { FormEventHandler, ReactNode, useId, useState } from "react";
+import { FormEventHandler, ReactNode, useId, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 export function Repertoires() {
 
 	const [name, setName] = useState("");
 
+	const debounce = useRef(Effect.void);
+
 	const { isLoading, error, data: repertoireIds } = useLoadingEffect(Effect.gen(function* () {
-		yield* Clock.sleep(Duration.millis(500));
+		yield* debounce.current;
 		const { error, data } = yield* Effect.promise((signal) => client.repertoire.get({
 			query: {
 				...(name !== "" ? { name } : undefined),
@@ -48,7 +51,10 @@ export function Repertoires() {
 					type="text"
 					placeholder="Nazwa"
 					value={name}
-					onChange={(e) => setName(e.target.value)}
+					onChange={(e) => {
+						setName(e.target.value);
+						debounce.current = DEBOUNCE;
+					}}
 				/>
 			</div>
 			<Table>
@@ -134,14 +140,10 @@ function RepertoireRow(props: RepertoireRow.Props) {
 				{...piecesParts}
 			</TableCell>
 			<TableCell className="text-center text-xs">
-				{repertoire.createdAt}
-				{Option.isSome(repertoire.createdBy) && <><br />przez {repertoire.createdBy.value.username}</>}
+				{created(repertoire)}
 			</TableCell>
 			<TableCell className="text-center text-xs">
-				{Option.isNone(repertoire.modifiedAt) && Option.isNone(repertoire.modifiedBy) ? "\u2014"
-					: Option.isSome(repertoire.modifiedAt) && Option.isNone(repertoire.modifiedBy) ? repertoire.modifiedAt.value
-						: Option.isNone(repertoire.modifiedAt) ? `przez ${(repertoire.modifiedBy as Option.Some<User>).value.username}`
-							: <>{repertoire.modifiedAt.value}<br />przez {(repertoire.modifiedBy as Option.Some<User>).value.username}</>}
+				{modified(repertoire)}
 			</TableCell>
 		</TableRow>
 	);