Practice app/feature/game platforms

practice-app/client/src/App.js

@@ -3,7 +3,11 @@ import React, {useState} from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import LandingPage from './pages/landingPage.js';
 import Elif from './pages/elif/elif.js';
-import Yunus from './pages/yunus/yunus.js';
+import GamePlatform from './pages/yunus/game_platform.js';
+import SearchGameForPlatform from './pages/yunus/search_screen.js';
+import ListGames from './pages/yunus/list_games.js';
+import AddPlatform from './pages/yunus/add_platform.js';
+import PlatformInfo from './pages/yunus/platform_info.js';
 import Melih from './pages/melih/melih.js';
 import Tayyip from './pages/tayyip/tayyip.js';
 import Furkan from './pages/furkan/furkan.js';
@@ -28,7 +32,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Layout><LandingPage /></Layout>} />
             <Route path="/elif" element={<Layout><Elif /></Layout>} />
-            <Route path="/yunus" element={<Layout><Yunus /></Layout>} />
+            <Route path="/game-platform" element={<Layout><GamePlatform /></Layout>} />
             <Route path="/favorite-games" element={<Layout><FavoriteGames /></Layout>} />
             <Route path="/melih" element={<Layout><Melih /></Layout>} />
             <Route path="/tayyip" element={<Layout><Tayyip /></Layout>} />
@@ -39,6 +43,10 @@ function App() {
             <Route path="/tuluyhan" element={<Layout><Tuluyhan /></Layout>} />
             <Route path="/signin" element={<Layout><Signin /></Layout>} />
             <Route path="/signup" element={<Layout><Signup /></Layout>} />
+            <Route path="/game-platform/search" element={<Layout><SearchGameForPlatform /></Layout>} />
+            <Route path="/game-platform/add_platforms" element={<Layout><AddPlatform /></Layout>} />
+            <Route path="/game-platform/list_searched" element={<Layout><ListGames /></Layout>} />
+            <Route path="/game-platform/platform_info" element={<Layout><PlatformInfo /></Layout>} />
           </Routes>
         </div>
       </Router>

practice-app/client/src/pages/landingPage.js

@@ -57,10 +57,10 @@ const LandingPage = () => {
   <Button
     variant="contained"
     component={Link}
-    to="/yunus"
+    to="/game-platform"
     sx={{ backgroundColor: '#616161', color: '#FFFFFF', minWidth: '260px'}}
   >
-    Yunus Emre Altuğ
+    Game Platform by Altug
   </Button>
   <Button
     variant="contained"

practice-app/client/src/pages/yunus/add_platform.js

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+
+const SubmitPlatform = () => {
+  const [keyword, setKeyword] = useState('');
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState('');
+  const handleSubmit = async () => {
+    try {
+      if (localStorage.getItem("accessToken")) {
+
+        const response = await axios.post('http://localhost:8080/api/game-platform/platform?title=' + keyword,{} ,{
+          headers: {
+           "Authorization": localStorage.getItem("accessToken"),
+          },
+        });
+        if (response.status==200) {
+          setMessage('Submission successful');
+          setOpen(true);
+        } else {
+          setMessage('Submission failed');
+          setOpen(true);
+        }
+      }
+    } catch (error) {
+      setMessage('An error occurred');
+      setOpen(true);
+    }
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '85vh',
+          padding: '2rem',
+          color: 'dark grey',
+        }}
+      >
+        <Box
+          sx={{
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            padding: '1rem',
+            borderRadius: '10px',
+            marginBottom: '1rem',
+          }}
+        >
+          <Typography
+            variant="h4"
+            component="p"
+            gutterBottom
+            sx={{
+              textAlign: 'center',
+              color: 'white',
+              fontFamily: 'Trebuchet MS',
+            }}
+          >
+            SUBMIT THE PLATFORM
+          </Typography>
+
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '1rem',
+              alignItems: 'center',
+            }}
+          >
+            <TextField
+              sx={{
+                label: { color: 'white', fontFamily: 'Trebuchet MS' },
+              }}
+              id="outlined-basic"
+              label="Give Your Keyword"
+              variant="outlined"
+              value={keyword}
+              onChange={(event) => setKeyword(event.target.value)}
+            />
+            <Button
+              variant="contained"
+              sx={{
+                backgroundColor: '#424242',
+                color: '#FFFFFF',
+                minWidth: '200px',
+                fontFamily: 'Trebuchet MS',
+              }}
+              onClick={handleSubmit}
+            >
+              Add
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+
+      <Snackbar open={open} autoHideDuration={3000} onClose={handleClose} message={message} />
+    </>
+  );
+};
+
+export default SubmitPlatform;

