Merge pull request #130 from FINTLabs/FKS-219-frontend-fikse-sok-i-me…

…mbers

FKS-219-frontend-fikse-sok-i-members

app/components/common/Search.tsx

@@ -0,0 +1,44 @@
+import {Search as AkselSearch} from "@navikt/ds-react";
+import React, {useState} from "react";
+import {Form, useSearchParams} from "@remix-run/react";
+import {
+    filterResetPageParam,
+    handleClearSearchFieldString,
+    handleSearchFieldString
+} from "~/components/common/CommonFunctions";
+
+type SearchInputProps = {
+    label: string
+    id: string
+}
+
+export const Search = ({label, id}: SearchInputProps) => {
+    const [searchString, setSearchString] = useState("")
+    const [searchParams, setSearchParams] = useSearchParams()
+
+    const pageParam = searchParams.get("page")
+
+    return (
+        <Form
+            className={"searchField"}
+            onSubmit={(event) => {
+                handleSearchFieldString(event, setSearchParams, searchString)
+                setSearchString("")
+                filterResetPageParam(pageParam, setSearchParams)
+            }}
+        >
+            <AkselSearch
+                role="search"
+                id={id}
+                label={label}
+                hideLabel={false}
+                variant="secondary"
+                value={searchString}
+                onChange={event => setSearchString(event)}
+                onClear={() => {
+                    handleClearSearchFieldString(setSearchParams)
+                }}
+            />
+        </Form>
+    );
+};

app/components/resource-module-admin/ResourceModuleSearch.tsx

@@ -1,23 +1,12 @@
-import {Search} from "@navikt/ds-react";
-import {useSearchParams} from "@remix-run/react";
-import React, {useState} from "react";
+import React from "react";
+import {Search} from "~/components/common/Search";
 
 const ResourceModuleSearch = () => {
-    const [searchValue, setSearchValue] = useState("")
-    const [, setSearchParams] = useSearchParams()
-
-    const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
-        setSearchParams(searchParams => {
-            searchValue ? searchParams.set("name", searchValue) : searchParams.delete("name")
-            return searchParams
-        })
-        event.preventDefault() // Prevent refresh of page
-    }
-
     return (
-        <form onSubmit={(event) => handleSearch(event)}>
-            <Search label="Søk etter brukere med rolle" hideLabel={false} variant="secondary" onChange={event => setSearchValue(event)} />
-        </form>
+        <Search
+            label="Søk etter brukere med rolle"
+            id={"search-user-role"}
+        />
     )
 }
 

app/components/resource/ResourceSearch.tsx

@@ -1,39 +1,6 @@
-import {Search} from "@navikt/ds-react";
-import {useState} from "react";
-import {Form, useSearchParams} from "@remix-run/react";
-import {
-    filterResetPageParam,
-    handleClearSearchFieldString,
-    handleSearchFieldString
-} from "~/components/common/CommonFunctions";
+import React from "react";
+import {Search} from "~/components/common/Search";
 
 export const ResourceSearch = () => {
-
-    const [searchString, setSearchString] = useState("")
-    const [searchParams, setSearchParams] = useSearchParams()
-
-    const pageParam = searchParams.get("page")
-
-    return (
-        <Form className={"searchField"}
-              onSubmit={event => {
-                  handleSearchFieldString(event, setSearchParams, searchString)
-                  setSearchString("")
-                  filterResetPageParam(pageParam, setSearchParams)
-              }}
-        >
-            <Search
-                id="search-resource"
-                role="search"
-                label="Søk etter ressurs"
-                hideLabel={false}
-                variant="secondary"
-                value={searchString}
-                onChange={event => setSearchString(event)}
-                onClear={() => {
-                    handleClearSearchFieldString(setSearchParams)
-                }}
-            />
-        </Form>
-    );
+    return <Search id="search-resource" label="Søk etter ressurs" />
 };

app/components/role/RoleSearch.tsx

@@ -1,39 +1,6 @@
-import {Search} from "@navikt/ds-react";
-import React, {useState} from "react";
-import {Form, useSearchParams} from "@remix-run/react";
-import {
-    filterResetPageParam,
-    handleClearSearchFieldString,
-    handleSearchFieldString
-} from "~/components/common/CommonFunctions";
+import React from "react";
+import { Search } from "~/components/common/Search";
 
-export const RoleSearch = () => {
-
-    const [searchString, setSearchString] = useState("")
-    const [searchParams, setSearchParams] = useSearchParams()
-
-    const pageParam = searchParams.get("page")
-
-    return (
-        <Form className={"searchField"}
-              onSubmit={(event) => {
-                  handleSearchFieldString(event, setSearchParams, searchString)
-                  setSearchString("")
-                  filterResetPageParam(pageParam, setSearchParams)
-              }}
-        >
-            <Search
-                role="search"
-                id="search-role"
-                label="Søk etter gruppe"
-                hideLabel={false}
-                variant="secondary"
-                value={searchString}
-                onChange={event => setSearchString(event)}
-                onClear={() => {
-                    handleClearSearchFieldString(setSearchParams)
-                }}
-            />
-        </Form>
-    );
-};
+export const RoleSearch = () => (
+    <Search id="search-role" label="Søk etter gruppe" />
+);

app/components/user/UserSearch.tsx

@@ -1,40 +1,8 @@
-import {Search} from "@navikt/ds-react";
-import React, {useState} from "react";
-import {Form, useSearchParams} from "@remix-run/react";
-import {
-    filterResetPageParam,
-    handleClearSearchFieldString,
-    handleSearchFieldString
-} from "~/components/common/CommonFunctions";
-
+import React from "react";
+import {Search} from "~/components/common/Search";
 
 export const UserSearch = () => {
-
-    const [searchString, setSearchString] = useState("")
-    const [searchParams, setSearchParams] = useSearchParams()
-
-    const pageParam = searchParams.get("page")
-
     return (
-        <Form className={"searchField"}
-              onSubmit={event => {
-                  handleSearchFieldString(event, setSearchParams, searchString)
-                  setSearchString("")
-                  filterResetPageParam(pageParam, setSearchParams)
-              }}
-        >
-            <Search
-                role="search"
-                label="Søk etter bruker"
-                id="user-search"
-                hideLabel={false}
-                variant="secondary"
-                value={searchString}
-                onChange={event => setSearchString(event)}
-                onClear={() => {
-                    handleClearSearchFieldString(setSearchParams)
-                }}
-            />
-        </Form>
+        <Search label={"Søk etter bruker"} id={"user-search"} />
     );
 };

app/data/fetch-roles.ts

@@ -37,8 +37,8 @@ export const fetchRoleById = async (request: Request, id: string | undefined) =>
 
 }
 
-export const fetchMembers = async (request: Request, id: string | undefined, size: string, page: string, search: string) => {
-    const response = await fetch(`${ROLE_API_URL}${BASE_PATH}/api/roles/${id}/members?size=${size}&page=${page}&search=${search}`, {
+export const fetchMembers = async (request: Request, id: string | undefined, size: string, page: string, name: string) => {
+    const response = await fetch(`${ROLE_API_URL}${BASE_PATH}/api/roles/${id}/members?size=${size}&page=${page}&name=${name}`, {
         headers: request.headers
     });