From ebed5b2fc00723e64f9e794fc9cb70b9b2bb7137 Mon Sep 17 00:00:00 2001 From: Souvik Khan Date: Sun, 21 Jul 2024 18:29:39 +0530 Subject: [PATCH 1/3] added find teams ui --- @/components/ui/button.jsx | 2 +- app/teams/page.jsx | 125 ++++++++++++++++++++++++++++++++++ components/FiltersSidebar.jsx | 31 +++++++++ components/TeamCard.jsx | 48 +++++++++++++ 4 files changed, 205 insertions(+), 1 deletion(-) create mode 100644 app/teams/page.jsx create mode 100644 components/FiltersSidebar.jsx create mode 100644 components/TeamCard.jsx diff --git a/@/components/ui/button.jsx b/@/components/ui/button.jsx index ed31cc6..13085b1 100644 --- a/@/components/ui/button.jsx +++ b/@/components/ui/button.jsx @@ -2,7 +2,7 @@ import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva } from "class-variance-authority"; -import { cn } from "@/lib/utils" +import { cn } from "../../lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", diff --git a/app/teams/page.jsx b/app/teams/page.jsx new file mode 100644 index 0000000..a3c69c0 --- /dev/null +++ b/app/teams/page.jsx @@ -0,0 +1,125 @@ +// components/TeamFinder.js +import React from 'react'; +import FiltersSidebar from '../../components/FiltersSidebar'; +import TeamCard from '../../components/TeamCard'; + +const teams = [ + { + name: 'PLX Esports', + game: 'BGMI', + role: 'Scout, Support, Fragger', + rank: 'Ace', + server: 'India', + language: 'English', + description: 'Tamil Players Only For Our ESports Organizational', + }, + { + name: 'HMF - YouTube', + game: 'Free Fire Max', + role: 'IGL', + rank: 'Diamond', + server: 'India', + language: 'Hindi', + description: 'No Requirement', + }, + { + name: 'PLX Esports', + game: 'BGMI', + role: 'Scout, Support, Fragger', + rank: 'Ace', + server: 'India', + language: 'English', + description: 'Tamil Players Only For Our ESports Organizational', + }, + { + name: 'HMF - YouTube', + game: 'Free Fire Max', + role: 'IGL', + rank: 'Diamond', + server: 'India', + language: 'Hindi', + description: 'No Requirement', + }, + { + name: 'PLX Esports', + game: 'BGMI', + role: 'Scout, Support, Fragger', + rank: 'Ace', + server: 'India', + language: 'English', + description: 'Tamil Players Only For Our ESports Organizational', + }, + { + name: 'HMF - YouTube', + game: 'Free Fire Max', + role: 'IGL', + rank: 'Diamond', + server: 'India', + language: 'Hindi', + description: 'No Requirement', + }, + { + name: 'PLX Esports', + game: 'BGMI', + role: 'Scout, Support, Fragger', + rank: 'Ace', + server: 'India', + language: 'English', + description: 'Tamil Players Only For Our ESports Organizational', + }, + { + name: 'HMF - YouTube', + game: 'Free Fire Max', + role: 'IGL', + rank: 'Diamond', + server: 'India', + language: 'Hindi', + description: 'No Requirement', + }, + { + name: 'PLX Esports', + game: 'BGMI', + role: 'Scout, Support, Fragger', + rank: 'Ace', + server: 'India', + language: 'English', + description: 'Tamil Players Only For Our ESports Organizational', + }, + { + name: 'HMF - YouTube', + game: 'Free Fire Max', + role: 'IGL', + rank: 'Diamond', + server: 'India', + language: 'Hindi', + description: 'No Requirement', + }, +]; + +const TeamFinder = () => { + return ( +
+

TEAM FINDER

+
+ +
+
+
+

Find Team

+
+
+ + + +
+
+ {teams.map((team, index) => ( + + ))} +
+
+
+ ); +}; + +export default TeamFinder; diff --git a/components/FiltersSidebar.jsx b/components/FiltersSidebar.jsx new file mode 100644 index 0000000..6758677 --- /dev/null +++ b/components/FiltersSidebar.jsx @@ -0,0 +1,31 @@ +// components/FiltersSidebar.js +import React from 'react'; + +const FiltersSidebar = () => { + return ( +
+

Filters

