fix: more appropriate buttons and names for result state

agrc · Jun 5, 2023 · a57d328 · a57d328
1 parent 0e35873
commit a57d328
Showing 1 changed file with 30 additions and 19 deletions.
diff --git a/src/components/search-wizard/Wizard.jsx b/src/components/search-wizard/Wizard.jsx
@@ -54,31 +54,42 @@ export default function SearchWizard() {
       {state.matches('error') ? (
         <p>{JSON.stringify(state.context.error, null, 2)}</p>
       ) : null}
-      <div className="justify-self-end border-t border-t-slate-300 p-2">
-        <Button
-          appearance={Button.Appearances.solid}
-          color={Button.Colors.primary}
-          className="w-full"
-          size={Button.Sizes.xl}
-          busy={state.matches('searching')}
-          disabled={state.context.searchLayers.length === 0}
-          onClick={() => send('SEARCH')}
-        >
-          Search{' '}
-          {state.context.searchLayers.length
-            ? `${state.context.searchLayers.length} Layer${
-                state.context.searchLayers.length > 1 ? 's' : ''
-              }`
-            : null}
-        </Button>
+      <div className="space-y-2 justify-self-end border-t border-t-slate-300 p-2">
+        {state.matches('result') ? (
+          <Button
+            color={Button.Colors.primary}
+            className="w-full"
+            size={Button.Sizes.xl}
+            onClick={() => send('QUERY_LAYERS')}
+          >
+            Back
+          </Button>
+        ) : (
+          <Button
+            appearance={Button.Appearances.solid}
+            color={Button.Colors.primary}
+            className="w-full"
+            size={Button.Sizes.xl}
+            busy={state.matches('searching')}
+            disabled={state.context.searchLayers.length === 0}
+            onClick={() => send('SEARCH')}
+          >
+            Search{' '}
+            {state.context.searchLayers.length
+              ? `${state.context.searchLayers.length} Layer${
+                  state.context.searchLayers.length > 1 ? 's' : ''
+                }`
+              : null}
+          </Button>
+        )}
         <Button
           color={Button.Colors.accent}
-          className="mt-2 w-full"
+          className="w-full"
           size={Button.Sizes.xl}
           onClick={() => send('CLEAR')}
           disabled={state.matches('searching')}
         >
-          Clear
+          {state.matches('result') ? 'Start New Search' : 'Clear'}
         </Button>
       </div>
     </div>