From 34346b1fd4fffd2571374f86b16084066dc4aa2d Mon Sep 17 00:00:00 2001 From: realtradam Date: Thu, 6 Jun 2024 19:24:45 -0400 Subject: add seperate uploading page and update match backend functionality --- src/App.jsx | 7 -- src/App.tsx | 7 ++ src/components/App.jsx | 7 -- src/components/Blogs.jsx | 66 ------------------- src/components/Blogs.tsx | 68 ++++++++++++++++++++ src/components/Button.jsx | 15 ----- src/components/Button.tsx | 16 +++++ src/components/Game.jsx | 20 ------ src/components/Game.tsx | 20 ++++++ src/components/GameCard.jsx | 26 -------- src/components/GameCard.tsx | 27 ++++++++ src/components/Games.jsx | 95 --------------------------- src/components/Games.tsx | 116 +++++++++++++++++++++++++++++++++ src/components/Home.jsx | 43 ------------- src/components/Home.tsx | 25 ++++++++ src/components/Layout.jsx | 49 -------------- src/components/Layout.tsx | 48 ++++++++++++++ src/components/UploadGame.tsx | 125 ++++++++++++++++++++++++++++++++++++ src/components/index.jsx | 10 --- src/controllers/application.js | 9 --- src/controllers/hello_controller.js | 7 -- src/controllers/index.js | 8 --- src/main.jsx | 12 ---- src/main.tsx | 12 ++++ src/routes/index.jsx | 38 ----------- src/routes/index.tsx | 40 ++++++++++++ src/types.ts | 5 ++ 27 files changed, 509 insertions(+), 412 deletions(-) delete mode 100644 src/App.jsx create mode 100644 src/App.tsx delete mode 100644 src/components/App.jsx delete mode 100644 src/components/Blogs.jsx create mode 100644 src/components/Blogs.tsx delete mode 100644 src/components/Button.jsx create mode 100644 src/components/Button.tsx delete mode 100644 src/components/Game.jsx create mode 100644 src/components/Game.tsx delete mode 100644 src/components/GameCard.jsx create mode 100644 src/components/GameCard.tsx delete mode 100644 src/components/Games.jsx create mode 100644 src/components/Games.tsx delete mode 100644 src/components/Home.jsx create mode 100644 src/components/Home.tsx delete mode 100644 src/components/Layout.jsx create mode 100644 src/components/Layout.tsx create mode 100644 src/components/UploadGame.tsx delete mode 100644 src/components/index.jsx delete mode 100644 src/controllers/application.js delete mode 100644 src/controllers/hello_controller.js delete mode 100644 src/controllers/index.js delete mode 100644 src/main.jsx create mode 100644 src/main.tsx delete mode 100644 src/routes/index.jsx create mode 100644 src/routes/index.tsx create mode 100644 src/types.ts (limited to 'src') diff --git a/src/App.jsx b/src/App.jsx deleted file mode 100644 index b594288..0000000 --- a/src/App.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; -import Routes from "./routes"; - -export default (props) => { - return (); -} - diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..cdd03ed --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,7 @@ +import React from "react"; +import Routes from "./routes"; + +export default function App () { + return (); +} + diff --git a/src/components/App.jsx b/src/components/App.jsx deleted file mode 100644 index da6a873..0000000 --- a/src/components/App.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; -import Routes from "../routes"; - -export default (props) => { - return (); -} - diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx deleted file mode 100644 index 2dc8f27..0000000 --- a/src/components/Blogs.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { Link, useNavigate } from "react-router-dom"; - -const Blogs = () => { - const navigate = useNavigate(); - const [blogs, setBlogs] = useState([]); - - useEffect(() => { - const url = `${import.meta.env.VITE_API_TITLE}/api/v1/blogs/index`; - fetch(url).then((response) => { - if (response.ok) { - return response.json(); - } - throw new Error("Network response was not ok."); - }).then((response) => setBlogs(response)).catch(() => navigate("/")); - }, []); - - const allBlogs = blogs.map((blog, index) => ( -
-
- {`${blog.name} -
-
{blog.name}
- - View Post - -
-
-
- )); - const noBlog = ( -
-

Nothing Yet!

-
- ); - - return ( - <> -
-
-

Welcome to my Blog

-

- Yup, this is my blog and stuff. Enjoy it :) -

-
-
-
-
-
- - Write New Blog - -
-
- {blogs.length > 0 ? allBlogs : noBlog} -
- - Home - -
-
- - ); -}; - -export default Blogs; diff --git a/src/components/Blogs.tsx b/src/components/Blogs.tsx new file mode 100644 index 0000000..863aa73 --- /dev/null +++ b/src/components/Blogs.tsx @@ -0,0 +1,68 @@ +//import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; +import { Link, useNavigate } from "react-router-dom"; + +const Blogs = () => { + const navigate = useNavigate(); + const [blogs, setBlogs] = useState([]); // eslint-disable-line @typescript-eslint/no-explicit-any + + + useEffect(() => { + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/blogs/index`; + fetch(url).then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }).then((response) => setBlogs(response)).catch(() => navigate("/")); + }, [navigate]); + + const allBlogs = blogs.map((blog, index) => ( +
+
+ {`${blog.name} +
+
{blog.name}
+ + View Post + +
+
+
+ )); + const noBlog = ( +
+

Nothing Yet!

+
+ ); + + return ( + <> +
+
+

Welcome to my Blog

+

+ Yup, this is my blog and stuff. Enjoy it :) +

+
+
+
+
+
+ + Write New Blog + +
+
+ {blogs.length > 0 ? allBlogs : noBlog} +
+ + Home + +
+
+ + ); +}; + +export default Blogs; diff --git a/src/components/Button.jsx b/src/components/Button.jsx deleted file mode 100644 index de199d0..0000000 --- a/src/components/Button.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; - -export default function Button ({ link, width = 36, height = 16, spinner = 4 }) -{ - return ( - <> -
-
- { link } -
-
- - ) -}; diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..b12b833 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,16 @@ +import React from "react"; +//import { Link } from "react-router-dom"; + +type ButtonProps = {link: React.ReactElement, width?: number, height?: number, spinner?: number}; +export default function Button ({ link , width = 36, height = 16, spinner = 4 }: ButtonProps) +{ + return ( + <> +
+
+ { link } +
+
+ + ); +} diff --git a/src/components/Game.jsx b/src/components/Game.jsx deleted file mode 100644 index a7bd007..0000000 --- a/src/components/Game.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { useParams } from "react-router-dom"; - -//} /> - -//export default () => ( -export default function Games () { - let { user, game } = useParams(); -//http://%{VITE_API_TITLE}/api/v1/game/realtradam/orc-arena-of-time/index.html - return( - <> -
-
-
{game}
- -
-
- - ); -}; diff --git a/src/components/Game.tsx b/src/components/Game.tsx new file mode 100644 index 0000000..51d5b3e --- /dev/null +++ b/src/components/Game.tsx @@ -0,0 +1,20 @@ +//import React, { useState, useEffect } from "react"; +import { useParams } from "react-router-dom"; + +//} /> + +//export default () => ( +export default function Games () { + const { game } = useParams(); +//http://%{VITE_API_TITLE}/api/v1/game/realtradam/orc-arena-of-time/index.html + return( + <> +
+
+
{game}
+ +
+
+ + ); +} diff --git a/src/components/GameCard.jsx b/src/components/GameCard.jsx deleted file mode 100644 index ac63160..0000000 --- a/src/components/GameCard.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -//import { Link } from "react-router-dom"; - -//game = { -// card_img: "", -// char_img: "", -// title_img: "" -//} - -export default function GameCard ({ link = "./", width = "72", game = { card_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg", char_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-character.png", title_img: "https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" } }) -{ - - return ( - <> - -
-
- -
- - -
- - - ) -}; diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx new file mode 100644 index 0000000..1f5e766 --- /dev/null +++ b/src/components/GameCard.tsx @@ -0,0 +1,27 @@ +//import React from "react"; +//import { Link } from "react-router-dom"; +import { GameCardProps } from "../types"; + +//game = { +// card_img: "", +// char_img: "", +// title_img: "" +//} + +export default function GameCard ({ link, game }: GameCardProps) +{ + + return ( + <> + +
+
+ +
+ + +
+ + + ); +} diff --git a/src/components/Games.jsx b/src/components/Games.jsx deleted file mode 100644 index 173b3b7..0000000 --- a/src/components/Games.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import React, { useState, useEffect } from "react"; -//import { Link } from "react-router-dom"; -import GameCard from "./GameCard"; -import Button from "./Button"; - -//export default () => ( -export default function Games () { - const [games, setGames] = useState([]); - useEffect(() => { - const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games`; - fetch(url).then((response) => { - if (response.ok) { - return response.json(); - } - throw new Error("Network response was not ok."); - }).then((response) => setGames(response))//.catch(() => navigate("/")); - }, []); - const allGames = games.map((game) => ( - - )); - var handleSubmit = (e) => { - e.preventDefault() //stops submit from happening - const form = e.target; - const formData = new FormData() - formData.append('game[title]', form.title.value) - formData.append('game[img_rendering]', form.img_rendering.value) - for(let i =0; i < form.game_files.files.length; i++) - { - formData.append('game[game_files][]', form.game_files.files[i], form.game_files.files[i].value); - } - formData.append('game[card_img]', form.card_img.files[0], form.card_img.value); - formData.append('game[char_img]', form.char_img.files[0], form.char_img.value); - formData.append('game[title_img]', form.title_img.files[0], form.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( - <> -
-
-
Games
-
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- }/> -
- -
-
-
-
-
- { allGames } -
-
-
- - ); -}; diff --git a/src/components/Games.tsx b/src/components/Games.tsx new file mode 100644 index 0000000..cfa6925 --- /dev/null +++ b/src/components/Games.tsx @@ -0,0 +1,116 @@ +import { useState, useEffect, FormEvent } from "react"; +//import { Link } from "react-router-dom"; +import GameCard from "./GameCard"; +import Button from "./Button"; +import { GameType } from "../types"; + + +export default function Games () { + const [games, setGames] = useState([]); + + // old method + useEffect(() => { + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games`; + fetch(url).then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }).then((response) => setGames(response)); //.catch(() => navigate("/")); + }, []); + + const allGames = games.map((game) => ( + + )); + + const handleSubmit = (e: FormEvent) => { + 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( + <> +
+
+
Games
+
+
+
+
+
+ + +
+
+ + +
+ { /*
+ + +
*/ } +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ }/> +
+ +
+
+
+
+
+ { allGames } +
+
+
+ + ); +} diff --git a/src/components/Home.jsx b/src/components/Home.jsx deleted file mode 100644 index c1fb689..0000000 --- a/src/components/Home.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { } from "react"; -//import { Link } from "react-router-dom"; -import GameCard from "./GameCard"; - -//export default () => ( -export default function Home () { - var handleSubmit = (e) => { - e.preventDefault() //stops submit from happening - - const formData = new FormData() - formData.append('game[title]', e.target.title.value) - formData.append('game[game_file]', e.target.game_file.files[0], e.target.game_file.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( - <> -
-
-
Work In Progress
-
-
-
-

