fix(frontend): remove forwardRef deprecation & other react errors for…

… v19
hotosm · Jun 2, 2024 · 8752971 · 8752971
1 parent 94ed442
commit 8752971
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 164 deletions.
diff --git a/src/frontend/src/components/ManageProject/UserTab/index.tsx b/src/frontend/src/components/ManageProject/UserTab/index.tsx
@@ -53,26 +53,28 @@ const UserTab = () => {
   const handleResendInvitation = () => {};
 
   return (
-    <div className="fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-5 lg:fmtm-gap-10 fmtm-w-full">
-      <div className="fmtm-max-w-[18rem] lg:fmtm-w-[23%] lg:fmtm-min-w-[18rem]">
-        <div className="fmtm-flex fmtm-gap-3 fmtm-mb-5">
-          {tabList.map((tab) => (
-            <div
-              key={tab}
-              className={`fmtm-w-fit fmtm-text-[#9B9999] fmtm-px-2 fmtm-border-b-[1px] hover:fmtm-border-primaryRed fmtm-duration-300 fmtm-cursor-pointer ${
-                tabView === tab ? 'fmtm-border-primaryRed' : 'fmtm-border-transparent'
-              }`}
-              onClick={() => setTabView(tab)}
-            >
-              {tab}
-            </div>
-          ))}
+    <>
+      <div className="fmtm-flex fmtm-flex-col lg:fmtm-flex-row fmtm-gap-5 lg:fmtm-gap-10 fmtm-w-full">
+        <div className="fmtm-max-w-[18rem] lg:fmtm-w-[23%] lg:fmtm-min-w-[18rem]">
+          <div className="fmtm-flex fmtm-gap-3 fmtm-mb-5">
+            {tabList.map((tab) => (
+              <div
+                key={tab}
+                className={`fmtm-w-fit fmtm-text-[#9B9999] fmtm-px-2 fmtm-border-b-[1px] hover:fmtm-border-primaryRed fmtm-duration-300 fmtm-cursor-pointer ${
+                  tabView === tab ? 'fmtm-border-primaryRed' : 'fmtm-border-transparent'
+                }`}
+                onClick={() => setTabView(tab)}
+              >
+                {tab}
+              </div>
+            ))}
+          </div>
+          <div>{tabView === 'Assign' ? <AssignTab /> : <InviteTab />}</div>
         </div>
-        <div>{tabView === 'Assign' ? <AssignTab /> : <InviteTab />}</div>
       </div>
       <Table
         flag="primarytable"
-        style={{ 'max-height': '60vh', width: '100%' }}
+        style={{ maxHeight: '60vh', width: '100%' }}
         data={data}
         onRowClick={() => {}}
         isLoading={false}
@@ -160,7 +162,7 @@ const UserTab = () => {
           )}
         />
       </Table>
-    </div>
+    </>
   );
 };
 

diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx b/src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx
@@ -4,9 +4,9 @@
 import React from 'react';
 import '../map.scss';
 
-const { Children, cloneElement, forwardRef } = React;
+const { Children, cloneElement } = React;
 
