add tags

3 files changed, 54 insertions, 85 deletions

diff --git a/src/components/Games.tsx b/src/components/Games.tsx
index cfa6925..4ca8def 100644
--- a/src/components/Games.tsx
+++ b/src/components/Games.tsx
@@ -8,7 +8,6 @@ import { GameType } from "../types";
 export default function Games () {
 	const [games, setGames] = useState<GameType[]>([]);
 
-	// old method
 	useEffect(() => {
 		const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games`;
 		fetch(url).then((response) => {
@@ -23,88 +22,14 @@ export default function Games () {
 		<GameCard link={`/game/${game.titleSlug}`} game={game} key={game.id}/>
 	));
 
-	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-		e.preventDefault(); //stops submit from happening
-
-		const target = e.target as typeof e.target & {
-			title: { value: string };
-			img_rendering: { value: string };
-			//game_files: { files: FileList };
-			zip: { value: string, files: FileList };
-			card_img: { value: string, files: FileList };
-			char_img: { value: string, files: FileList };
-			title_img: { value: string, files: FileList };
-		};
-
-		//const form = e.target;
-		const formData = new FormData();
-		formData.append('game[title]', target.title.value);
-		formData.append('game[img_rendering]', target.img_rendering.value);
-		//for(let i =0; i < target.game_files.files.length; i++)
-		//{
-		//formData.append('game[game_files][]', target.game_files.files[i], target.game_files.files[i].name);
-		//}
-		formData.append('game[zip]', target.zip.files[0], target.zip.value);
-		formData.append('game[card_img]', target.card_img.files[0], target.card_img.value);
-		formData.append('game[char_img]', target.char_img.files[0], target.char_img.value);
-		formData.append('game[title_img]', target.title_img.files[0], target.title_img.value);
-
-		//for (var pair of formData.entries()) {
-		//	//console.log(pair[0] + ', ' + pair[1])
-		//};
-
-		fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, {
-			method: 'post',
-			body: formData,
-		});
-	};
 	return(
 		<>
 		<div>
 		<div className="flex flex-col gap-16 max-w-6xl shrink">
 			<div className="title font-bold text-6xl font-title">Games</div>
-			<div className="">
 				<div className="jumbotron jumbotron-fluid bg-transparent">
 					<div className="container secondary-color">
-				<form onSubmit={handleSubmit} action="/upload" method="post" className="flex flex-col gap-4">
-				<div>
-				<label>Title</label>
-				<input type="text" name="title" />
-				</div>
-				<div>
-				<label>Image Rendering</label>
-				<select name="img_rendering">
-					<option value="pixelated">Pixelated</option>
-					<option value="crisp-edges">Crisp Edges</option>
-				</select>
-				</div>
-				{ /*<div>
-				<label>Files</label>
-				<input type="file" multiple name="game_files" />
-				</div> */ }
-				<div>
-				<label>Zip</label>
-				<input type="file" name="zip" />
 				</div>
-				<div>
-				<label>Card Image</label>
-				<input type="file" name="card_img" />
-				</div>
-				<div>
-				<label>Character Image</label>
-				<input type="file" name="char_img" />
-				</div>
-				<div>
-				<label>Title Image</label>
-				<input type="file" name="title_img" />
-				</div>
-				<div style={{ boxShadow: 'rgba(255,255,255,.1) 0 1px 0,rgba(0,0,0,.8) 0 1px 7px 0 inset' }} className="p-[5px] w-min h-min bg-stone-800 rounded-[5px]">
-					<Button width={ 28 } height={ 12 } link={ <button type="submit" className="w-28 h-12 bg-stone-transparent text-stone-50 rounded">Submit</button> }/>
-				</div>
-				
-				</form>
-				</div>
-		</div>
 			</div>
 			<div className="flex flex-row flex-wrap gap-20 justify-around">
 			{ allGames }
diff --git a/src/components/UploadGame.tsx b/src/components/UploadGame.tsx
index 4801654..690834d 100644
--- a/src/components/UploadGame.tsx
+++ b/src/components/UploadGame.tsx
@@ -1,10 +1,35 @@
-import { useState, FormEvent } from "react";
+import { useState, useEffect, FormEvent } from "react";
 import Button from "./Button";
 import ReactMarkdown from 'react-markdown';
+import { TagPicker } from 'rsuite';
 
+type platformTag = {
+	label: string
+	value: string
+};
+
+type platformTagRaw = {
+	name: string
+};
 
 export default function UploadGame () {
 	const [markdownInput, setMarkdownInput] = useState<string>("");
+	const [platformTags, setPlatformTags] = useState<platformTag[]>([]);
+	const [platformTagsData, setPlatformTagsData] = useState<string[]>([]);
+
+	useEffect(() => {
+		const url = `${import.meta.env.VITE_API_TITLE}/api/v1/tags?tag_type=platform`;
+		fetch(url).then((response) => {
+			if (response.ok) {
+				return response.json();
+			}
+			throw new Error("Network response was not ok.");
+		}).then((response) => setPlatformTags(
+			response.map(
+				(item: platformTagRaw) => ({ label: item.name, value: item.name })
+			)
+		)); //.catch(() => navigate("/"));
+	}, []);
 
 	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
 		e.preventDefault(); //stops submit from happening
@@ -34,6 +59,13 @@ export default function UploadGame () {
 		formData.append('game[title_img]', target.title_img.files[0], target.title_img.value);
 		formData.append('game[github_link]', target.github_link.value);
 		formData.append('game[status]', `${target.status.value}`);
+		console.log("before the for loop");
+		for(let i = 0; i < platformTagsData.length; i++)
+		{
+			console.log(platformTagsData[i]);
+			formData.append('game[platform_tag][]', platformTagsData[i]);
+		}
+		console.log("after the for loop");
 
 		fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, {
 			credentials: 'include',
@@ -61,7 +93,7 @@ export default function UploadGame () {
 					className="min-h-32 grow p-4"
 					name="description"
 					value={markdownInput}
-					onChange={(e) => setMarkdownInput(e.target.value)}
+					onChange={(data) => setMarkdownInput(data.target.value)}
 				/>
 				</div>
 				<div className="flex flex-col">
@@ -77,6 +109,14 @@ export default function UploadGame () {
 				<input type="text" name="github_link" />
 				</div>
 				<div className="flex flex-col">
+				<label>Tags</label>
+				<TagPicker
+					data={platformTags}
+					style={{ width: 300 }}
+					onChange={(items) => setPlatformTagsData(items)}
+				/>
+				</div>
+				<div className="flex flex-col">
 				<label>Image Rendering</label>
 				<select name="img_rendering">
 					<option value="crisp-edges">Crisp Edges</option>
diff --git a/src/main.tsx b/src/main.tsx
index 2c43ef2..bd96520 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,12 +1,16 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { CustomProvider } from 'rsuite';
+import App from './App.tsx';
+import 'rsuite/dist/rsuite-no-reset.min.css'; 
+import './index.css';
 
  // null assertion for tsx
 //ReactDOM.createRoot(document.getElementById('root')!).render(
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+	<React.StrictMode>
+		<CustomProvider>
+			<App />
+		</CustomProvider>
+	</React.StrictMode>,
+);