Skip to content

Commit

Permalink
make dialog butons optional, change diff votes trigger to ui button
Browse files Browse the repository at this point in the history
  • Loading branch information
@demshy
demshy committed Oct 29, 2023
1 parent 91ccc94 commit ac6e82d
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 84 deletions.
140 changes: 73 additions & 67 deletions ...g]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/difficulty-votes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,75 +34,81 @@ function DifficultyVotes({ route, difficultyVotes }: Props) {

return (
<>
<table className="w-full max-w-sm">
<tbody>
{Object.entries(nrVotesPerDifficulty).map(([difficulty, nrVotes]) => (
<tr key={difficulty}>
<td className="pr-4">
<Grade
difficulty={parseInt(difficulty)}
displayIntermediate={true}
/>
</td>
<td className="w-full">
<span
className={`float-left block h-5 w-0.5 ${
nrVotes === maxVotesPerDifficulty && "w-full"
} rounded ${
routeGradeDifficulty === parseInt(difficulty)
? "bg-blue-500"
: "bg-neutral-200"
}`}
style={
nrVotes > 0
? {
width: `${Math.round(
(nrVotes / maxVotesPerDifficulty) * 100
)}%`,
{difficultyVotes.length > 0 && (
<>
<table className="w-full">
<tbody>
{Object.entries(nrVotesPerDifficulty).map(
([difficulty, nrVotes]) => (
<tr key={difficulty}>
<td className="pr-4">
<Grade
difficulty={parseInt(difficulty)}
displayIntermediate={true}
/>
</td>
<td className="w-full">
<span
className={`float-left block h-5 w-0.5 ${
nrVotes === maxVotesPerDifficulty && "w-full"
} rounded ${
routeGradeDifficulty === parseInt(difficulty)
? "bg-blue-500"
: "bg-neutral-200"
}`}
style={
nrVotes > 0
? {
width: `${Math.round(
(nrVotes / maxVotesPerDifficulty) * 100
)}%`,
}
: {}
}
: {}
></span>
<span className="relative float-left">
<span className="absolute whitespace-nowrap pl-3 align-middle text-sm">
{nrVotes !== maxVotesPerDifficulty &&
pluralizeNoun("glas", nrVotes)}
</span>
</span>
</td>
<td className="whitespace-nowrap pl-3 align-middle text-sm">
{nrVotes === maxVotesPerDifficulty &&
pluralizeNoun("glas", nrVotes)}
</td>
</tr>
)
)}
</tbody>
</table>
<table className="mt-8 w-full">
<tbody>
{difficultyVotes.map((vote) => (
<tr
key={vote.id}
className={
vote.includedInCalculation
? "text-neutral-900"
: "text-neutral-500"
}
></span>
<span className="relative float-left">
<span className="absolute whitespace-nowrap pl-3 align-middle text-sm">
{nrVotes !== maxVotesPerDifficulty &&
pluralizeNoun("glas", nrVotes)}
</span>
</span>
</td>
<td className="whitespace-nowrap pl-3 align-middle text-sm">
{nrVotes === maxVotesPerDifficulty &&
pluralizeNoun("glas", nrVotes)}
</td>
</tr>
))}
</tbody>
</table>
<table className="mt-8">
<tbody>
{difficultyVotes.map((vote) => (
<tr
key={vote.id}
className={
vote.includedInCalculation
? "text-neutral-900"
: "text-neutral-500"
}
>
<td className="pr-4">
<Grade
difficulty={vote.difficulty}
displayIntermediate={true}
/>
</td>
<td className="pr-4">
{vote.isBase ? "(bazna ocena)" : vote.user?.fullName}
</td>
<td>{displayDate(vote.created)}</td>
</tr>
))}
</tbody>
</table>
>
<td className="pr-4">
<Grade
difficulty={vote.difficulty}
displayIntermediate={true}
/>
</td>
<td className="pr-4">
{vote.isBase ? "(bazna ocena)" : vote.user?.fullName}
</td>
<td className="text-right">{displayDate(vote.created)}</td>
</tr>
))}
</tbody>
</table>
</>
)}
</>
);
}
Expand Down
15 changes: 4 additions & 11 deletions .../[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useRouter } from "next/navigation";
import Dialog, {
DialogSize,
} from "../../../../../../../../components/ui/dialog";
Expand All @@ -8,21 +7,16 @@ import Grade from "@/components/grade";
import useIsVisible from "@/hooks/useIsVisible";
import { useEffect, useRef, useState } from "react";
import difficultyVotesAction from "./server-actions/difficulty-votes-action";
import Button from "@/components/ui/button";

interface RouteGradeProps {
route: Route;
crag: Crag;
}

function RouteGrade({ route, crag }: RouteGradeProps) {
const router = useRouter();
const ref = useRef<HTMLButtonElement>(null);
const handleOpenRoutePage = () => {
router.push(`/plezalisce/${crag.slug}/smer/${route.slug}`);
};

const visible = useIsVisible(ref);

const [difficultyVotes, setDifficultyVotes] = useState<DifficultyVote[]>([]);

useEffect(() => {
Expand All @@ -38,13 +32,12 @@ function RouteGrade({ route, crag }: RouteGradeProps) {
) : (
<Dialog
openTrigger={
<button ref={ref}>
{route.difficulty && <Grade difficulty={route.difficulty} />}
</button>
<Button renderStyle="icon" ref={ref}>
<>{route.difficulty && <Grade difficulty={route.difficulty} />}</>
</Button>
}
dialogSize={DialogSize.medium}
title="Glasovi uporabnikov"
confirm={{ label: "Več", callback: handleOpenRoutePage }}
cancel={{ label: "Zapri" }}
>
<DifficultyVotes route={route} difficultyVotes={difficultyVotes} />
Expand Down
16 changes: 10 additions & 6 deletions src/components/ui/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ interface DialogProps {
children: ReactElement;
title: string;
openTrigger: ReactElement;
confirm: { label: string; callback?: () => void };
cancel: { label: string; callback?: () => void };
confirm?: { label: string; callback?: () => void };
cancel?: { label: string; callback?: () => void };
dialogSize?: DialogSize;
closeWithEscOrPressOutside?: boolean;
closeCallback?: () => void;
Expand Down Expand Up @@ -80,10 +80,14 @@ function Dialog({
</DialogHUI.Description>
)}
<div className="mt-10 flex flex-wrap justify-end gap-4">
<Button variant="secondary" onClick={handleCancel}>
{cancel.label}
</Button>
<Button onClick={handleConfirm}>{confirm.label}</Button>
{cancel && (
<Button variant="secondary" onClick={handleCancel}>
{cancel.label}
</Button>
)}
{confirm && (
<Button onClick={handleConfirm}>{confirm.label}</Button>
)}
</div>
</DialogHUI.Panel>
</div>
Expand Down

0 comments on commit ac6e82d

Please sign in to comment.