-const MapContainer = forwardRef(({ children, mapInstance, ...rest }, ref) => {
+const MapContainer = ({ children, mapInstance = null, ref, ...rest }) => {
   const childrenCount = Children.count(children);
   const props = {
     map: mapInstance,
@@ -16,16 +16,12 @@ const MapContainer = forwardRef(({ children, mapInstance, ...rest }, ref) => {
       {childrenCount < 1 ? (
         <></>
       ) : childrenCount > 1 ? (
-        Children.map(children, (child) => (child ? cloneElement(child, { ...props }) : <></>))
+        Children.map(children, (child) => (child ? cloneElement(child, { ...props, ref: null }) : <></>))
       ) : (
-        cloneElement(children, { ...props })
+        cloneElement(children, { ...props, ref: null })
       )}
     </div>
   );
-});
-
-MapContainer.defaultProps = {
-  mapInstance: null,
 };
 
 // TODO replace with typescript

diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx
@@ -40,10 +40,10 @@ const ProjectInfo: React.FC = () => {
         <p className="fmtm-font-bold">Description</p>
         {projectDetailsLoading ? (
           <div>
-            {Array.from({ length: 7 }).map((i) => (
-              <CoreModules.Skeleton key={i} />
+            {Array.from({ length: 7 }).map((_, index) => (
+              <CoreModules.Skeleton key={index} />
             ))}
-            <CoreModules.Skeleton className="!fmtm-w-[80px]" />
+            <CoreModules.Skeleton key="last" className="!fmtm-w-[80px]" />
           </div>
         ) : (
           <div>

diff --git a/src/frontend/src/components/common/Checkbox.tsx b/src/frontend/src/components/common/Checkbox.tsx
@@ -12,24 +12,24 @@ type CustomCheckboxType = {
   disabled?: boolean;
 };
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'fmtm-peer fmtm-h-4 fmtm-w-4 fmtm-shrink-0 fmtm-rounded-sm fmtm-border fmtm-border-[#7A7676] fmtm-shadow focus-visible:fmtm-outline-none focus-visible:fmtm-ring-1 disabled:fmtm-cursor-not-allowed disabled:fmtm-opacity-50  data-[state=checked]:fmtm-text-primary-[#7A7676]',
-      { 'disabled:fmtm-cursor-not-allowed': props.disabled },
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn('fmtm-flex fmtm-items-center fmtm-justify-center fmtm-text-current')}>
-      <Check className="fmtm-h-4 fmtm-w-4 fmtm-text-primaryRed" strokeWidth={4} />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
+const Checkbox = ({ className, ...props }) => {
+  const { ref } = props;
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        'fmtm-peer fmtm-h-4 fmtm-w-4 fmtm-shrink-0 fmtm-rounded-sm fmtm-border fmtm-border-[#7A7676] fmtm-shadow focus-visible:fmtm-outline-none focus-visible:fmtm-ring-1 disabled:fmtm-cursor-not-allowed disabled:fmtm-opacity-50  data-[state=checked]:fmtm-text-primary-[#7A7676]',
+        { 'disabled:fmtm-cursor-not-allowed': props.disabled },
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className={cn('fmtm-flex fmtm-items-center fmtm-justify-center fmtm-text-current')}>
+        <Check className="fmtm-h-4 fmtm-w-4 fmtm-text-primaryRed" strokeWidth={4} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+};
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export const CustomCheckbox = ({

diff --git a/src/frontend/src/components/common/Dropdown.tsx b/src/frontend/src/components/common/Dropdown.tsx
@@ -5,23 +5,13 @@ import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icon
 import { cn } from '@/utilfunctions/shadcn';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
-
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
+const DropdownMenuSubTrigger = ({ className, inset, children, ref, ...props }) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
@@ -34,13 +24,10 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-));
+);
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const DropdownMenuSubContent = ({ className, ref, ...props }) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
@@ -49,13 +36,10 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const DropdownMenuContent = ({ className, sideOffset = 4, ref, ...props }) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
@@ -67,15 +51,10 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-));
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const DropdownMenuItem = ({ className, inset, ref, ...props }) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -85,13 +64,10 @@ const DropdownMenuItem = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+const DropdownMenuCheckboxItem = ({ className, children, checked, ref, ...props }) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
@@ -108,13 +84,10 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-));
+);
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
+const DropdownMenuRadioItem = ({ className, children, ref, ...props }) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
@@ -130,33 +103,25 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-));
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+const DropdownMenuLabel = ({ className, inset, ref, ...props }) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn('fmtm-px-2 fmtm-py-1.5 fmtm-text-sm fmtm-font-semibold', inset && 'fmtm-pl-8', className)}
     {...props}
   />
-));
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const DropdownMenuSeparator = ({ className, ref, ...props }) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn('fmtm--mx-1 fmtm-my-1 fmtm-h-px fmtm-bg-muted', className)}
     {...props}
   />
-));
+);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {

diff --git a/src/frontend/src/components/common/Modal.tsx b/src/frontend/src/components/common/Modal.tsx
@@ -11,10 +11,11 @@ const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => <DialogPrimitive.Portal {...props} />;
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const DialogOverlay = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
@@ -23,7 +24,7 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 interface IModalProps {
@@ -32,13 +33,15 @@ interface IModalProps {
   description: React.ReactNode;
   open: boolean;
   className: string;
-  onOpenChange: (boolean) => void;
+  onOpenChange: (open: boolean) => void;
 }
 
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+const DialogContent = ({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -56,7 +59,7 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-));
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -75,24 +78,22 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 );
 DialogFooter.displayName = 'DialogFooter';
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
+const DialogTitle = ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>) => (
   <DialogPrimitive.Title
     ref={ref}
     className={cn('fmtm-text-lg fmtm-font-semibold fmtm-leading-none fmtm-tracking-tight', className)}
     {...props}
   />
-));
+);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+const DialogDescription = ({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>) => (
   <DialogPrimitive.Description ref={ref} className={cn('fmtm-text-sm fmtm-text-black', className)} {...props} />
-));
+);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 const Modal = ({ dialogOpen, title, description, open, onOpenChange, className }: IModalProps) => {
@@ -109,4 +110,4 @@ const Modal = ({ dialogOpen, title, description, open, onOpenChange, className }
   );
 };
 
-export { Modal };
+export { Modal, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };