feat: added search bar to modrinth container

pyrohost · Dec 27, 2024 · 8885bf2 · 8885bf2
1 parent b0b4320
commit 8885bf2
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 31 deletions.
diff --git a/resources/scripts/components/server/modrinth/ModrinthContainer.tsx b/resources/scripts/components/server/modrinth/ModrinthContainer.tsx
@@ -1,15 +1,19 @@
+import debounce from 'debounce';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
+import Can from '@/components/elements/Can';
 import ContentBox from '@/components/elements/ContentBox';
 import { ModBox } from '@/components/elements/ModBox';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 
+import { ServerContext } from '@/state/server';
+
 import ProjectSelector from './DisplayMods';
 import EnvironmentSelector from './EnvironmentSelector';
 import GameVersionSelector from './GameVersionSelector';
 import LoaderSelector from './LoaderSelector';
-import { fetchNewProjects } from './config';
+import { settings } from './config';
 
 export default () => {
     const [appVersion, setAppVersion] = useState<string | null>(null);
@@ -18,6 +22,18 @@ export default () => {
         versions: [],
         environments: [],
     });
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const updateSearchTerms = () => {
+        // settings.searchTerms = setSearchTerm;
+        // settings.searchTerms = setSearchTerm;
+        settings.searchTerms = searchTerm;
+        console.log(settings.searchTerms);
+        return debounce(setSearchTerm, 50);
+    };
+    const debouncedSearchTerm = updateSearchTerms();
 
     const environment = ['Client', 'Server'];
     const url = 'https://api.modrinth.com/v2';
@@ -37,49 +53,57 @@ export default () => {
         getAppVersion();
     }, []);
 
-    // Ensure components only render once appVersion is available
+    // console.log(settings.searchTerms);
+
+    useEffect(() => {
+        setSearchTerm('');
+    }, [location]);
+
     if (!appVersion) {
-        return <div>Loading...</div>; // Wait until appVersion is fetched
+        return <div>Loading...</div>;
     }
 
     // Function to update settings
     const updateSettings = (key: keyof typeof settings, value: any) => {
         setSettings((prevSettings) => ({ ...prevSettings, [key]: value }));
     };
 
+    const handleSearch = () => {
+        toast.success(`Searching for: ${searchQuery}`);
+        console.log(searchQuery);
+    };
+
     return (
         <PageContentBlock title={'Mods/Plugins'}>
-            <div className='flex justify-center items-center w-full'>
-                <ModBox>
-                    <ContentBox className='text-center'>Search Bar</ContentBox>
-                </ModBox>
-            </div>
             <div className='flex flex-wrap gap-4'>
                 <ContentBox
                     className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl md:w-1/6'
                     title='Settings'
                 >
-                    <ModBox>
-                        <ContentBox title='Loader' className=''>
-                            <LoaderSelector
-                                appVersion={appVersion}
-                                baseUrl={url}
-                                // onSelectionChange={(selectedLoaders) => updateSettings('loaders', selectedLoaders)}
-                            />
-                        </ContentBox>
-                    </ModBox>
-
-                    <ModBox>
-                        <ContentBox title='Version' className='scrollbar-thumb-red-700'>
-                            <GameVersionSelector
-                                appVersion={appVersion}
-                                baseUrl={url}
-                                // onSelectionChange={(selectedVersions) => updateSettings('versions', selectedVersions)}
-                            />
-                        </ContentBox>
-                    </ModBox>
-
-                    <ModBox>
+                    <Can action={'modrinth.loader'}>
+                        <ModBox>
+                            <ContentBox title='Loader' className=''>
+                                <LoaderSelector
+                                    appVersion={appVersion}
+                                    baseUrl={url}
+                                    // onSelectionChange={(selectedLoaders) => updateSettings('loaders', selectedLoaders)}
+                                />
+                            </ContentBox>
+                        </ModBox>
+                    </Can>
+                    <Can action={'modrinth.version'}>
+                        <ModBox>
+                            <ContentBox title='Version' className='scrollbar-thumb-red-700'>
+                                <GameVersionSelector
+                                    appVersion={appVersion}
+                                    baseUrl={url}
+                                    // onSelectionChange={(selectedVersions) => updateSettings('versions', selectedVersions)}
+                                />
+                            </ContentBox>
+                        </ModBox>
+                    </Can>
+                    {/* TODO: Add this field that lets you choose between client and server side mods */}
+                    {/* <ModBox>
                         <ContentBox title='Environment' className=''>
                             <EnvironmentSelector
                                 items={environment}
@@ -88,13 +112,21 @@ export default () => {
                                 }
                             />
                         </ContentBox>
-                    </ModBox>
+                    </ModBox> */}
                 </ContentBox>
 
                 <ContentBox
                     className='p-8 bg-[#ffffff09] border-[1px] border-[#ffffff11] shadow-sm rounded-xl w-full md:w-4/5'
                     title='Modrinth'
                 >
+                    <input
+                        className='pl-14 py-4 w-full rounded-lg bg-[#ffffff11] text-sm font-bold mb-4'
+                        type='text'
+                        placeholder='Search'
+                        onChange={(event) => debouncedSearchTerm(event.target.value)}
+                        // onChange={(event) => console.log(event.target.value)}
+                    />
+
                     <ProjectSelector appVersion={appVersion} baseUrl={url} nonApiUrl={nonApiUrl} />
                 </ContentBox>
             </div>

diff --git a/resources/scripts/components/server/modrinth/config.ts b/resources/scripts/components/server/modrinth/config.ts
@@ -1,3 +1,10 @@
+interface Settings {
+    loaders: any[];
+    versions: any[];
+    environments: any[];
+    searchTerms: string;
+}
+
 export const gameLoaders = [];
 export const gamerVersions = [];
 
@@ -9,10 +16,11 @@ export const apiEndpoints = {
     versions: `/tag/game_version`,
 };
 
-export const settings = {
+export const settings: Settings = {
     loaders: [],
     versions: [],
     environments: [],
+    searchTerms: '',
 };
 
 export const fetchHeaders = (appVersion) => ({