Merge pull request #2 from roadrules-am/dev

added cards list

Author: skorphil

app/card/card.tsx

@@ -64,6 +64,7 @@ export default function Card({
 			/>
 			<div className="mt-8">
 				<TelegramComments
+					key={cardUuid}
 					websiteKey={"yqxQuEh8"}
 					useDarkMode={isDarkMode}
 					wrapperClassName="TGCommentsWidget"

app/cardsGrid/cardsGrid.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import type { Card, CardStore } from "~/hooks/useCardStore";
+
+type CardsGridProps = {
+	cards: CardStore;
+};
+
+export default function CardsGrid({ cards }: CardsGridProps) {
+	const [activeTab, setActiveTab] = useState<number | undefined>(undefined);
+	const cardGroups: { id: number; cards: Card[] }[] = [];
+	const groups = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+	for (const groupId of groups) {
+		const cardsInGroup = Object.values(cards)
+			.filter((card) => card.groupId === groupId)
+			.sort((a, b) => a.cardId - b.cardId);
+		if (cardsInGroup.length < 0) continue;
+		cardGroups.push({
+			id: groupId,
+			cards: cardsInGroup,
+		});
+	}
+
+	useEffect(() => {
+		setActiveTab(cardGroups[0].id);
+	}, []);
+
+	function handleTabClick(groupId: number) {
+		setActiveTab(groupId);
+	}
+
+	return (
+		<div className="w-full">
+			{cardGroups.map((group) => {
+				if (!group.cards) return null;
+				return (
+					<button
+						type="button"
+						key={group.id}
+						onClick={() => handleTabClick(group.id)}
+					>
+						{group.id}
+					</button>
+				);
+			})}
+
+			{/* Tab Content */}
+			{cardGroups.map((group) => (
+				<div
+					className="flex flex-wrap flex-row justify-start p-2"
+					key={group.id}
+					style={{ display: activeTab === group.id ? "flex" : "none" }}
+				>
+					{group.cards.map((card) => {
+						let color: string = "";
+						const opacity = Math.floor(
+							100 - (card.forgetProbability / 0.7) * 100,
+						);
+						if (card.forgetProbability > 0.7 && card.correctStreak !== null)
+							color =
+								"border-red-300 dark:border-red-700 rounded-full border-2";
+						if (card.forgetProbability <= 0.7)
+							color = `bg-green-300 dark:bg-green-700 rounded-sm opacity-[.${opacity}]`; // not working for some values!!
+						return (
+							<div
+								key={card.cardId}
+								className={`flex-none w-9 h-9 m-[calc((100%-288px)/16)] flex items-center justify-center ${color}`}
+							>
+								<a href={`/questions/${card.groupId}-${card.cardId}`}>
+									{card.cardId}
+								</a>
+							</div>
+						);
+					})}
+				</div>
+			))}
+		</div>
+	);
+}

app/hooks/useCardStore.ts

@@ -2,7 +2,7 @@ import { persist, createJSONStorage } from "zustand/middleware";
 import { create } from "zustand";
 import cards from "~/cardsData/cards";
 
-type Card = {
+export type Card = {
 	question: string;
 	answerOptions: string[];
 	correctId: number;
@@ -13,16 +13,18 @@ type Card = {
 	forgetProbability: number;
 };
 
-type CardStore = {
-	cards: Record<string, Card>;
-};
+export type CardStore = Record<string, Card>;
 type CardActions = {
 	getCardById: (cardId: string) => Card | undefined;
 	setCardFP: (cardId: string, newFP: number) => void;
 	setCardStreak: (cardId: string, newStreak: number) => void;
 };
 
-export const useCardStore = create<CardStore & CardActions>()(
+type CardStoreFull = {
+	cards: CardStore;
+} & CardActions;
+
+export const useCardStore = create<CardStoreFull>()(
 	persist(
 		(set, get) => ({
 			cards: getInitialState(cards),

app/routes.ts

@@ -1,8 +1,9 @@
 import type { RouteConfig } from "@react-router/dev/routes";
-import { index, route } from "@react-router/dev/routes";
+import { route } from "@react-router/dev/routes";
 
 export default [
-	index("routes/home.tsx"),
-	// route("/questions", "routes/questions.tsx"),
-	route("/questions/:questionId", "routes/question.tsx"),
+	route("/", "routes/home.tsx", [
+		route("/questions/:questionId", "routes/question.tsx"),
+		route("/questions/", "routes/questions.tsx"),
+	]),
 ] satisfies RouteConfig;

app/routes/home.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from "react";
-import type { Route } from "./+types/home";
-import { useNavigate } from "react-router";
+import { Outlet, useLocation, useNavigate } from "react-router";
 import getNextCardUUID from "~/lib/getNextCard";
+import type { Route } from "./+types/home";
 
-export function meta({}: Route.MetaArgs) {
+export function meta() {
 	return [
 		{ title: "Тренажёр ПДД – roadrules-am" },
 		{
@@ -13,17 +13,21 @@ export function meta({}: Route.MetaArgs) {
 	];
 }
 
-export async function loader({ context }: Route.LoaderArgs) {
-	const cardId = getNextCardUUID();
-	return cardId;
-}
-
-export default function Home({}: Route.ComponentProps) {
+export default function Home() {
+	const location = useLocation();
 	const navigate = useNavigate();
-	const cardId = getNextCardUUID();
 	useEffect(() => {
-		navigate(`/questions/${cardId}`);
-	}, [cardId, navigate]);
+		if (location.pathname === "/") {
+			const cardId = getNextCardUUID();
+			navigate(`/questions/${cardId}`);
+		}
+	}, [navigate, location]);
 
-	return <p>Загрузка</p>;
+	return (
+		<div>
+			<a href="/">Тренажёр</a>
+			<a href="/questions">Вопросы</a>
+			<Outlet />
+		</div>
+	);
 }

app/routes/questions.tsx

@@ -0,0 +1,23 @@
+import CardsGrid from "~/cardsGrid/cardsGrid";
+import type { Route } from "./+types/questions";
+import { cardStore } from "~/hooks/useCardStore";
+
+export function meta() {
+	return [
+		{ title: "Вопросы – roadrules-am" },
+		{
+			name: "description",
+			content: "Подготовься к теоретическому экзамену в Армении",
+		},
+	];
+}
+
+export async function clientLoader() {
+	const { cards } = cardStore.getState();
+	return cards;
+}
+
+export default function Questions({ loaderData }: Route.ComponentProps) {
+	const cards = loaderData;
+	return <CardsGrid cards={cards} />;
+}