Question tags in creation menu and model

src/pages/QuestionCreator/ChoiceQuestionCreator.tsx

@@ -6,12 +6,14 @@ export const ChoiceQuestionCreator = () => {
 	const [title, setTitle] = useState("")
 	const [choices, setChoices] = useState("")
 	const [answers, setAnswers] = useState("")
+	const [tags, setTags] = useState("")
 
 	const createQuestionHandler = () => {
 		const question = {
 			title,
-			choices: splitAndTrim(choices, ","),
-			answers: splitAndTrim(answers, ","),
+			choices: splitAndTrim(choices),
+			answers: splitAndTrim(answers),
+			tags: splitAndTrim(tags),
 			...initializeEmptyQuestionFields(),
 		}
 
@@ -20,18 +22,10 @@ export const ChoiceQuestionCreator = () => {
 
 	return (
 		<div>
-			<input
-				placeholder="Question"
-				onChange={(e) => setTitle(e.target.value)}
-			/>
-			<input
-				placeholder="Description"
-				onChange={(e) => setChoices(e.target.value)}
-			/>
-			<input
-				placeholder="Réponses"
-				onChange={(e) => setAnswers(e.target.value)}
-			/>
+			<input placeholder="Question" onChange={(e) => setTitle(e.target.value)} />
+			<input placeholder="Choix" onChange={(e) => setChoices(e.target.value)} />
+			<input placeholder="Réponses" onChange={(e) => setAnswers(e.target.value)} />
+			<input placeholder="Tags" onChange={(e) => setTags(e.target.value)} />
 			<button onClick={createQuestionHandler}>Créer</button>
 		</div>
 	)

src/pages/QuestionCreator/CompleteQuestionCreator.tsx

@@ -6,12 +6,14 @@ export const CompleteQuestionCreator = () => {
 	const [title, setTitle] = useState("")
 	const [description, setDescription] = useState("")
 	const [answers, setAnswers] = useState("")
+	const [tags, setTags] = useState("")
 
 	const createQuestionHandler = () => {
 		const question = {
 			title,
 			description,
 			answers: splitAndTrim(answers, ","),
+			tags: splitAndTrim(tags),
 			...initializeEmptyQuestionFields(),
 		}
 
@@ -20,18 +22,10 @@ export const CompleteQuestionCreator = () => {
 
 	return (
 		<div>
-			<input
-				placeholder="Question"
-				onChange={(e) => setTitle(e.target.value)}
-			/>
-			<input
-				placeholder="Description"
-				onChange={(e) => setDescription(e.target.value)}
-			/>
-			<input
-				placeholder="Réponses"
-				onChange={(e) => setAnswers(e.target.value)}
-			/>
+			<input placeholder="Question" onChange={(e) => setTitle(e.target.value)} />
+			<input placeholder="Description" onChange={(e) => setDescription(e.target.value)} />
+			<input placeholder="Réponses" onChange={(e) => setAnswers(e.target.value)} />
+			<input placeholder="Tags" onChange={(e) => setTags(e.target.value)} />
 			<button onClick={createQuestionHandler}>Créer</button>
 		</div>
 	)

src/pages/QuestionCreator/SimpleQuestionCreator.tsx

@@ -5,11 +5,13 @@ import { initializeEmptyQuestionFields, splitAndTrim } from "../../utils/utils"
 export const SimpleQuestionCreator = () => {
 	const [title, setTitle] = useState("")
 	const [answers, setAnswers] = useState("")
+	const [tags, setTags] = useState("")
 
 	const createQuestionHandler = () => {
 		const question = {
 			title,
-			answers: splitAndTrim(answers, ","),
+			answers: splitAndTrim(answers),
+			tags: splitAndTrim(tags),
 			...initializeEmptyQuestionFields(),
 		}
 
@@ -18,14 +20,9 @@ export const SimpleQuestionCreator = () => {
 
 	return (
 		<div>
-			<input
-				placeholder="Question"
-				onChange={(e) => setTitle(e.target.value)}
-			/>
-			<input
-				placeholder="Réponses"
-				onChange={(e) => setAnswers(e.target.value)}
-			/>
+			<input placeholder="Question" onChange={(e) => setTitle(e.target.value)} />
+			<input placeholder="Réponses" onChange={(e) => setAnswers(e.target.value)} />
+			<input placeholder="Tags" onChange={(e) => setTags(e.target.value)} />
 			<button onClick={createQuestionHandler}>Créer</button>
 		</div>
 	)

src/pages/game/GameController.tsx

@@ -65,6 +65,7 @@ export const GameController = () => {
 				setQuestionIndex(game.questionIndex)
 			}
 		})
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [])
 
 	if (gameId === undefined) {
@@ -82,7 +83,7 @@ export const GameController = () => {
 				<div>
 					<h1>Nouvelle partie</h1>
 					<LobbySettings gameId={gameId} />
-					<LobbyPlayers gameId={gameId} usernames={usernames} />
+					<LobbyPlayers usernames={usernames} />
 				</div>
 			)}
 		</div>

src/pages/game/LobbyPlayers.tsx

@@ -1,13 +1,11 @@
 type LobbyPlayersProps = {
-	gameId: string
 	usernames: string[]
 }
 
 export const LobbyPlayers = (props: LobbyPlayersProps) => {
 	return (
 		<div>
 			<h2>Joueurs</h2>
-			<div>Game id : {props.gameId}</div>
 			<ul>
 				{props.usernames.map((username) => (
 					<li>{username}</li>

src/services/games-store.ts

@@ -45,26 +45,43 @@ export async function createGame() {
 	return gameRef.id
 }
 
+/**
+ * Update data from an existing game
+ * @param id - Game id
+ * @param data - Object on filepath format ["a.b":c]
+ * @returns
+ */
 export async function updateGame(id: string, data: object): Promise<StoreResponse<Game>> {
+	// Verify game existance
 	if (!(await existsGameById(id))) {
 		return getErrorStoreResponse(`Game ${id} does not exist`)
 	}
-
-	// Update data
+	// Update game data
 	console.log(`Update Game : ${id} ${data}`)
 	const gameRef = doc(db, `games/${id}`)
 	await updateDoc(gameRef, data)
 	return getSuccessStoreResponse([])
 }
 
+/**
+ * Verify game existance by fetching from db
+ * @param id
+ * @returns
+ */
 export async function existsGameById(id: string) {
 	const response = await findGameById(id)
 	return response.success
 }
 
 /* Domain methods */
 
+/**
+ * Starts game by finishing the setup
+ * @param id
+ * @returns
+ */
 export async function startGame(id: string) {
+	// TODO: Add setup logic
 	const response = await updateGame(id, { ["isSetup"]: true })
 	return response
 }

src/services/questions-store.ts

@@ -1,40 +1,44 @@
-import { Query, addDoc, collection, documentId, query, where } from "firebase/firestore"
+import { Query, addDoc, collection, documentId, limit, query, where } from "firebase/firestore"
 import { db } from "../config/firebase"
-import { Question, QuestionSchema } from "../utils/types"
+import { Question, QuestionSchema, StoreResponse } from "../utils/types"
 import { isValideQuestion } from "./validation"
 import { findDataByQuery } from "./store"
+import { getErrorStoreResponse, getSuccessStoreResponse } from "../utils/utils"
 
 // References to the collections
 const questionsRef = collection(db, "questions")
 
 async function findQuestionByQuery(q: Query) {
-	const questions = await findDataByQuery(q, QuestionSchema)
-	return questions
+	const response: StoreResponse<Question> = await findDataByQuery(q, QuestionSchema)
+	return response
 }
 
 export async function findAllQuestions() {
 	const q = query(questionsRef)
-	const data = await findQuestionByQuery(q)
-	return data
+	const response = await findQuestionByQuery(q)
+	return response
 }
 
 export async function findQuestionById(questionId: string) {
 	const q = query(questionsRef, where(documentId(), "==", questionId))
-	const data = await findQuestionByQuery(q)
-	return data
+	const response = await findQuestionByQuery(q)
+	return response
 }
 
-export async function findQuestionByTags(tags: string[]) {
-	const q = query(questionsRef, where("tags", "array-contains-any", tags))
-	const data = await findQuestionByQuery(q)
-	return data
-}
-
-export const createQuestion = async (question: Question) => {
+export async function createQuestion(question: Question) {
 	if (!isValideQuestion(question)) {
-		return
+		return getErrorStoreResponse("Not valide question")
 	}
 
 	const data = await addDoc(questionsRef, question)
-	return data.id
+	return getSuccessStoreResponse([data.id])
+}
+
+/* Domain methods */
+
+export async function findQuestionByTags(tags: string[], nbQuestions: number = 10) {
+	const q = query(questionsRef, where("tags", "array-contains-any", tags), limit(nbQuestions))
+
+	const response = await findQuestionByQuery(q)
+	return response
 }

src/utils/types.ts

@@ -2,7 +2,7 @@ import { z } from "zod"
 
 // Questions Schemas
 const QuestionBaseSchema = z.object({
-	title: z.string().min(1).max(30),
+	title: z.string().min(1).max(100),
 	rating: z.object({
 		like: z.number(),
 		dislike: z.number(),
@@ -19,7 +19,7 @@ export const SimpleQuestionSchema = QuestionBaseSchema.extend({
 })
 
 export const CompleteQuestionSchema = QuestionBaseSchema.extend({
-	description: z.string().min(1),
+	description: z.string().min(1).max(250),
 	answers: z.array(z.string().trim()).min(1).max(10),
 })
 

src/utils/utils.ts

@@ -16,7 +16,6 @@ export function initializeEmptyQuestionFields() {
 	return {
 		rating: { like: 0, dislike: 0 },
 		difficulty: { win: 0, lose: 0 },
-		tags: [],
 	}
 }
 
@@ -31,6 +30,8 @@ export function initializeEmptyGameData(): GameData {
 	}
 }
 
+export function initializeEmptyQuestionData() {}
+
 export function getSuccessStoreResponse<DataType>(data: DataType[]): StoreResponse<DataType> {
 	return {
 		success: true,
@@ -51,6 +52,6 @@ export function getErrorStoreResponse<DataType>(error: unknown): StoreResponse<D
  * @param separator
  * @returns
  */
-export function splitAndTrim(str: string, separator: string) {
+export function splitAndTrim(str: string, separator: string = ",") {
 	return str.split(separator).map((item) => item.trim())
 }