chore: initial public commit

client/app/components/modals/MergeModal.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react";
+import { Modal } from "./Modal";
+import { search, type SearchResponse } from "api/api";
+import SearchResults from "../SearchResults";
+import type { MergeFunc, MergeSearchCleanerFunc } from "~/routes/MediaItems/MediaLayout";
+import { useNavigate } from "react-router";
+
+interface Props {
+    open: boolean 
+    setOpen: Function
+    type: string
+    currentId: number
+    currentTitle: string
+    mergeFunc: MergeFunc
+    mergeCleanerFunc: MergeSearchCleanerFunc
+}
+
+export default function MergeModal(props: Props) {
+    const [query, setQuery] = useState('');
+    const [data, setData] = useState<SearchResponse>();
+    const [debouncedQuery, setDebouncedQuery] = useState(query);
+    const [mergeTarget, setMergeTarget] = useState<{title: string, id: number}>({title: '', id: 0})
+    const [mergeOrderReversed, setMergeOrderReversed] = useState(false)
+    const navigate = useNavigate()
+
+
+    const closeMergeModal = () => {
+        props.setOpen(false)
+        setQuery('')
+        setData(undefined)
+        setMergeOrderReversed(false)
+        setMergeTarget({title: '', id: 0})
+    }
+
+    const toggleSelect = ({title, id}: {title: string, id: number}) => {
+        if (mergeTarget.id === 0) {
+            setMergeTarget({title: title, id: id})
+        } else {
+            setMergeTarget({title:"", id: 0})
+        }
+    }
+
+    useEffect(() => {
+        console.log(mergeTarget)
+    }, [mergeTarget])
+
+    const doMerge = () => {
+        let from, to
+        if (!mergeOrderReversed) {
+            from = mergeTarget
+            to = {id: props.currentId, title: props.currentTitle}
+        } else {
+            from = {id: props.currentId, title: props.currentTitle}
+            to = mergeTarget
+        }
+        props.mergeFunc(from.id, to.id)
+        .then(r => {
+            if (r.ok) {
+                if (mergeOrderReversed) {
+                    navigate(`/${props.type.toLowerCase()}/${mergeTarget}`)
+                    closeMergeModal()
+                } else {
+                    window.location.reload()
+                }
+            } else {
+                // TODO: handle error
+                console.log(r)
+            }
+        })
+        .catch((err) => console.log(err))
+    }
+    
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedQuery(query);
+            if (query === '') {
+                setData(undefined)
+            }
+        }, 300);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [query]);
+
+    useEffect(() => {
+        if (debouncedQuery) {
+            search(debouncedQuery).then((r) => {
+                r = props.mergeCleanerFunc(r, props.currentId)
+                setData(r);
+            });
+        }
+    }, [debouncedQuery]);
+
+    return (
+    <Modal isOpen={props.open} onClose={closeMergeModal}>
+        <h2>Merge {props.type}s</h2>
+        <div className="flex flex-col items-center">
+            <input
+                type="text"
+                autoFocus
+                // i find my stupid a(n) logic to be a little silly so im leaving it in even if its not optimal
+                placeholder={`Search for a${props.type.toLowerCase()[0] === 'a' ? 'n' : ''} ${props.type.toLowerCase()} to be merged into the current ${props.type.toLowerCase()}`}
+                className="w-full mx-auto fg bg rounded p-2"
+                onChange={(e) => setQuery(e.target.value)}
+            />
+            <SearchResults selectorMode data={data} onSelect={toggleSelect}/>
+            { mergeTarget.id !== 0 ? 
+            <>
+            {mergeOrderReversed ? 
+            <p className="mt-5"><strong>{props.currentTitle}</strong> will be merged into <strong>{mergeTarget.title}</strong></p>
+            :
+            <p className="mt-5"><strong>{mergeTarget.title}</strong> will be merged into <strong>{props.currentTitle}</strong></p>
+            }
+            <button className="hover:cursor-pointer px-5 py-2 rounded-md mt-5 bg-(--color-bg) hover:bg-(--color-bg-tertiary)" onClick={doMerge}>Merge Items</button>
+            <div className="flex gap-2 mt-3">
+                <input type="checkbox" name="reverse-merge-order" checked={mergeOrderReversed} onChange={() => setMergeOrderReversed(!mergeOrderReversed)} />
+                <label htmlFor="reverse-merge-order">Reverse merge order</label>
+            </div>
+            </> :
+            ''}
+        </div>
+    </Modal>
+    )
+}