diff --git a/CHANGELOG.md b/CHANGELOG.md index c9cf9bd..33ae143 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ - [#84](https://github.com/KozielGPC/championship-platform/issues/84) - Resolvida validação do formulário de campeonato no frontend ### Added +- [#157](https://github.com/KozielGPC/championship-platform/issues/157) - Adicionado tela de edição de time - [#99](https://github.com/KozielGPC/championship-platform/issues/99) - Adicionando botão para iniciar campeonato - [#91](https://github.com/KozielGPC/championship-platform/issues/51) - Adicionando botão de recriar matchmaking - [#152](https://github.com/KozielGPC/championship-platform/issues/152) - Adicionado mensagem corretas nos responses diff --git a/frontend/src/pages/profile/teams/edit/[id].tsx b/frontend/src/pages/profile/teams/edit/[id].tsx new file mode 100644 index 0000000..5925fc4 --- /dev/null +++ b/frontend/src/pages/profile/teams/edit/[id].tsx @@ -0,0 +1,200 @@ +import { Box, Flex, useToast } from "@chakra-ui/react"; +import { + FormControl, + FormLabel, + Input, + Button, + Textarea, + Select, + Heading + } from "@chakra-ui/react"; +import Layout from "@/components/layout"; +import { GetServerSideProps } from "next"; +import { parseCookies } from "nookies"; +import { useRouter } from 'next/router'; +import { useEffect, useState } from "react"; +import { getChampionshipById } from "@/services/championship/retrieve"; +import {Team} from '@/interfaces' +import { editTeam } from "../../../../services/team/update"; +import { getTeamById } from "@/services/team/retrieve"; + +interface PropsEditTeam { + id: number, + team: Team +} + +export interface EditTeam { + name: string, + password: string +} + +export default function EditTeam({id,team}:PropsEditTeam) { + const router = useRouter(); + const [formData, setFormData] = useState(team); + const [isLoading, setIsLoading] = useState(false); + const [confirmPassword, setConfirmPassword] = useState(formData.password) + const toast = useToast(); + const [pass, setPass] = useState(formData.password) + + const handleFormSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + setIsLoading(true) + const payload = formData; + if(formData.password !== confirmPassword){ + toast({ + title: "Passwords do not match.", + description: "Please try again.", + status: "error", + duration: 2000, + isClosable: true, + }); + return; + } + else{ + const response = await editTeam({id: id ,data: payload}); + if(response){ + toast( + { + title: response.message, + status: response.status, + duration: 3000, + isClosable: true, + } + ) + if(response.status=="success"){ + router.push("/profile/teams"); + } + setIsLoading(false) + } + } + }; + + const handleInputChange = ( + event: React.ChangeEvent + ) => { + const { name, value } = event.target; + setFormData((prevState) => ({ ...prevState, [name]: value })); + }; + + const handleConfirmPasswordChange = (event: React.ChangeEvent) => { + const value = event.target.value; + if (value === '') { + setConfirmPassword(formData.password); + } else { + setConfirmPassword(value); + } + }; + + const handlePasswordChange = (event: React.ChangeEvent) => { + const value = event.target.value; + if (value === ''){ + formData.password = pass; + } else { + formData.password = value; + } + }; + + return( + + + + + Edit {team?.name} + +
+ + + Name + + + + + Password + + + + + Password + + + + +
+
+
+
+ ) +} + + +export const getServerSideProps: GetServerSideProps = async (context) => { + const { "championship-token" : token } = parseCookies(context); + if(!token){ + return { + redirect: { + destination: '/signin', + permanent: false, + } + } + } + + const { id } = context.query; + + if(!id){ + return { + redirect: { + destination: '/profile/teams', + permanent: false, + } + } + } + + const response = await getTeamById(id.toString()); + if(response.status == "error"){ + return { + redirect: { + destination: '/404', + permanent: false, + } + } + } + + const formattedTeam = { + name: response.data?.name, + password: response.data?.password + } + + return({ + props: { + team:formattedTeam, + id: id + } + }) + }; \ No newline at end of file diff --git a/frontend/src/services/team/update.ts b/frontend/src/services/team/update.ts new file mode 100644 index 0000000..ab5b4bb --- /dev/null +++ b/frontend/src/services/team/update.ts @@ -0,0 +1,55 @@ +import axios, { AxiosResponse } from "axios"; +import {parseCookies} from "nookies"; +interface EditTeam { + name: string, + password: string +} +export type Status = "success" | "error"; +export interface ResponseRequest { + status: Status; + message: string; + data?: EditTeam; +} + +export type Props = { + id: number; + data?: EditTeam +} + +export const editTeam = async ({id, data}:Props): Promise => { + + const { "championship-token" : token } = parseCookies(); + + const response = await axios.put( + process.env.NEXT_PUBLIC_URL_SERVER+"/teams/update/"+id, + data, + { + headers:{ + "Authorization": `Bearer ${token}`, + "Content-Length": JSON.stringify(data).length, + "Content-Type": 'application/json' + } + } + ) + .then( + (response: AxiosResponse) => { + const status: Status = "success"; + return { + status:status, + data: response?.data, + message: "Team edited successfully" + }} + ) + .catch( + (error) => { + const status: Status = "error"; + const errorDetail = error.response.data.detail; + return { + status: status, + message: errorDetail + } + } + ); + + return response; + };