practice-app/client/src/pages/yunus/game_platform.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+
+
+
+
+const PlatformMainPage = () => {
+  return (
+
+    <>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '85vh',
+          padding: '2rem',
+          color: 'dark grey',
+        }}
+      >
+        <Box
+          sx={{
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            padding: '1rem',
+            borderRadius: '10px',
+            marginBottom: '1rem',
+          }}
+        >
+          <Typography variant="h4" component="p" gutterBottom sx={{ textAlign: 'center', color: "white", fontFamily: "Trebuchet MS" }}>
+            You Can Do These
+          </Typography>
+
+          <Box
+  sx={{
+    display: 'flex',
+    gap: '1rem',
+    justifyContent: 'center',
+    marginBottom: '1rem',
+  }}
+>
+  <Button
+    variant="contained"
+    component={Link}
+    to="/game-platform/search"
+    sx={{ backgroundColor: '#424242', color: '#FFFFFF' ,  minWidth: '260px', fontFamily: "Trebuchet MS"}}
+  >
+    Search A Game's Platform
+  </Button>
+  <Button
+    variant="contained"
+    component={Link}
+    to="/game-platform/add_platforms"
+    sx={{ backgroundColor: '#424242', color: '#FFFFFF', minWidth: '260px', fontFamily: "Trebuchet MS"}}
+  >
+    Add Your Platform
+  </Button>
+</Box>
+
+
+
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default PlatformMainPage;

practice-app/client/src/pages/yunus/list_games.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { useLocation, BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import axios from 'axios';
+import PlatformInfo from "./platform_info";
+
+const ListGames = () => {
+
+  const location = useLocation();
+
+  const [data, setData] = React.useState(null);
+
+  const handleClick = (id) => {
+    const link="http://localhost:8080/api/game-platform/game?id="+id;
+    axios
+      .get(link, {
+        headers: {
+          Authorization: localStorage.getItem("accessToken"),
+        },
+      })
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  return (
+    <div>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '85vh',
+          padding: '2rem',
+          color: 'dark grey',
+        }}
+      >
+        <Box
+          sx={{
+            backgroundColor: 'rgba(255, 255, 255, 0.4)',
+            padding: '1rem',
+            borderRadius: '10px',
+            marginBottom: '1rem',
+            justifyContent: 'center',
+          }}
+        >
+          {location.state.games.map((game, index) => (
+            <Button
+              sx={{
+                backgroundColor: "#424242",
+                padding: '1rem',
+                borderRadius: '10px',
+                marginBottom: '1rem',
+                color: '#FFFFFF',
+                width: '280px'
+              }}
+              key={index}
+              onClick={() => handleClick(game.game_id)}
+            >
+              {game.title}
+            </Button>
+          ))}
+          {data && <PlatformInfo data={data} />}
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+export default ListGames;

practice-app/client/src/pages/yunus/platform_info.js

@@ -0,0 +1,43 @@
+import React from "react";
+import Box from '@mui/material/Box';
+
+function PlatformInfo({ data }) {
+  console.log(data);
+  return (
+
+    <div>
+      <h2>{data.message} The Platforms Where You Can Play This Game:</h2>
+      {data.platforms.map((platform, index) => (
+        <div key={index}>
+          <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '5px',
+            padding: '2rem',
+            color: 'dark grey',
+          }}
+        >
+          <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '2rem',
+        color: 'dark grey',
+        backgroundColor:'rgba(0, 0, 0, 0.4)',
+      }}>
+      {platform.platform_name}
+    </Box>
+    </Box>
+
+          {/* vb. */}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default PlatformInfo;