typescript hacks

This commit is contained in:
Elizabeth Hunt 2023-04-05 00:57:18 -06:00
parent 98d984e5f4
commit 1b0ff8ce68
Signed by: simponic
GPG Key ID: 52B3774857EB24B1
4 changed files with 56 additions and 38 deletions

View File

@ -27,10 +27,13 @@ const replaceReferencedFriendsInName = (
}); });
}; };
const refreshTimer = (id: number) => const refreshTimer = (id?: number) => {
fetch(`/api/timers/${id}/refresh`, { if (!id) return;
return fetch(`/api/timers/${id}/refresh`, {
method: "POST", method: "POST",
}); });
};
export type TimerCardProps = { export type TimerCardProps = {
timer: TimerResponse; timer: TimerResponse;
@ -41,6 +44,7 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
const [since, setSince] = useState<string>(""); const [since, setSince] = useState<string>("");
useEffect(() => { useEffect(() => {
if (timer && timer.start) {
const start = new Date(timer.start); const start = new Date(timer.start);
let updateTimersInterval: ReturnType<typeof setInterval>; let updateTimersInterval: ReturnType<typeof setInterval>;
const msTillNextSecond = 1000 - (start.getTime() % 1000); const msTillNextSecond = 1000 - (start.getTime() % 1000);
@ -52,7 +56,8 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
}, msTillNextSecond); }, msTillNextSecond);
return () => clearInterval(updateTimersInterval); return () => clearInterval(updateTimersInterval);
}, [timer.start]); }
}, [timer?.start]);
return ( return (
<div className="card grid-card"> <div className="card grid-card">
@ -63,36 +68,44 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
</h4> </h4>
</header> </header>
<p> <p>
{replaceReferencedFriendsInName( {timer?.name && timer?.referenced_friends ? (
replaceReferencedFriendsInName(
timer.name, timer.name,
timer.referenced_friends, timer.referenced_friends,
onSelect onSelect
).map((element: JSX.Element | string, i: number) => ( ).map((element: JSX.Element | string, i: number) => (
<span style={{ overflowWrap: "anywhere", hyphens: "auto" }} key={i}> <span
style={{ overflowWrap: "anywhere", hyphens: "auto" }}
key={i}
>
{element} {element}
</span> </span>
))} ))
) : (
<> </>
)}
</p> </p>
</div> </div>
<div className="timer-metadata text-grey italic"> <div className="timer-metadata text-grey italic">
{timer.created_by ? (
<div> <div>
<a <a onClick={() => onSelect({ friendId: timer?.created_by?.id })}>
onClick={() =>
onSelect({ friendId: timer.timer_refreshes[0].refreshed_by.id })
}
>
{" "}
{timer.created_by.name} {timer.created_by.name}
</a>{" "} </a>{" "}
is tracking this is tracking this
</div> </div>
) : (
<div>has no creator?</div>
)}
<div> <div>
{timer.timer_refreshes && timer.timer_refreshes.length ? ( {timer.timer_refreshes && timer.timer_refreshes.length ? (
<span> <span>
<a <a
onClick={() => onClick={() =>
onSelect({ onSelect({
friendId: timer.timer_refreshes[0].refreshed_by.id, friendId: timer.timer_refreshes
? timer.timer_refreshes[0].refreshed_by.id
: undefined,
}) })
} }
> >
@ -104,8 +117,9 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
"has not yet been refreshed..." "has not yet been refreshed..."
)} )}
</div> </div>
<button <button
onClick={() => refreshTimer(timer.id)} onClick={() => refreshTimer(timer?.id)}
className="button outline" className="button outline"
> >
Refresh Refresh

View File

@ -1,7 +1,7 @@
import React, { useContext, useState, createContext, useEffect } from "react"; import React, { useContext, useState, createContext, useEffect } from "react";
interface authContext { interface authContext {
signedIn: boolean; signedIn?: boolean;
setSignedIn: (signedIn: boolean) => void; setSignedIn: (signedIn: boolean) => void;
sessionOver: Date; sessionOver: Date;
setSessionOver: (expiry: Date) => void; setSessionOver: (expiry: Date) => void;

View File

@ -68,9 +68,13 @@ export default function Timers() {
timers timers
.sort( .sort(
( (
{ start: startA }: { start: string }, { start: startA }: { start?: Date | string | undefined },
{ start: startB }: { start: string } { start: startB }: { start?: Date | string | undefined }
) => new Date(startB).getTime() - new Date(startA).getTime() ) => {
if (!startA) return -1;
if (!startB) return 1;
return new Date(startB).getTime() - new Date(startA).getTime();
}
) )
.map((timer) => ( .map((timer) => (
<TimerCard key={timer.id} onSelect={onSelect} timer={timer} /> <TimerCard key={timer.id} onSelect={onSelect} timer={timer} />

View File

@ -12,7 +12,7 @@ export type TimerResponse = {
message?: string; message?: string;
id?: number; id?: number;
name?: string; name?: string;
start?: Date; start?: Date | string;
created_by?: Friend; created_by?: Friend;
referenced_friends?: Friend[]; referenced_friends?: Friend[];
timer_refreshes?: TimerRefresh[]; timer_refreshes?: TimerRefresh[];