client(MultistepProvider.tsx): optimize insertCard function

0l1v3rr · 0l1v3rr · commit ffb8be031516 · 2023-05-02T14:19:54.000+02:00
diff --git a/client/src/components/form/PageFour.tsx b/client/src/components/form/PageFour.tsx
@@ -47,7 +47,7 @@ const PageFour = () => {
       </Flex>
 
       <Flex>
-        <InputWrapper label="Show border">
+        <InputWrapper label="Border">
           <TrueFalseInput
             value={card.showBorder}
             trueLabel="Show"
@@ -67,7 +67,7 @@ const PageFour = () => {
           />
         </InputWrapper>
 
-        <InputWrapper label="Show title">
+        <InputWrapper label="Title">
           <TrueFalseInput
             value={!card.hideTitle}
             trueLabel="Show"
diff --git a/client/src/components/lines/BadgeItem.tsx b/client/src/components/lines/BadgeItem.tsx
@@ -44,9 +44,7 @@ const BadgeItem = ({ badge, removeBadge, lineNumber }: Props) => {
       }}
       className={cn(
         "flex cursor-grab select-none items-center gap-3 border border-gh-bg px-3 py-[.45rem] transition-all duration-150",
-        dragged
-          ? "border-gh-bg-secondary bg-gh-bg-dark text-gh-bg-dark"
-          : "bg-gh-bg-secondary text-white",
+        dragged ? "hidden" : "bg-gh-bg-secondary text-white",
         grabbedBadge === undefined ? "hover:bg-gh-gray" : ""
       )}
       onClick={(e) => {
diff --git a/client/src/components/lines/BadgePlaceholder.tsx b/client/src/components/lines/BadgePlaceholder.tsx
@@ -39,8 +39,8 @@ const BadgePlaceholder = ({ lineNumber, position }: Props) => {
       e.preventDefault();
 
       insertBadge(lineNumber, position, grabbedBadge);
-      setHovered(false);
       setGrabbedBadge(undefined);
+      setHovered(false);
     },
     [grabbedBadge, insertBadge, lineNumber, position]
   );
@@ -52,8 +52,11 @@ const BadgePlaceholder = ({ lineNumber, position }: Props) => {
       onDragLeave={() => setHovered(false)}
       onDragEnter={() => (shouldDropBeAllowed() ? setHovered(true) : {})}
       className={cn(
-        "h-[31.73px] border-r-[.5rem] border-gh-bg",
-        hovered ? "border-l-[.5rem] bg-gh-bg-dark" : "bg-transparent"
+        "h-[31.73px] border-gh-bg",
+        hovered ? "border-l-[.5rem] bg-gh-bg-dark" : "bg-transparent",
+        grabbedBadge && grabbedBadge.badge.position + 1 === position
+          ? ""
+          : "border-r-[.5rem]"
       )}
       style={{
         width:
diff --git a/client/src/components/ui/RepositoryLink.tsx b/client/src/components/ui/RepositoryLink.tsx
@@ -18,11 +18,11 @@ const RepositoryLink = ({ user, repository, isPublic }: Props) => {
     description: "This is a description",
   });
 
-  useEffect(() => {
-    axios
-      .get<GithubResponse>(`https://api.github.com/repos/${user}/${repository}`)
-      .then((res) => setGithubStats(res.data));
-  }, []);
+  // useEffect(() => {
+  //   axios
+  //     .get<GithubResponse>(`https://api.github.com/repos/${user}/${repository}`)
+  //     .then((res) => setGithubStats(res.data));
+  // }, []);
 
   return (
     <div>
diff --git a/client/src/context/MultistepContext.tsx b/client/src/context/MultistepContext.tsx
@@ -132,29 +132,23 @@ export const MultistepProvider: FC<MultistepProviderProps> = ({ children }) => {
       if (position > bdt.badge.position) position--;
 
       setCard((prev) => {
-        const newCard = structuredClone(prev);
-        const lineIdx = newCard.lines.findIndex(
-          (x) => x.lineNumber === lineNumber
-        );
+        // check whether the line exists
+        const line = prev.lines.findIndex((x) => x.lineNumber === lineNumber);
+        if (line === -1) return prev;
 
-        // line with the specified lineNumber doesn't exist
-        if (lineIdx === -1) return prev;
+        const newCard = structuredClone(prev);
+        const badges = newCard.lines[line].badges;
+        const badgePositions = badges.map((badge) => badge.position);
 
         // remove the old badge
-        newCard.lines[lineIdx].badges = newCard.lines[lineIdx].badges
-          .sort((a, z) => a.position - z.position)
-          .filter((x) => x.position !== bdt.badge.position);
+        const idx = badgePositions.indexOf(bdt.badge.position);
+        if (idx !== -1) badges.splice(idx, 1);
 
         // insert the new badge
-        newCard.lines[lineIdx].badges.splice(position, 0, bdt.badge);
+        badges.splice(position, 0, bdt.badge);
 
         // rearrange the positions
-        newCard.lines[lineIdx].badges = newCard.lines[lineIdx].badges.map(
-          (prev, i) => ({
-            ...prev,
-            position: i,
-          })
-        );
+        badges.forEach((badge, i) => (badge.position = i));
 
         return newCard;
       });
diff --git a/package-lock.json b/package-lock.json
