Massive ts error cleanup

src/client/components/shared/Draggable/Cover.tsx

@@ -1,14 +1,21 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, CSSProperties } from "react";
 
-export const Cover = forwardRef(
+interface CoverProps {
+  url: string;
+  index: number;
+  faded?: boolean;
+  style?: CSSProperties;
+}
+
+export const Cover = forwardRef<HTMLDivElement, CoverProps & React.HTMLAttributes<HTMLDivElement>>(
   ({ url, index, faded, style, ...props }, ref) => {
-    const inlineStyles = {
+    const inlineStyles: CSSProperties = {
       opacity: faded ? "0.2" : "1",
       transformOrigin: "0 0",
       minHeight: index === 0 ? 300 : 300,
       maxWidth: 200,
-      gridRowStart: index === 0 ? "span" : null,
-      gridColumnStart: index === 0 ? "span" : null,
+      gridRowStart: index === 0 ? "span" : undefined,
+      gridColumnStart: index === 0 ? "span" : undefined,
       backgroundImage: `url("${url}")`,
       backgroundSize: "cover",
       backgroundPosition: "center",

src/client/components/shared/Draggable/DnD.tsx

@@ -8,6 +8,8 @@ import {
   DragOverlay,
   useSensor,
   useSensors,
+  DragStartEvent,
+  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   arrayMove,
@@ -20,22 +22,27 @@ import { SortableCover } from "./SortableCover";
 import { Cover } from "./Cover";
 import { map } from "lodash";
 
-export const DnD = (data) => {
-  const [items, setItems] = useState(data.data);
-  const [activeId, setActiveId] = useState(null);
+interface DnDProps {
+  data: string[];
+  onClickHandler: (url: string) => void;
+}
+
+export const DnD = ({ data, onClickHandler }: DnDProps) => {
+  const [items, setItems] = useState<string[]>(data);
+  const [activeId, setActiveId] = useState<string | null>(null);
   const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
 
-  function handleDragStart(event) {
-    setActiveId(event.active.id);
+  function handleDragStart(event: DragStartEvent) {
+    setActiveId(event.active.id as string);
   }
 
-  function handleDragEnd(event) {
+  function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
 
-    if (active.id !== over.id) {
-      setItems((items) => {
-        const oldIndex = items.indexOf(active.id);
-        const newIndex = items.indexOf(over.id);
+    if (over && active.id !== over.id) {
+      setItems((items: string[]) => {
+        const oldIndex = items.indexOf(active.id as string);
+        const newIndex = items.indexOf(over.id as string);
 
         return arrayMove(items, oldIndex, newIndex);
       });
@@ -56,13 +63,13 @@ export const DnD = (data) => {
     >
       <SortableContext items={items} strategy={rectSortingStrategy}>
         <Grid columns={4}>
-          {map(items, (url, index) => {
+          {map(items, (url: string, index: number) => {
             return (
-              <div>
-                <SortableCover key={url} url={url} index={index} />
+              <div key={url}>
+                <SortableCover url={url} index={index} />
                 <div
                   className="mt-2 mb-2"
-                  onClick={(e) => data.onClickHandler(url)}
+                  onClick={() => onClickHandler(url)}
                 >
                   <div className="box p-2 control-palette">
                     <span className="tag is-warning mr-2">{index}</span>

src/client/components/shared/Draggable/Grid.tsx

@@ -1,6 +1,11 @@
-import React from "react";
+import React, { ReactNode } from "react";
 
-export function Grid({ children, columns }) {
+interface GridProps {
+  children: ReactNode;
+  columns: number;
+}
+
+export function Grid({ children, columns }: GridProps) {
   return (
     <div
       style={{

src/client/components/shared/Draggable/SortableCover.tsx

@@ -4,12 +4,17 @@ import { CSS } from "@dnd-kit/utilities";
 
 import { Cover } from "./Cover";
 
-export const SortableCover = (props) => {
+interface SortableCoverProps {
+  url: string;
+  index: number;
+  faded?: boolean;
+}
+
+export const SortableCover = (props: SortableCoverProps) => {
   const sortable = useSortable({ id: props.url });
   const {
     attributes,
     listeners,
-    isDragging,
     setNodeRef,
     transform,
     transition,