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/application.js | 5 -- 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 --- app/javascript/controllers/application.js | 9 --- app/javascript/controllers/hello_controller.js | 7 -- app/javascript/controllers/index.js | 8 --- app/javascript/routes/index.jsx | 35 ---------- 14 files changed, 407 deletions(-) delete mode 100644 app/javascript/application.js 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 delete mode 100644 app/javascript/controllers/application.js delete mode 100644 app/javascript/controllers/hello_controller.js delete mode 100644 app/javascript/controllers/index.js delete mode 100644 app/javascript/routes/index.jsx (limited to 'app/javascript') diff --git a/app/javascript/application.js b/app/javascript/application.js deleted file mode 100644 index d635261..0000000 --- a/app/javascript/application.js +++ /dev/null @@ -1,5 +0,0 @@ -// Entry point for the build script in your package.json -import "@hotwired/turbo-rails" -import "./controllers" -//import * as bootstrap from "bootstrap" -import "./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(); -}); diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js deleted file mode 100644 index 1213e85..0000000 --- a/app/javascript/controllers/application.js +++ /dev/null @@ -1,9 +0,0 @@ -import { Application } from "@hotwired/stimulus" - -const application = Application.start() - -// Configure Stimulus development experience -application.debug = false -window.Stimulus = application - -export { application } diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js deleted file mode 100644 index 5975c07..0000000 --- a/app/javascript/controllers/hello_controller.js +++ /dev/null @@ -1,7 +0,0 @@ -import { Controller } from "@hotwired/stimulus" - -export default class extends Controller { - connect() { - this.element.textContent = "Hello World!" - } -} diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js deleted file mode 100644 index d0685d3..0000000 --- a/app/javascript/controllers/index.js +++ /dev/null @@ -1,8 +0,0 @@ -// This file is auto-generated by ./bin/rails stimulus:manifest:update -// Run that command whenever you add a new controller or create them with -// ./bin/rails generate stimulus controllerName - -import { application } from "./application" - -import HelloController from "./hello_controller" -application.register("hello", HelloController) diff --git a/app/javascript/routes/index.jsx b/app/javascript/routes/index.jsx deleted file mode 100644 index 1b778ef..0000000 --- a/app/javascript/routes/index.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; -import Home from "../components/Home"; -import Blogs from "../components/Blogs"; -import Games from "../components/Games"; -import Game from "../components/Game"; -import Layout from "../components/Layout"; - -export default function index() -{ - const [userData, setUserData] = useState({}); - const url = "/api/v1/auth/data"; - useEffect(() => { - fetch(url).then((response) => { - if(response.ok) { - return response.json(); - } - throw new Error("Network response was not ok."); - }).then((response) => setUserData(response.user_data));}, []); - // get user data here - // then pass it in as 'props' into the components - return (<> - {/*

{userData.login}

*/} - - - }> - } /> - } /> - } /> - } /> - - - - ); -} -- cgit v1.2.3