From 6cf41b4a5c55c91974e31ac032d969c7481b3e80 Mon Sep 17 00:00:00 2001 From: realtradam Date: Wed, 22 May 2024 14:59:24 -0400 Subject: extract frontend --- app/javascript/components/App.jsx | 7 --- app/javascript/components/Blogs.jsx | 66 ------------------------ app/javascript/components/Button.jsx | 15 ------ app/javascript/components/Game.jsx | 23 --------- app/javascript/components/GameCard.jsx | 26 ---------- app/javascript/components/Games.jsx | 93 ---------------------------------- app/javascript/components/Home.jsx | 43 ---------------- app/javascript/components/Layout.jsx | 60 ---------------------- app/javascript/components/index.jsx | 10 ---- 9 files changed, 343 deletions(-) delete mode 100644 app/javascript/components/App.jsx delete mode 100644 app/javascript/components/Blogs.jsx delete mode 100644 app/javascript/components/Button.jsx delete mode 100644 app/javascript/components/Game.jsx delete mode 100644 app/javascript/components/GameCard.jsx delete mode 100644 app/javascript/components/Games.jsx delete mode 100644 app/javascript/components/Home.jsx delete mode 100644 app/javascript/components/Layout.jsx delete mode 100644 app/javascript/components/index.jsx (limited to 'app/javascript/components') diff --git a/app/javascript/components/App.jsx b/app/javascript/components/App.jsx deleted file mode 100644 index da6a873..0000000 --- a/app/javascript/components/App.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; -import Routes from "../routes"; - -export default (props) => { - return (); -} - diff --git a/app/javascript/components/Blogs.jsx b/app/javascript/components/Blogs.jsx deleted file mode 100644 index f52f286..0000000 --- a/app/javascript/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 = "/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/app/javascript/components/Button.jsx b/app/javascript/components/Button.jsx deleted file mode 100644 index de199d0..0000000 --- a/app/javascript/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/app/javascript/components/Game.jsx b/app/javascript/components/Game.jsx deleted file mode 100644 index 8b80b8e..0000000 --- a/app/javascript/components/Game.jsx +++ /dev/null @@ -1,23 +0,0 @@ -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/app/javascript/components/GameCard.jsx b/app/javascript/components/GameCard.jsx deleted file mode 100644 index 9cd815d..0000000 --- a/app/javascript/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/app/javascript/components/Games.jsx b/app/javascript/components/Games.jsx deleted file mode 100644 index f1545b8..0000000 --- a/app/javascript/components/Games.jsx +++ /dev/null @@ -1,93 +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 = "/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/app/javascript/components/Home.jsx b/app/javascript/components/Home.jsx deleted file mode 100644 index 863d81d..0000000 --- a/app/javascript/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('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/app/javascript/components/Layout.jsx b/app/javascript/components/Layout.jsx deleted file mode 100644 index 79e7813..0000000 --- a/app/javascript/components/Layout.jsx +++ /dev/null @@ -1,60 +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: "" }); - - // 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/app/javascript/components/index.jsx b/app/javascript/components/index.jsx deleted file mode 100644 index 0044916..0000000 --- a/app/javascript/components/index.jsx +++ /dev/null @@ -1,10 +0,0 @@ -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