API at: { import.meta.env.VITE_API_TITLE }

-

-Ea optio vitae culpa voluptatem consectetur. Ab quisquam sed ipsum. Perspiciatis minus odit quas qui consequuntur dicta reiciendis a. Nihil minima sed aliquam. -

-
-
-
-
-
-
- - ); -}; diff --git a/src/components/Home.tsx b/src/components/Home.tsx new file mode 100644 index 0000000..7430549 --- /dev/null +++ b/src/components/Home.tsx @@ -0,0 +1,25 @@ +//import { Link } from "react-router-dom"; + +//export default () => ( +export default function Home () { + return( + <> +
+
+
Work In Progress
+
+
+
+

API at: { import.meta.env.VITE_API_TITLE }

+

+Ea optio vitae culpa voluptatem consectetur. Ab quisquam sed ipsum. Perspiciatis minus odit quas qui consequuntur dicta reiciendis a. Nihil minima sed aliquam. +

+
+
+
+
+
+
+ + ); +} diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx deleted file mode 100644 index 06df03a..0000000 --- a/src/components/Layout.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react"; -import { Outlet, Link } from "react-router-dom"; -import Button from "./Button"; -export default function Layout ({userData}) -{ - console.log(userData); - //const [userData, setUserData] = useState({ name: "" }); - - return ( - <> -
- - -
-
-
-
-
-
-
- - - ) -}; diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..50a3fd7 --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,48 @@ +import { Outlet, Link } from "react-router-dom"; +import Button from "./Button"; + +export type userData = { userData: { name: string } }; + +export default function Layout ({userData}: userData) +{ + return ( + <> +
+ + +
+
+
+
+
+
+
+ + + ); +} diff --git a/src/components/UploadGame.tsx b/src/components/UploadGame.tsx new file mode 100644 index 0000000..4801654 --- /dev/null +++ b/src/components/UploadGame.tsx @@ -0,0 +1,125 @@ +import { useState, FormEvent } from "react"; +import Button from "./Button"; +import ReactMarkdown from 'react-markdown'; + + +export default function UploadGame () { + const [markdownInput, setMarkdownInput] = useState(""); + + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); //stops submit from happening + + const target = e.target as typeof e.target & { + title: { value: string }; + img_rendering: { value: string }; + github_link: { 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 }; + status: { value: number }; + }; + + 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); + formData.append('game[github_link]', target.github_link.value); + formData.append('game[status]', `${target.status.value}`); + + fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, { + credentials: 'include', + method: 'post', + body: formData, + }); + }; + return( + <> +
+
+
Upload Game
+
+
+
+
+
+ + +
+
+
+ +