[#207]

Fix the ul li key warning as well
Pjaijai · Nov 6, 2023 · cfdd056 · cfdd056
1 parent 95aa53f
commit cfdd056
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 42 deletions.
diff --git a/client/components/customized-ui/drop-down-menu/user.tsx b/client/components/customized-ui/drop-down-menu/user.tsx
@@ -13,6 +13,10 @@ import {
 import { useToast } from "@/components/ui/use-toast"
 import BaseAvatar from "@/components/customized-ui/avatars/base"
 
+
+
+
+
 const UserDropDownMenu = () => {
   const user = useUserStore((state) => state)
   const userState = useUserStore((state) => state)
@@ -55,18 +59,16 @@ const UserDropDownMenu = () => {
         <span>{user.username}</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        {nav.map((n) => {
-          return (
-            <DropdownMenuItem>
-              <Link
-                href={n.href}
-                className="flex w-full items-center  justify-center space-x-2"
-              >
-                {n.title}
-              </Link>
-            </DropdownMenuItem>
-          )
-        })}
+        {nav.map((n) => (
+          <DropdownMenuItem key={n.href}>
+            <Link
+              href={n.href}
+              className="flex w-full items-center  justify-center space-x-2"
+            >
+              {n.title}
+            </Link>
+          </DropdownMenuItem>
+        ))}
 
         <DropdownMenuItem
           className="flex cursor-pointer justify-center"

diff --git a/client/components/customized-ui/form/select.tsx b/client/components/customized-ui/form/select.tsx
@@ -18,10 +18,15 @@ import {
 } from "@/components/ui/select"
 import { IFormTextInputProps } from "@/components/customized-ui/form/input"
 
+
+
+
+
 interface IFormSelectProps extends IFormTextInputProps {
   options: { value: string; title: string }[]
   defaultValue?: string
 }
+
 const FormSelect: React.FunctionComponent<IFormSelectProps> = ({
   control,
   name,
@@ -52,13 +57,11 @@ const FormSelect: React.FunctionComponent<IFormSelectProps> = ({
               <ScrollArea>
                 {options &&
                   options.length > 0 &&
-                  options.map((option) => {
-                    return (
-                      <SelectItem value={option.value}>
-                        {option.title}
-                      </SelectItem>
-                    )
-                  })}
+                  options.map((option) => (
+                    <SelectItem value={option.value} key={option.value}>
+                      {option.title}
+                    </SelectItem>
+                  ))}
               </ScrollArea>
             </SelectContent>
           </Select>

diff --git a/client/components/customized-ui/selects/base.tsx b/client/components/customized-ui/selects/base.tsx
@@ -10,10 +10,15 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
+
+
+
+
 export interface ISelectOption {
   value: string
   title: string
 }
+
 interface IBaseSelectProps {
   triggerClassName?: string
   placeholder?: string
@@ -22,6 +27,7 @@ interface IBaseSelectProps {
   defaultValue?: string
   value?: string
 }
+
 const BaseSelect: React.FunctionComponent<IBaseSelectProps> = ({
   triggerClassName,
   placeholder,
@@ -38,11 +44,11 @@ const BaseSelect: React.FunctionComponent<IBaseSelectProps> = ({
       <SelectContent className="max-h-[300px]">
         <ScrollArea>
           {options &&
-            options.map((option) => {
-              return (
-                <SelectItem value={option.value}>{option.title}</SelectItem>
-              )
-            })}
+            options.map((option) => (
+              <SelectItem value={option.value} key={option.value}>
+                {option.title}
+              </SelectItem>
+            ))}
         </ScrollArea>
       </SelectContent>
     </Select>

diff --git a/client/components/ui/toaster.tsx b/client/components/ui/toaster.tsx
@@ -8,25 +8,25 @@ import {
 } from "@/components/ui/toast"
 import { useToast } from "@/components/ui/use-toast"
 
+
+
+
+
 export function Toaster() {
   const { toasts } = useToast()
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props}>
+          <div className="grid gap-1">
+            {title && <ToastTitle>{title}</ToastTitle>}
+            {description && <ToastDescription>{description}</ToastDescription>}
+          </div>
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
       <ToastViewport />
     </ToastProvider>
   )

diff --git a/client/modules/contributors/components/contributor-card.tsx b/client/modules/contributors/components/contributor-card.tsx
@@ -6,7 +6,12 @@ import { IContributor } from "@/modules/contributors/types/contributor"
 import { Card, CardTitle } from "@/components/ui/card"
 import { Icons } from "@/components/icons"
 
+
+
+
+
 interface IContributorCard extends IContributor {}
+
 const ContributorCard: React.FunctionComponent<IContributorCard> = ({
   contributedArea,
   links,
@@ -42,8 +47,8 @@ const ContributorCard: React.FunctionComponent<IContributorCard> = ({
       </div>
 
       <div className="flex flex-row gap-2">
-        {contributedArea.map((data, index) => (
-          <ContributionAreaBadge area={data} key={index} />
+        {contributedArea.map((data) => (
+          <ContributionAreaBadge area={data} key={data} />
         ))}
       </div>
     </Card>

diff --git a/client/modules/contributors/template.tsx b/client/modules/contributors/template.tsx
@@ -1,16 +1,20 @@
 import ContributorCard from "@/modules/contributors/components/contributor-card"
 import contributors from "@/modules/contributors/data/contributors"
 
+
+
+
+
 const ContributorsPageTemplate = () => {
   return (
     <>
       <div className="grid grid-cols-1 gap-4 p-2 md:grid-cols-3">
-        {contributors.map((contributor, index) => (
+        {contributors.map((contributor) => (
           <ContributorCard
             contributedArea={contributor.contributedArea}
             links={contributor.links}
             name={contributor.name}
-            key={index}
+            key={contributor.name}
           />
         ))}
       </div>