From 80d64e04441ced7caecd238ae232e749d8e0dddf Mon Sep 17 00:00:00 2001 From: realtradam Date: Tue, 21 May 2024 23:32:53 -0400 Subject: initial setup of seperating frontend --- src/components/App.jsx | 7 ++++ src/components/Blogs.jsx | 66 ++++++++++++++++++++++++++++++++ src/components/Button.jsx | 15 ++++++++ src/components/Game.jsx | 23 +++++++++++ src/components/GameCard.jsx | 26 +++++++++++++ src/components/Games.jsx | 93 +++++++++++++++++++++++++++++++++++++++++++++ src/components/Home.jsx | 43 +++++++++++++++++++++ src/components/Layout.jsx | 60 +++++++++++++++++++++++++++++ src/components/index.jsx | 10 +++++ 9 files changed, 343 insertions(+) create mode 100644 src/components/App.jsx create mode 100644 src/components/Blogs.jsx create mode 100644 src/components/Button.jsx create mode 100644 src/components/Game.jsx create mode 100644 src/components/GameCard.jsx create mode 100644 src/components/Games.jsx create mode 100644 src/components/Home.jsx create mode 100644 src/components/Layout.jsx create mode 100644 src/components/index.jsx (limited to 'src/components') diff --git a/src/components/App.jsx b/src/components/App.jsx new file mode 100644 index 0000000..da6a873 --- /dev/null +++ b/src/components/App.jsx @@ -0,0 +1,7 @@ +import React from "react"; +import Routes from "../routes"; + +export default (props) => { + return (); +} + diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx new file mode 100644 index 0000000..f52f286 --- /dev/null +++ b/src/components/Blogs.jsx @@ -0,0 +1,66 @@ +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 = "/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/Button.jsx b/src/components/Button.jsx new file mode 100644 index 0000000..de199d0 --- /dev/null +++ b/src/components/Button.jsx @@ -0,0 +1,15 @@ +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/Game.jsx b/src/components/Game.jsx new file mode 100644 index 0000000..8b80b8e --- /dev/null +++ b/src/components/Game.jsx @@ -0,0 +1,23 @@ +import React, { useState, useEffect } from "react"; +import { useParams } from "react-router-dom"; +//import { Link } from "react-router-dom"; +import GameCard from "./GameCard"; +import Button from "./Button"; + +//} /> + +//export default () => ( +export default function Games () { + let { user, game } = useParams(); +//http://localhost:3000/api/v1/game/realtradam/orc-arena-of-time/index.html + return( + <> +
+
+
Orc: Arena of Time
+ +
+
+ + ); +}; diff --git a/src/components/GameCard.jsx b/src/components/GameCard.jsx new file mode 100644 index 0000000..9cd815d --- /dev/null +++ b/src/components/GameCard.jsx @@ -0,0 +1,26 @@ +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/Games.jsx b/src/components/Games.jsx new file mode 100644 index 0000000..f1545b8 --- /dev/null +++ b/src/components/Games.jsx @@ -0,0 +1,93 @@ +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 = "/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) + 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('http://127.0.0.1:3000/api/v1/games', { + method: 'post', + body: formData, + }); + } + return( + <> +
+
+
Games
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ }/> +
+ +
+
+
+
+ { allGames } +
+ + + + + + +
+
+
+ + ); +}; diff --git a/src/components/Home.jsx b/src/components/Home.jsx new file mode 100644 index 0000000..863d81d --- /dev/null +++ b/src/components/Home.jsx @@ -0,0 +1,43 @@ +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('http://127.0.0.1:3000/api/v1/games', { + method: 'post', + body: formData, + }); + } + return( + <> +
+
+
Get To Know Me a Little
+
+
+
+

Debug! Again

+

+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 new file mode 100644 index 0000000..79e7813 --- /dev/null +++ b/src/components/Layout.jsx @@ -0,0 +1,60 @@ +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: "" }); + + // if the user tries to access the isolated domain then we redirect them + // this is NOT done for security, only for good UX + // rails serves the react app no matter what + // so the app would be broken when served on the isolated domain + const domain = window.location.host; + console.log(domain); + if(domain === "localhost:3000") + { + window.location.replace("http://127.0.0.1:3000"); + } + + return ( + <> +
+ + +
+
+
+
+
+
+
+ + + ) +}; diff --git a/src/components/index.jsx b/src/components/index.jsx new file mode 100644 index 0000000..0044916 --- /dev/null +++ b/src/components/index.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; + +document.addEventListener("turbo:load", () => { + const root = createRoot( + document.body.appendChild(document.createElement("div")) + ); + root.render(); +}); -- cgit v1.2.3