+
+ + +
+
+ + +
+
+ + +
+ +
+ ); + }; + +export default FiltersSidebar; diff --git a/components/TeamCard.jsx b/components/TeamCard.jsx new file mode 100644 index 0000000..28c4bbf --- /dev/null +++ b/components/TeamCard.jsx @@ -0,0 +1,48 @@ +// components/TeamCard.js +import React from 'react'; + +const TeamCard = ({ team }) => { + return ( +
+
+
+ {`${team.name} +

{team.name}

+
+ +
+
+
+ Game: + {team.game} +
+
+ Role: + {team.role} +
+
+ Rank: + {team.rank} +
+
+ Server: + {team.server} +
+
+ Language: + {team.language} +
+
+
+ Looking for: + {team.description} +
+
+ ); + }; + +export default TeamCard; From c147dff4401c6a37bd049793e78ac47f6ea10ba2 Mon Sep 17 00:00:00 2001 From: Souvik Khan Date: Wed, 24 Jul 2024 01:46:27 +0530 Subject: [PATCH 2/3] added responsiveness --- app/create-team/page.jsx | 438 ++++++++++++++++------------------ app/teams/page.jsx | 21 +- components/FiltersSidebar.jsx | 51 ++-- components/TeamCard.jsx | 68 +++--- 4 files changed, 282 insertions(+), 296 deletions(-) diff --git a/app/create-team/page.jsx b/app/create-team/page.jsx index 4d93442..1bb210b 100644 --- a/app/create-team/page.jsx +++ b/app/create-team/page.jsx @@ -5,13 +5,13 @@ import { useForm } from "react-hook-form" import { Button } from "../../@/components/ui/button" import { - Form, - FormControl, - FormDescription, - FormField, - FormItem, - FormLabel, - FormMessage, + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, } from "../../@/components/ui/form" import { Input } from "../../@/components/ui/input" import { useState } from 'react'; @@ -22,8 +22,8 @@ import { useToast } from '../../@/components/ui/use-toast'; - - export default function CreateTeamForm() { + +export default function CreateTeamForm() { // const [image, setImage] = useState(''); const [teamname, setTeamname] = useState(''); @@ -49,13 +49,13 @@ import { useToast } from '../../@/components/ui/use-toast'; players: '', requests: '' }, - }); + }); - const { reset } = form; + const { reset } = form; const onSubmit = async (data) => { try { - if(teamname !== '' && game !== '' && role !== '' && rank !== '' && server !== '' && language !== '' && players !== '' && requests !== '') { + if (teamname !== '' && game !== '' && role !== '' && rank !== '' && server !== '' && language !== '' && players !== '' && requests !== '') { const response = await axios.post('/api/teams/create-team', data); toast({ @@ -73,242 +73,226 @@ import { useToast } from '../../@/components/ui/use-toast'; setPlayers(''); setRequests(''); } - // const response = await axios.post('/api/teams/create-team', data); - - // toast({ - // title: 'Success', - // description: response.data.message, - // }); - - // reset(); - // setTeamname(''); - // setGame(''); - // setRole(''); - // setRank(''); - // setServer(''); - // setLanguage(''); - // setPlayers(''); - // setRequests(''); } catch (error) { - console.error('Error during create-team:', error); + console.error('Error during create-team:', error); - toast({ - title: 'Sign Up Failed', - description: errorMessage, - variant: 'destructive', - }); + toast({ + title: 'Sign Up Failed', + description: errorMessage, + variant: 'destructive', + }); } - }; + }; return (
-
-
-

- Create Team -

-

Create your team and start competing

-
-
- -
- ( - - Image - - - - - - )} - /> - ( - - Name - - { - field.onChange(e); - setTeamname(e.target.value); - }} +
+
+

+ Create Team +

+

Create your team and start competing

+
+ + +
+ ( + + Image + + + + + + )} /> - - - - )} - /> - ( - - Game - - { - field.onChange(e); - setGame(e.target.value); - }} + ( + + Name + + { + field.onChange(e); + setTeamname(e.target.value); + }} + /> + + + + )} /> - - - - )} - /> - ( - - Role - - { - field.onChange(e); - setRole(e.target.value); - }} + ( + + Game + + { + field.onChange(e); + setGame(e.target.value); + }} + /> + + + + )} /> - - - - )} - /> - ( - - Rank - - { - field.onChange(e); - setRank(e.target.value); - }} - /> - - - - )} - /> - ( - - Server - - { - field.onChange(e); - setServer(e.target.value); - }} + ( + + Role + + { + field.onChange(e); + setRole(e.target.value); + }} + /> + + + + )} /> - - - - )} - /> - ( - - Language - - { - field.onChange(e); - setLanguage(e.target.value); - }} + ( + + Rank + + { + field.onChange(e); + setRank(e.target.value); + }} + /> + + + + )} /> - - - - )} - /> - ( - - Players - - { - field.onChange(e); - setPlayers(e.target.value); - }} + ( + + Server + + { + field.onChange(e); + setServer(e.target.value); + }} + /> + + + + )} /> - - - - )} - /> - ( - - Requests - - { - field.onChange(e); - setRequests(e.target.value); - }} + ( + + Language + + { + field.onChange(e); + setLanguage(e.target.value); + }} + /> + + + + )} /> - - - - )} - /> -
-
- -
- - -
+ ( + + Players + + { + field.onChange(e); + setPlayers(e.target.value); + }} + /> + + + + )} + /> + ( + + Requests + + { + field.onChange(e); + setRequests(e.target.value); + }} + /> + + + + )} + /> +
+
+ +
+ + +
); - } \ No newline at end of file +} \ No newline at end of file diff --git a/app/teams/page.jsx b/app/teams/page.jsx index a3c69c0..ec89221 100644 --- a/app/teams/page.jsx +++ b/app/teams/page.jsx @@ -1,4 +1,3 @@ -// components/TeamFinder.js import React from 'react'; import FiltersSidebar from '../../components/FiltersSidebar'; import TeamCard from '../../components/TeamCard'; @@ -98,19 +97,19 @@ const teams = [ const TeamFinder = () => { return ( -
-

TEAM FINDER

-
- -
-
+
+

TEAM FINDER

+
+ +
+

Find Team

-
- - - +
+ + +
{teams.map((team, index) => ( diff --git a/components/FiltersSidebar.jsx b/components/FiltersSidebar.jsx index 6758677..c04110f 100644 --- a/components/FiltersSidebar.jsx +++ b/components/FiltersSidebar.jsx @@ -1,31 +1,30 @@ -// components/FiltersSidebar.js import React from 'react'; const FiltersSidebar = () => { - return ( -
-

Filters

-
- - -
-
- - -
-
- - -
- + return ( +
+

Filters

+
+ +
- ); - }; +
+ + +
+
+ + +
+ +
+ ); +}; -export default FiltersSidebar; +export default FiltersSidebar; \ No newline at end of file diff --git a/components/TeamCard.jsx b/components/TeamCard.jsx index 28c4bbf..8d526cd 100644 --- a/components/TeamCard.jsx +++ b/components/TeamCard.jsx @@ -1,10 +1,10 @@ -// components/TeamCard.js import React from 'react'; const TeamCard = ({ team }) => { - return ( -
-
+ return ( +
+
+
{ />

{team.name}

- +
-
-
- Game: - {team.game} -
-
- Role: - {team.role} -
-
- Rank: - {team.rank} -
-
- Server: - {team.server} -
-
- Language: - {team.language} -
+
+
+
+ Game: + {team.game}
-
- Looking for: - {team.description} +
+ Role: + {team.role}
+
+ Rank: + {team.rank} +
+
+ Server: + {team.server} +
+
+ Language: + {team.language} +
+
+
+ Looking for: + {team.description} +
+
+
- ); - }; +
+ ); +}; -export default TeamCard; +export default TeamCard; \ No newline at end of file From a5bbe0278a080bda2839e3586b944d30b211653a Mon Sep 17 00:00:00 2001 From: Souvik Khan Date: Wed, 24 Jul 2024 05:53:47 +0530 Subject: [PATCH 3/3] create and view teams --- app/api/teams/get-teams/route.jsx | 14 ++++ app/create-team/page.jsx | 32 +++++--- app/teams/page.jsx | 125 ++++++++---------------------- components/Navbar.jsx | 5 +- components/TeamCard.jsx | 36 +++++---- model/Schema/teamSchema.js | 19 +++-- model/Team.js | 4 +- prisma/seed.js | 8 +- 8 files changed, 107 insertions(+), 136 deletions(-) create mode 100644 app/api/teams/get-teams/route.jsx diff --git a/app/api/teams/get-teams/route.jsx b/app/api/teams/get-teams/route.jsx new file mode 100644 index 0000000..7c4b80f --- /dev/null +++ b/app/api/teams/get-teams/route.jsx @@ -0,0 +1,14 @@ +import dbConnect from "../../../../lib/dbConnect"; +import { TeamModel } from "../../../../model/Team"; + +export async function GET() { + await dbConnect(); + + try { + const teams = await TeamModel.find(); + return new Response(JSON.stringify({ success: true, teams }), { status: 200 }); + } catch (error) { + console.error('Error fetching teams:', error); + return new Response(JSON.stringify({ success: false, message: 'Error fetching teams' }), { status: 500 }); + } +} \ No newline at end of file diff --git a/app/create-team/page.jsx b/app/create-team/page.jsx index 1bb210b..125968a 100644 --- a/app/create-team/page.jsx +++ b/app/create-team/page.jsx @@ -49,6 +49,7 @@ export default function CreateTeamForm() { players: '', requests: '' }, + shouldFocusError: false, }); const { reset } = form; @@ -56,7 +57,14 @@ export default function CreateTeamForm() { const onSubmit = async (data) => { try { if (teamname !== '' && game !== '' && role !== '' && rank !== '' && server !== '' && language !== '' && players !== '' && requests !== '') { - const response = await axios.post('/api/teams/create-team', data); + + const playersArray = players.split(',').map(player => player.trim()); + const dataWithPlayersArray = { + ...data, + players: playersArray, + }; + + const response = await axios.post('/api/teams/create-team', dataWithPlayersArray); toast({ title: 'Success', @@ -110,7 +118,7 @@ export default function CreateTeamForm() { - + )} /> @@ -119,7 +127,7 @@ export default function CreateTeamForm() { name="teamname" render={({ field }) => ( - Name + Team Name - + )} /> @@ -152,7 +160,7 @@ export default function CreateTeamForm() { }} /> - + )} /> @@ -173,7 +181,7 @@ export default function CreateTeamForm() { }} /> - + )} /> @@ -194,7 +202,7 @@ export default function CreateTeamForm() { }} /> - + )} /> @@ -215,7 +223,7 @@ export default function CreateTeamForm() { }} /> - + )} /> @@ -236,7 +244,7 @@ export default function CreateTeamForm() { }} /> - + )} /> @@ -248,7 +256,7 @@ export default function CreateTeamForm() { Players { @@ -257,7 +265,7 @@ export default function CreateTeamForm() { }} /> - + )} /> @@ -278,7 +286,7 @@ export default function CreateTeamForm() { }} /> - + )} /> diff --git a/app/teams/page.jsx b/app/teams/page.jsx index ec89221..84facd0 100644 --- a/app/teams/page.jsx +++ b/app/teams/page.jsx @@ -1,101 +1,41 @@ +'use client' + import React from 'react'; import FiltersSidebar from '../../components/FiltersSidebar'; import TeamCard from '../../components/TeamCard'; +import { useRouter } from 'next/navigation'; +import { useState, useEffect } from 'react'; +import axios from 'axios'; -const teams = [ - { - name: 'PLX Esports', - game: 'BGMI', - role: 'Scout, Support, Fragger', - rank: 'Ace', - server: 'India', - language: 'English', - description: 'Tamil Players Only For Our ESports Organizational', - }, - { - name: 'HMF - YouTube', - game: 'Free Fire Max', - role: 'IGL', - rank: 'Diamond', - server: 'India', - language: 'Hindi', - description: 'No Requirement', - }, - { - name: 'PLX Esports', - game: 'BGMI', - role: 'Scout, Support, Fragger', - rank: 'Ace', - server: 'India', - language: 'English', - description: 'Tamil Players Only For Our ESports Organizational', - }, - { - name: 'HMF - YouTube', - game: 'Free Fire Max', - role: 'IGL', - rank: 'Diamond', - server: 'India', - language: 'Hindi', - description: 'No Requirement', - }, - { - name: 'PLX Esports', - game: 'BGMI', - role: 'Scout, Support, Fragger', - rank: 'Ace', - server: 'India', - language: 'English', - description: 'Tamil Players Only For Our ESports Organizational', - }, - { - name: 'HMF - YouTube', - game: 'Free Fire Max', - role: 'IGL', - rank: 'Diamond', - server: 'India', - language: 'Hindi', - description: 'No Requirement', - }, - { - name: 'PLX Esports', - game: 'BGMI', - role: 'Scout, Support, Fragger', - rank: 'Ace', - server: 'India', - language: 'English', - description: 'Tamil Players Only For Our ESports Organizational', - }, - { - name: 'HMF - YouTube', - game: 'Free Fire Max', - role: 'IGL', - rank: 'Diamond', - server: 'India', - language: 'Hindi', - description: 'No Requirement', - }, - { - name: 'PLX Esports', - game: 'BGMI', - role: 'Scout, Support, Fragger', - rank: 'Ace', - server: 'India', - language: 'English', - description: 'Tamil Players Only For Our ESports Organizational', - }, - { - name: 'HMF - YouTube', - game: 'Free Fire Max', - role: 'IGL', - rank: 'Diamond', - server: 'India', - language: 'Hindi', - description: 'No Requirement', - }, -]; const TeamFinder = () => { + + const router = useRouter(); + const [teams, setTeams] = useState([]); + + useEffect(() => { + const fetchTeams = async () => { + try { + const response = await axios.get('/api/teams/get-teams'); + if (response.data.success) { + setTeams(response.data.teams); + } else { + console.error('Failed to fetch teams:', response.data.message); + } + } catch (error) { + console.error('Error fetching teams:', error); + } + }; + + fetchTeams(); + }, []); + + + const NavigateToCreateTeam = () => { + router.push('/create-team'); + }; + + return (

TEAM FINDER

@@ -105,6 +45,7 @@ const TeamFinder = () => {

Find Team

+
diff --git a/components/Navbar.jsx b/components/Navbar.jsx index aeaf362..9891ee5 100644 --- a/components/Navbar.jsx +++ b/components/Navbar.jsx @@ -107,7 +107,10 @@ const navLinks = [ title: "Games", href: "/games", }, - + { + title: "Teams", + href: "/teams", + }, { title: "Blogs", href: "/blogs", diff --git a/components/TeamCard.jsx b/components/TeamCard.jsx index 8d526cd..e7f53e6 100644 --- a/components/TeamCard.jsx +++ b/components/TeamCard.jsx @@ -7,40 +7,46 @@ const TeamCard = ({ team }) => {
{`${team.name} -

{team.name}

+

{team.teamname}

-
- Game: +
+ Game {team.game}
-
- Role: +
+ Role {team.role}
-
- Rank: +
+ Rank {team.rank}
-
- Server: +
+ Server {team.server}
-
- Language: +
+ Language {team.language}
-
- Looking for: - {team.description} +
+
+ Players + {team.players.join(', ')} +
+
+ Looking for + {team.requests} +
diff --git a/model/Schema/teamSchema.js b/model/Schema/teamSchema.js index 01d08b6..b0466e2 100644 --- a/model/Schema/teamSchema.js +++ b/model/Schema/teamSchema.js @@ -1,13 +1,12 @@ import { z } from 'zod'; export const teamSchema = z.object({ - teamname: z.string(), - game: z.string(), - role: z.string(), - rank: z.string(), - server: z.string(), - language: z.string(), - players: z.string(), - requests: z.string(), - -}); + teamname: z.string().min(4, { message: 'Team name must be at least 4 characters long' }), + game: z.string().min(4, { message: 'Game name must be at least 4 characters long' }), + role: z.string().min(4, { message: 'Role must be at least 4 characters long' }), + rank: z.string().min(4, { message: 'Rank must be at least 4 characters long' }), + server: z.string().min(4, { message: 'Server must be at least 4 characters long' }), + language: z.string().min(4, { message: 'Language must be at least 4 characters long' }), + players: z.string().min(4, { message: 'Players field must be at least 4 characters long' }), + requests: z.string().min(4, { message: 'Requests field must be at least 4 characters long' }), +}); \ No newline at end of file diff --git a/model/Team.js b/model/Team.js index 2db829c..1d267fa 100644 --- a/model/Team.js +++ b/model/Team.js @@ -8,8 +8,8 @@ const TeamSchema = new mongoose.Schema({ rank: { type: String, required: true }, server: { type: String, required: true }, language: { type: String, required: true }, - players: [{ type: String }], - requests: [{ type: String }] + players: [{ type: String, required: true }], + requests: { type: String, required: true } }); diff --git a/prisma/seed.js b/prisma/seed.js index 7117c86..358c7ff 100644 --- a/prisma/seed.js +++ b/prisma/seed.js @@ -170,7 +170,7 @@ async function main() { // seed Team (mongoose) const teamData = [ { - image: 'https://example.com/image1.jpg', + image: 'https://placehold.co/60', teamname: 'Epic Warriors', game: 'League of Legends', role: 'ADC', @@ -178,10 +178,10 @@ async function main() { server: 'NA', language: 'English', players: ['Player1', 'Player2'], - requests: ['No toxic behavior', 'Must have a mic'] + requests: 'No toxic behavior' }, { - image: 'https://example.com/image2.jpg', + image: 'https://placehold.co/60', teamname: 'Pro Gamers', game: 'CS:GO', role: 'In-Game Leader', @@ -189,7 +189,7 @@ async function main() { server: 'EU', language: 'English', players: ['Player3', 'Player4'], - requests: ['Good communication skills', 'Must be punctual'] + requests: 'Good communication skills and has to be punctual' } ];