fix: code review modifications

PThorpe92 · Sep 19, 2024 · 23437a0 · 23437a0
1 parent abdeba0
commit 23437a0
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 38 deletions.
diff --git a/frontend/src/Components/ExternalLink.tsx b/frontend/src/Components/ExternalLink.tsx
@@ -13,6 +13,7 @@ export default function ExternalLink({
             className="flex gap-2 body-small text-body-text items-center"
             href={url}
             target="_blank"
+            rel="noopener noreferrer"
         >
             <ArrowTopRightOnSquareIcon className="w-4" />
             {children}

diff --git a/frontend/src/Components/ResourcesCategoryCard.tsx b/frontend/src/Components/ResourcesCategoryCard.tsx
@@ -6,10 +6,8 @@ export default function ResourcesCategoryCard({
 }: {
     category: ResourceCategory;
 }) {
-    const cardClasses = `card card-compact overflow-hidden`;
-
     return (
-        <div className={cardClasses}>
+        <div className="card card-compact overflow-hidden">
             <div className="card-body gap-2">
                 <h3 className="card-title text-sm">{category.name}</h3>
                 {category.links.map((link: ResourceLink) => {

diff --git a/frontend/src/Components/forms/AddLinkForm.tsx b/frontend/src/Components/forms/AddLinkForm.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { SubmitButton } from '../inputs/SubmitButton';
 import { TextInput } from '../inputs/TextInput';
@@ -13,8 +12,6 @@ export default function AddLinkForm({
 }: {
     onSuccess: (title: string, url: string) => void;
 }) {
-    const [errorMessage, _] = useState('');
-
     const {
         register,
         handleSubmit,
@@ -47,7 +44,7 @@ export default function AddLinkForm({
                     errors={errors}
                     register={register}
                 />
-                <SubmitButton errorMessage={errorMessage} />
+                <SubmitButton />
             </form>
         </div>
     );

diff --git a/frontend/src/Components/forms/AddResourceCollectionForm.tsx b/frontend/src/Components/forms/AddResourceCollectionForm.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { TextInput, CloseX, SubmitButton } from '../inputs';
 
@@ -19,7 +18,6 @@ interface AddResourceCollectionFormProps {
 export default function AddResourceCollectionForm({
     onSuccess
 }: AddResourceCollectionFormProps) {
-    const [errorMessage, _] = useState('');
     const {
         register,
         handleSubmit,
@@ -44,7 +42,7 @@ export default function AddResourceCollectionForm({
                     errors={errors}
                     register={register}
                 />
-                <p className="text-sm text-red-500 mt-2">
+                <p className="text-sm text-error mt-2">
                     To add a collection, you must also add an accompanying link.
                 </p>
                 <TextInput
@@ -63,7 +61,7 @@ export default function AddResourceCollectionForm({
                     errors={errors}
                     register={register}
                 />
-                <SubmitButton errorMessage={errorMessage} />
+                <SubmitButton />
             </form>
         </div>
     );

diff --git a/frontend/src/Components/forms/EditResourceCollectionForm.tsx b/frontend/src/Components/forms/EditResourceCollectionForm.tsx
@@ -1,6 +1,5 @@
 // Component form that takes in a category and gives the user the ability to rename it. Calls back onSuccess when the category is renamed.
 
-import { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { TextInput, CloseX, SubmitButton } from '../inputs';
 
@@ -15,7 +14,6 @@ export default function EditResourceCollectionForm({
     collectionName: string;
     onSuccess: (newCollectionName: string) => void;
 }) {
-    const [errorMessage, _] = useState();
     const {
         register,
         handleSubmit,
@@ -44,7 +42,7 @@ export default function EditResourceCollectionForm({
                     errors={errors}
                     register={register}
                 />
-                <SubmitButton errorMessage={errorMessage} />
+                <SubmitButton />
             </form>
         </div>
     );

diff --git a/frontend/src/Components/inputs/SubmitButton.tsx b/frontend/src/Components/inputs/SubmitButton.tsx
@@ -1,8 +1,13 @@
-export function SubmitButton({ errorMessage }: { errorMessage: string }) {
+export function SubmitButton({ errorMessage }: { errorMessage?: string }) {
     return (
         <label className="form-control pt-4">
             <input className="btn btn-primary" type="submit" value="Submit" />
-            <div className="text-error text-center pt-2">{errorMessage}</div>
+
+            {errorMessage ? (
+                <div className="text-error text-center pt-2">
+                    {errorMessage}
+                </div>
+            ) : null}
         </label>
     );
 }
diff --git a/frontend/src/Pages/ResourcesManagement.tsx b/frontend/src/Pages/ResourcesManagement.tsx
@@ -366,6 +366,41 @@ const SortableCollectionList = ({
         setDraggedOverItem(null);
     };
 
+    const dragOver = (e: React.DragEvent<HTMLDivElement>, index: number) => {
+        e.preventDefault();
+        const source = e.dataTransfer.getData('text/plain');
+        if (source === 'collection-list') {
+            setDraggedOverItem(index);
+        }
+    };
+
+    const dragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        setDraggedOverItem(null);
+    };
+
+    const dragDrop = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        const source = e.dataTransfer.getData('text/plain');
+        if (source === 'collection-list') {
+            handleSort();
+        }
+    };
+
+    const dragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
+        draggedItem.current = index;
+        e.dataTransfer.setData('text/plain', 'collection-list');
+    };
+
+    const dragEnd = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        if (dragOverItem[0] == null) {
+            setDraggedOverItem(-1);
+        } else {
+            handleSort();
+        }
+    };
+
     return collections.map((collection, index) => {
         return (
             <div
@@ -387,21 +422,11 @@ const SortableCollectionList = ({
                                 ? 'pt-36 flex'
                                 : 'pt-2 flex'
                         }
-                        onDragOver={(e) => {
-                            e.preventDefault(), setDraggedOverItem(index);
-                        }}
-                        onDragLeave={(e) => {
-                            e.preventDefault(), setDraggedOverItem(null);
-                        }}
-                        onDrop={(e) => {
-                            e.preventDefault(), draggedItem.current == null;
-                        }}
-                        onDragStart={() => (draggedItem.current = index)}
-                        onDragEnd={(e) => {
-                            e.preventDefault();
-                            if (dragOverItem[0] == null) setDraggedOverItem(-1);
-                            else handleSort();
-                        }}
+                        onDragOver={(e) => dragOver(e, index)}
+                        onDragLeave={(e) => dragLeave(e)}
+                        onDrop={(e) => dragDrop(e)}
+                        onDragStart={(e) => dragStart(e, index)}
+                        onDragEnd={(e) => dragEnd(e)}
                         draggable
                     >
                         <ResourceCollectionCardWithActions
@@ -446,7 +471,7 @@ const ResourceCollectionCardWithActions = ({
     onResourceCollectionClick: (collection: EditableResourceCollection) => void;
     onDeleteCollectionClick: (collectionId: number) => void;
 }) => {
-    const cardClasses = `card card-compact grow overflow-visible ${collection.isModified ? 'bg-pale-yellow' : ''} ${selected ? 'border border-dark-yellow' : ''}`;
+    const cardClasses = `card card-compact grow overflow-visible ${collection.isModified ? 'bg-pale-yellow' : 'bg-inner-background'} ${selected ? 'border border-dark-yellow' : ''}`;
 
     return (
         <div
@@ -534,6 +559,9 @@ const ResourceCollectionEditor = ({
     const handleSort = () => {
         if (draggedItem === null || draggedOverItem === null) return;
 
+        // Check to see if dragged item stayed in the same position
+        if (draggedItem === draggedOverItem) return;
+
         const newLinks = [...collection.links];
         const draggedLink = newLinks.splice(draggedItem, 1)[0];
         newLinks.splice(draggedOverItem, 0, draggedLink);
@@ -549,7 +577,7 @@ const ResourceCollectionEditor = ({
     };
 
     return (
-        <div className="card">
+        <div className="card bg-inner-background">
             <div className="card-body gap-2">
                 <div className="flex justify-between">
                     <h3 className="card-title text-sm">{collection.name}</h3>
@@ -576,7 +604,7 @@ const ResourceCollectionEditor = ({
                 </div>
                 <table className="table">
                     <thead>
-                        <tr className="border-grey-600">
+                        <tr className="border-grey-3">
                             <th className="w-4"></th>
                             <th>Link Name</th>
                             <th>Link URL</th>
@@ -599,7 +627,7 @@ const ResourceCollectionEditor = ({
                                         onDragEnd={handleSort}
                                         className={
                                             draggedItem === linkIndex
-                                                ? 'bg-gray-200'
+                                                ? 'bg-grey-1'
                                                 : ''
                                         }
                                     >

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -53,9 +53,9 @@ export default {
                     '--base-teal': '#103531',
                     '--background': '#0F2926',
                     '--inner-background': '#1A3F3B',
-                    '--dark-yellow': '#EA9B00',
-                    '--primary-yellow': '#FDC601',
-                    '--pale-yellow': '#18ABA0',
+                    '--dark-yellow': '#FFDE88',
+                    '--primary-yellow': '#F5A623',
+                    '--pale-yellow': '#8C6E3C',
                     '--grey-1': '#737373',
                     '--grey-2': '#999999',
                     '--grey-3': '#CCCCCC',