bugfix, pages and filters

Author: Bud-Macaulay

src/components/OptimadeClient/DropdownSelectors/childProviderDropdown.jsx

@@ -31,7 +31,7 @@ export default function ChildProviderDropdown({
       try {
         setLoadingChildren(true);
         const { children } = await getProviderLinks(
-          selectedProvider.attributes.base_url
+          selectedProvider.attributes.base_url,
         );
         const entries = children.map((c) => ({
           id: c.id,
@@ -61,7 +61,17 @@ export default function ChildProviderDropdown({
   // Render custom input with submit button
   if (selectedProvider.id === "__custom__") {
     return (
-      <div className="flex gap-2 items-center">
+      <form
+        className="flex gap-2 items-center"
+        onSubmit={(e) => {
+          e.preventDefault(); // prevent page reload
+          onSelectChild({
+            id: "__custom__",
+            name: "Custom Endpoint",
+            base_url: customInput,
+          });
+        }}
+      >
         <input
           type="text"
           placeholder="Enter custom endpoint URL"
@@ -71,17 +81,11 @@ export default function ChildProviderDropdown({
         />
         <button
           className={`${baseButtonStyle} rounded-sm md:py-1!`}
-          onClick={() =>
-            onSelectChild({
-              id: "__custom__",
-              name: "Custom Endpoint",
-              base_url: customInput,
-            })
-          }
+          type="submit"
         >
           Submit
         </button>
-      </div>
+      </form>
     );
   }
 

src/components/OptimadeClient/index.jsx

@@ -70,6 +70,11 @@ export function OptimadeClient({ hideProviderList = ["exmpl", "matcloud"] }) {
   });
   const [totalPages, setTotalPages] = useState(1);
 
+  // reset to page one when child changes.
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [selectedChild]);
+
   useEffect(() => {
     const loadProviders = async () => {
       try {
@@ -162,26 +167,23 @@ export function OptimadeClient({ hideProviderList = ["exmpl", "matcloud"] }) {
 
           {/* Filters */}
           <div className="p-2 w-full">
-            {selectedChild?.base_url && (
-              <AnimatePresence>
-                <motion.div
-                  key="filters"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: 20 }}
-                  transition={{ duration: 0.3, ease: "easeInOut" }}
-                  className={containerStyle}
-                >
-                  <OptimadeFilters
-                    queryUrl={selectedChild?.base_url}
-                    onSubmit={(filter) => {
-                      setCurrentFilter(filter);
-                      setCurrentPage(1);
-                    }}
-                  />
-                </motion.div>
-              </AnimatePresence>
-            )}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{
+                opacity: selectedChild?.base_url ? 1 : 0,
+                y: selectedChild?.base_url ? 0 : 20,
+              }}
+              transition={{ duration: 0.3, ease: "easeInOut" }}
+              className={`${containerStyle} ${!selectedChild?.base_url ? "pointer-events-none" : ""}`}
+            >
+              <OptimadeFilters
+                queryUrl={selectedChild?.base_url || ""}
+                onSubmit={(filter) => {
+                  setCurrentFilter(filter);
+                  setCurrentPage(1);
+                }}
+              />
+            </motion.div>
           </div>
 
           <div className="p-2 w-full">