Reload on year change

frontend/src/components/TopBar.tsx

@@ -11,8 +11,15 @@ type SelectValue = {
   label: string
 }
 
-const TopBar = ({ routes, color }: { routes: { name: string; path: string }[]; color: string}, ) => {
-  const linkClass = ({ isActive }: { isActive: boolean }) => isActive ? 'underline font-bold' : ''
+const TopBar = ({
+  routes,
+  color,
+}: {
+  routes: { name: string; path: string }[]
+  color: string
+}) => {
+  const linkClass = ({ isActive }: { isActive: boolean }) =>
+    isActive ? 'underline font-bold' : ''
 
   const [yearGroupId, setYearGroupId] = useLocalStorageState('yearGroupId', {
     defaultValue: -1,
@@ -21,11 +28,10 @@ const TopBar = ({ routes, color }: { routes: { name: string; path: string }[]; c
     defaultValue: 'coordinator',
   })
   const [yearGroupOptions, setYearGroupOptions] = useState<SelectValue[]>()
-  const [name, setName] = useState("")
-
 
   const onYearChange = (v: any) => {
     setYearGroupId(v?.value)
+    window.location.reload()
   }
   useQuery('year_groups', () => getYearGroups({ per_page: 100 }), {
     onSuccess: (data) => {
@@ -41,7 +47,7 @@ const TopBar = ({ routes, color }: { routes: { name: string; path: string }[]; c
   })
 
   return (
-    <div className={"flex items-center py-6 px-10 shadow " + color}>
+    <div className={'flex items-center py-6 px-10 shadow ' + color}>
       <h1 className="text-xl font-bold">System PRI</h1>
       <div className="flex ml-10 gap-3">
         {routes.map(({ path, name }) => (
@@ -51,19 +57,22 @@ const TopBar = ({ routes, color }: { routes: { name: string; path: string }[]; c
         ))}
       </div>
       <div className="m-auto flex-col">
-      {userType == 'coordinator' ? <Select
-          closeMenuOnSelect={true}
-          options={yearGroupOptions}
-          placeholder="Wybierz rok"
-          onChange={onYearChange}
-          styles={{
-            control: (styles: any) => ({
-              ...styles,
-              padding: '0.01rem',
-              borderRadius: '0.5rem',
-            }),
-          }}
-        /> : null}
+        {userType === 'coordinator' ? (
+          <Select
+            closeMenuOnSelect={true}
+            options={yearGroupOptions}
+            placeholder="Wybierz rok"
+            onChange={onYearChange}
+            styles={{
+              control: (styles: any) => ({
+                ...styles,
+                padding: '0.01rem',
+                borderRadius: '0.5rem',
+              }),
+            }}
+            value={yearGroupOptions?.find((year) => year.value === yearGroupId)}
+          />
+        ) : null}
       </div>
       <NavLink className="ml-auto" to="/">
         Wyloguj