Skip to content

Commit

Permalink
Merge pull request #726 from bounswe/feature/FE/712/edit-game
Browse files Browse the repository at this point in the history 
Edit Game
  • Loading branch information
@mtkamiloglu
mtkamiloglu authored Dec 16, 2023
2 parents 3f5a9e1 + 6374fe5 commit bbe7c40
Show file tree
Hide file tree
Showing 3 changed files with 207 additions and 52 deletions.
203 changes: 154 additions & 49 deletions ludos/frontend/src/components/CreateGameForum.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import Chip from "@mui/material/Chip";
Expand All @@ -15,7 +15,7 @@ import {
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const CreateGameForm = () => {
const CreateGameForm = (formComp) => {
const convertToSlug = (text) => {
return text
.toString()
Expand Down Expand Up @@ -102,14 +102,84 @@ const CreateGameForm = () => {
"macOS",
"Linux",
"PlayStation",
"PlayStation 2",
"PlayStation 3",
"PlayStation 4",
"PlayStation 5",
"Xbox",
"Xbox 360",
"Xbox One",
"Xbox Series X",
"Xbox Series S",
"Nintendo Switch",
"Nintendo Entertainment System (NES)",
"Super Nintendo Entertainment System (SNES)",
"Nintendo 64",
"GameCube",
"Wii",
"Wii U",
"Game Boy",
"Game Boy Color",
"Game Boy Advance",
"Nintendo DS",
"Nintendo 3DS",
"Sega Master System",
"Sega Genesis",
"Sega Saturn",
"Sega Dreamcast",
"Atari 2600",
"Atari 5200",
"Atari 7800",
"Atari Lynx",
"Neo Geo",
"TurboGrafx-16",
"Intellivision",
"ColecoVision",
"Magnavox Odyssey",
"Commodore 64",
"Amiga",
"ZX Spectrum",
"MSX",
"Oculus Rift",
"HTC Vive",
"PlayStation VR",
"Oculus Quest",
"Google Stadia",
"Amazon Luna",
"Steam Deck",
"Apple Arcade",
"Game & Watch",
"Pokémon Mini",
"Commodore VIC-20",
"Atari Jaguar",
"3DO Interactive Multiplayer",
"Philips CD-i",
"WonderSwan",
"WonderSwan Color",
"Tapwave Zodiac",
"N-Gage",
"GP32",
"ZX81",
"Amstrad CPC",
"TRS-80",
"Sharp X68000",
"Fairchild Channel F",
"Bally Astrocade",
"Vectrex",
"Board Game",
"VR",
"Card Game",
// Add more platforms as needed
];
const [currentStep, setCurrentStep] = useState(1);
const totalSteps = 4;

useEffect(() => {
if (formComp.formData !== null) {
setFormData(formComp.formData);
setIsTagSelected(formComp.formData.tags.length > 0);
}
}, []);

const handleInputChange = (e) => {
const { name, value } = e.target;

Expand Down Expand Up @@ -188,40 +258,75 @@ const CreateGameForm = () => {
return; // Prevent form submission
}

// Replace 'your-api-endpoint' with the actual endpoint
const apiUrl = `http://${process.env.REACT_APP_API_URL}/game`;
if (formComp.formData !== null) {
const apiUrl = `http://${process.env.REACT_APP_API_URL}/game/${formComp.formData.id}/edit`;

axios
.post(apiUrl, formData, {
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
// Game created successfully
toast.success("Kudos to you! Game is created", {
position: "top-right",
autoClose: 3000, // 3 seconds
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
axios
.put(apiUrl, formData, {
headers: {
Authorization: "Bearer " + localStorage.getItem("accessToken"),
},
})
.then((response) => {
// Game created successfully
toast.success("Kudos to you! Game is edited", {
position: "top-right",
autoClose: 3000, // 3 seconds
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
});
console.log("Game edited successfully:", response.data);
navigate(`/game/${convertToSlug(formData.title)}`);
})
.catch((error) => {
// Error creating game
toast.error("Game creation failed", {
position: "top-right",
autoClose: 3000, // 3 seconds
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
});
console.error("Error creating game:", error);
});
console.log("Game created successfully:", response.data);
navigate(`/game/${convertToSlug(formData.title)}`);
})
.catch((error) => {
// Error creating game
toast.error("Game creation failed", {
position: "top-right",
autoClose: 3000, // 3 seconds
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
} else {
const apiUrl = `http://${process.env.REACT_APP_API_URL}/game`;

axios
.post(apiUrl, formData, {
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
// Game created successfully
toast.success("Kudos to you! Game is created", {
position: "top-right",
autoClose: 3000, // 3 seconds
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
});
console.log("Game created successfully:", response.data);
navigate(`/game/${convertToSlug(formData.title)}`);
})
.catch((error) => {
// Error creating game
toast.error("Game creation failed", {
position: "top-right",
autoClose: 3000, // 3 seconds
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
});
console.error("Error creating game:", error);
});
console.error("Error creating game:", error);
});
}
};

const renderStepForm = () => {
Expand Down Expand Up @@ -447,55 +552,55 @@ const CreateGameForm = () => {
<TextField
label="CPU"
name="systemRequirements-minimum-CPU"
value={formData.systemRequirements.minimum.CPU}
value={formData.systemRequirements?.minimum?.CPU}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="RAM"
name="systemRequirements-minimum-RAM"
value={formData.systemRequirements.minimum.RAM}
value={formData.systemRequirements?.minimum?.RAM}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="GPU"
name="systemRequirements-minimum-GPU"
value={formData.systemRequirements.minimum.GPU}
value={formData.systemRequirements?.minimum?.GPU}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="Operating System"
name="systemRequirements-minimum-OS"
value={formData.systemRequirements.minimum.OS}
value={formData.systemRequirements?.minimum?.OS}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="DirectX"
name="systemRequirements-minimum-DirectX"
value={formData.systemRequirements.minimum.DirectX}
value={formData.systemRequirements?.minimum?.DirectX}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="Storage"
name="systemRequirements-minimum-Storage"
value={formData.systemRequirements.minimum.Storage}
value={formData.systemRequirements?.minimum?.Storage}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="Network"
name="systemRequirements-minimum-Network"
value={formData.systemRequirements.minimum.Network}
value={formData.systemRequirements?.minimum?.Network}
onChange={handleInputChange}
fullWidth
margin="normal"
Expand All @@ -508,55 +613,55 @@ const CreateGameForm = () => {
<TextField
label="CPU"
name="systemRequirements-recommended-CPU"
value={formData.systemRequirements.recommended.CPU}
value={formData.systemRequirements?.recommended?.CPU}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="RAM"
name="systemRequirements-recommended-RAM"
value={formData.systemRequirements.recommended.RAM}
value={formData.systemRequirements?.recommended?.RAM}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="GPU"
name="systemRequirements-recommended-GPU"
value={formData.systemRequirements.recommended.GPU}
value={formData.systemRequirements?.recommended?.GPU}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="Operating System"
name="systemRequirements-recommended-OS"
value={formData.systemRequirements.recommended.OS}
value={formData.systemRequirements?.recommended?.OS}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="DirectX"
name="systemRequirements-recommended-DirectX"
value={formData.systemRequirements.recommended.DirectX}
value={formData.systemRequirements?.recommended?.DirectX}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="Storage"
name="systemRequirements-recommended-Storage"
value={formData.systemRequirements.recommended.Storage}
value={formData.systemRequirements?.recommended?.Storage}
onChange={handleInputChange}
fullWidth
margin="normal"
/>
<TextField
label="Network"
name="systemRequirements-recommended-Network"
value={formData.systemRequirements.recommended.Network}
value={formData.systemRequirements?.recommended?.Network}
onChange={handleInputChange}
fullWidth
margin="normal"
Expand Down Expand Up @@ -615,7 +720,7 @@ const CreateGameForm = () => {
</Button>
) : (
<Button type="submit" variant="contained" color="primary">
Create Game
{formComp.formData ? "Edit Game" : "Create Game"}
</Button>
)}
</Grid>
Expand Down
7 changes: 5 additions & 2 deletions ludos/frontend/src/pages/CreateGamePage.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import React from "react";
import CreateGameForm from "../components/CreateGameForum"; // Adjust the path based on your project structure
import { useLocation } from "react-router-dom";

const CreateGamePage = () => {
// You can add any additional state or logic specific to this page
const location = useLocation();
console.log(location);
const formData = location.state;

return (
<div>
<CreateGameForm />
<CreateGameForm formData={formData} />
</div>
);
};
Expand Down
Loading

0 comments on commit bbe7c40

Please sign in to comment.