Merge pull request #136 from NishidhJain/bugfix/reset-stars-filter-on-language-change

Fixes Issue #129: Stars filter not getting reset on updating the language

Author: max-programming

components/StarsFilter.tsx

@@ -1,28 +1,28 @@
+import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { SubmitHandler, Controller, useForm } from 'react-hook-form';
-import { GoX } from 'react-icons/go';
 
 interface FormValues {
-  startStars: number;
-  endStars: number | string;
+  startStars: number | '';
+  endStars: number | '';
 }
 
 export default function StarsFilter() {
   const router = useRouter();
   const { handleSubmit, control, reset } = useForm<FormValues>({
     defaultValues: {
       startStars: !router.query.startStars
-        ? undefined
+        ? ''
         : +(router.query.startStars as string),
       endStars: !router.query.endStars
-        ? undefined
+        ? ''
         : +(router.query.endStars as string)
     }
   });
 
   const onSubmit: SubmitHandler<FormValues> = ({ startStars, endStars }) => {
     let query;
-    if (typeof endStars === 'number' && endStars < startStars) {
+    if (typeof endStars === 'number' && typeof startStars === 'number' && endStars < startStars) {
       reset({ startStars, endStars: '' });
       query = { startStars };
       const { endStars, ...rest } = router.query;
@@ -36,6 +36,10 @@ export default function StarsFilter() {
     }
   };
 
+  useEffect(() => {
+    reset();
+  }, [router.query?.language, reset]);
+
   return (
     <form
       className="w-full m-2 mx-auto mb-4 lg:w-2/4 form-control"