adding url params

ff14-advanced-market-search · Sep 1, 2024 · 86870ee · 86870ee
1 parent dc6a840
commit 86870ee
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 20 deletions.
diff --git a/app/routes/queries.world-comparison.tsx b/app/routes/queries.world-comparison.tsx
@@ -1,4 +1,4 @@
-import { useActionData, useNavigation } from '@remix-run/react'
+import { useActionData, useLoaderData, useNavigation } from '@remix-run/react'
 import { ContentContainer, PageWrapper, Title } from '~/components/Common'
 import SmallFormContainer from '~/components/form/SmallFormContainer'
 import type { ActionFunction } from '@remix-run/cloudflare'
@@ -20,6 +20,10 @@ import {
 } from '@heroicons/react/outline'
 import { WorldList } from '~/utils/locations/Worlds'
 import TitleTooltip from '~/components/Common/TitleTooltip'
+import {
+  getActionUrl,
+  handleSearchParamChange
+} from '~/utils/urlSeachParamsHelpers'
 
 const pathHash: Record<string, string> = {
   hqOnly: 'High Quality Only',
@@ -46,6 +50,42 @@ export const links: LinksFunction = () => [
   }
 ]
 
+// Define default form values
+const defaultFormValues = {
+  itemIds: '',
+  exportServers: '',
+  hqOnly: 'false'
+}
+
+// Define input schema for validation
+const inputSchema = z.object({
+  itemIds: z.string().min(1),
+  exportServers: z.string().min(1),
+  hqOnly: z.optional(z.string())
+})
+
+// Loader function to handle URL parameters
+export const loader: LoaderFunction = async ({ request }) => {
+  const params = new URL(request.url).searchParams
+
+  const values = {
+    itemIds: params.get('itemIds') || defaultFormValues.itemIds,
+    exportServers:
+      params.get('exportServers') || defaultFormValues.exportServers,
+    hqOnly: params.get('hqOnly') || defaultFormValues.hqOnly
+  }
+
+  const validParams = inputSchema.safeParse(values)
+  if (!validParams.success) {
+    return json({
+      exception: `Missing: ${validParams.error.issues
+        .map(({ path }) => path.join(', '))
+        .join(', ')}`
+    })
+  }
+  return json(validParams.data)
+}
+
 const sortByPrice =
   (desc: boolean) => (first: { price: number }, second: { price: number }) => {
     if (first.price === second.price) {
@@ -101,6 +141,7 @@ const Index = () => {
   const results = useActionData<
     ItemServerComparisonList | { exception: string } | {}
   >()
+  const loaderData = useLoaderData<typeof defaultFormValues>()
 
   const [modal, setModal] = useState<'exportServers' | 'items' | null>(null)
   const [state, setState] = useState<{
@@ -137,7 +178,8 @@ const Index = () => {
         onClick={onSubmit}
         loading={transition.state === 'submitting'}
         disabled={transition.state === 'submitting'}
-        error={error}>
+        error={error}
+        action={getActionUrl('/queries/world-comparison', state)}>
         <div className="pt-4">
           <div className="sm:px-4 flex flex-col gap-4">
             <div className="flex flex-col max-w-full relative">

diff --git a/app/tailwind.css b/app/tailwind.css
@@ -1350,13 +1350,13 @@ select {
   border-collapse: separate;
 }
 
-.border-spacing-2 {
-  --tw-border-spacing-x: 0.5rem;
+.border-spacing-y-2 {
   --tw-border-spacing-y: 0.5rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 
-.border-spacing-y-2 {
+.border-spacing-2 {
+  --tw-border-spacing-x: 0.5rem;
   --tw-border-spacing-y: 0.5rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
@@ -1513,10 +1513,6 @@ select {
   gap: 0.75rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-6 {
   gap: 1.5rem;
 }
@@ -1525,6 +1521,10 @@ select {
   gap: 2rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-y-3 {
   row-gap: 0.75rem;
 }
@@ -2320,18 +2320,18 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-red-500 {
   --tw-shadow-color: #ef4444;
   --tw-shadow: var(--tw-shadow-colored);
@@ -2850,11 +2850,6 @@ select {
   background-color: rgb(127 29 29 / var(--tw-bg-opacity));
 }
 
-:is(.dark .dark\:bg-slate-600) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
-}
-
 :is(.dark .dark\:bg-slate-700) {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
@@ -2879,6 +2874,11 @@ select {
   background-color: transparent;
 }
 
+:is(.dark .dark\:bg-slate-600) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
+}
+
 :is(.dark .dark\:font-medium) {
   font-weight: 500;
 }