typescript hacks
This commit is contained in:
parent
98d984e5f4
commit
1b0ff8ce68
@ -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
|
||||||
|
@ -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;
|
||||||
|
@ -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} />
|
||||||
|
@ -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[];
|
||||||
|
Loading…
Reference in New Issue
Block a user