feat: prevent duplicated team name

helpers/find.team.by.name.js

@@ -0,0 +1,12 @@
+import prisma from '~/prisma/client';
+
+export default async function findTeamByName(name) {
+  return prisma.team.findMany({
+    where: {
+      name: {
+        equals: name,
+        mode: 'insensitive',
+      },
+    },
+  });
+}

src/components/pages/team/hero/team.jsx

@@ -12,6 +12,7 @@ const Team = ({ info }) => {
   const session = useSession();
 
   const [contact, setContact] = useState('');
+  const [currentTeamName, setCurrentTeamName] = useState(info.team.name); // for disable state update button
   const [teamName, setTeamName] = useState(info.team.name);
   const [randomJoin, setRandomJoin] = useState(info.team.allowAutoAssign);
 
@@ -37,20 +38,34 @@ const Team = ({ info }) => {
     setContact('');
   }, [contact]);
 
-  const debounce = useDebouncedCallback(async (name, allowAutoAssign) => {
-    await fetch('/api/change-team', {
+  const updateTeamApi = (name, allowAutoAssign) =>
+    fetch('/api/change-team', {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
       },
       method: 'POST',
-      body: JSON.stringify({
-        name,
-        allowAutoAssign,
-      }),
+      body: JSON.stringify({ name, allowAutoAssign }),
     });
+
+  const debounceRandomJoin = useDebouncedCallback(async (allowAutoAssign) => {
+    await updateTeamApi(currentTeamName, allowAutoAssign);
   }, 500);
 
+  const updateTeamName = async () => {
+    const response = await updateTeamApi(teamName, randomJoin);
+    const json = await response.json();
+
+    if (response.ok) {
+      setCurrentTeamName(teamName);
+      toast.success('Team name updated successfully!');
+    } else {
+      toast.error(json.error);
+    }
+  };
+
+  const handleChangeTeamName = (e) => setTeamName(e.target.value);
+
   const leaveTeam = async () => {
     if (!currentUser) return;
 
@@ -178,12 +193,19 @@ const Team = ({ info }) => {
                   type="text"
                   name="name"
                   value={teamName}
-                  onChange={(e) => {
-                    setTeamName(e.target.value);
-                    debounce(e.target.value, randomJoin);
-                  }}
+                  onChange={handleChangeTeamName}
                 />
               </label>
+              <div className="ml-3 inline-block border border-gray-1 px-4 text-center">
+                <button
+                  className="border-0 p-0"
+                  disabled={!teamName || currentTeamName == teamName}
+                  type="button"
+                  onClick={updateTeamName}
+                >
+                  Update
+                </button>
+              </div>
             </div>
             <div className="mb-5">
               <label>
@@ -200,7 +222,7 @@ const Team = ({ info }) => {
                   checked={randomJoin}
                   onClick={() => {
                     setRandomJoin(!randomJoin);
-                    debounce(teamName, !randomJoin);
+                    debounceRandomJoin(!randomJoin);
                   }}
                 />
               </label>

src/pages/api/change-team.js

@@ -1,14 +1,31 @@
+import findTeamByName from '~/helpers/find.team.by.name';
 import findUserAndTeam from '~/helpers/find.user.and.team';
 import prisma from '~/prisma/client';
 
 export default async function handler(req, res) {
   if (!req.body.name || req.body.name.length < 2 || !req.body.hasOwnProperty('allowAutoAssign')) {
-    res.status(400).send('Invalid parameters');
+    res.status(400).json({
+      success: false,
+      error: 'Invalid parameters',
+    });
     return;
   }
+
+  const teams = await findTeamByName(req.body.name);
+  if (teams.length) {
+    res.status(400).json({
+      success: false,
+      error: 'Team name already used!',
+    });
+    return;
+  }
+
   const { admin, team } = await findUserAndTeam(req, res);
   if (!admin && !team) {
-    res.status(400).send('Invalid call');
+    res.status(400).json({
+      success: false,
+      error: 'Invalid call',
+    });
     return;
   }
 
@@ -22,5 +39,8 @@ export default async function handler(req, res) {
     },
   });
 
-  res.status(200).send('changed');
+  res.status(200).json({
+    success: true,
+    message: 'Changed',
+  });
 }