Feature/fg 101 (#794)

* fått enkel innlogging til å funke * fått create user til å funke ish * fixed login in header * unstable finished * change api endpoint fro 8080 to 8000 * kommentert ut litt kode som skal brukes senere. * updated browser-list-db because azure static check asked me to do so * added linebreak to run azure static web apps i github * lagt til createUser komponent * Det funker plz! * Lagt til knapp til å komme seg tilbake til arkivsjef side * Lagt til input for fornavn og etternav,endret på styling også * begynt på side for endring av photgangbangers * FIX AZURE error lol * lagt til mulighet til å redigere info til en photogangbanger * Fikset og stylet redigeringSide, kan nå trykke på switch for om bruker er pang og eller aktiv * Slettet noen console logs * Fjerne enda none til console logs * Dummy commit * oppdatert Azure/msal/browser * Endret noen små feil * slettet kommentar * Endret på utsende på gridImageViewer, ser litt bedre ut nå * Gjorde rammene rundt bildene litt tynnere * Kan nå søke gjennom suggestions * kan nå søke ved å trykke enter, eller trykke på søke knappen * sonar cloud endringer * Oppdatert msal * Tester med å gjøre en liten endring * Fjernet noen imports som ikke ble brukt --------- Co-authored-by: Marius Bølset Gisleberg <[email protected]>
Fotogjengen · Apr 6, 2024 · 751717e · 751717e
1 parent d8a8a0b
commit 751717e
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^1.11.0",
-    "@azure/msal-browser": "^3.10.0",
+    "@azure/msal-browser": "^3.11.1",
     "@azure/msal-react": "^2.0.8",
     "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.10.4",

diff --git a/src/components/ImageViewer/GridImageViewer.tsx b/src/components/ImageViewer/GridImageViewer.tsx
@@ -5,20 +5,30 @@ import "react-image-lightbox/style.css";
 import { PhotoDto } from "../../../generated";
 import { createImgUrl } from "../../utils/createImgUrl/createImgUrl";
 import { ImageContext } from "../../contexts/ImageContext";
+import { useSearchContext } from "../../views/Search/SearchProvider";
 
 interface Props {
   photos: PhotoDto[];
 }
 
 const ShowMotive: FC<Props> = ({ photos }) => {
   const { setPhotos, setPhotoIndex, setIsOpen } = useContext(ImageContext);
+
+  const searchContext = useSearchContext();
+  const searchQuery = searchContext ? searchContext.searchQuery : "";
+
+
+
+
+  const filteredPhotos = photos.filter((photo: PhotoDto) => searchQuery != "" ? (photo.motive.title.toLowerCase().includes(searchQuery.toLowerCase())) : photos); //Finn en bedre løsning etterhvert
+
   const updateIndex = (index: number) => {
     setPhotos(photos);
     setPhotoIndex(index);
     setIsOpen(true);
   };
 
-  const imageItems = photos.map((image: PhotoDto, index: number) => {
+  const imageItems = filteredPhotos.map((image: PhotoDto, index: number) => {
     const key = `motive-image${index}`;
     return (
       <MotiveImage

diff --git a/src/components/SearchComponent/Search.module.css b/src/components/SearchComponent/Search.module.css
@@ -6,7 +6,8 @@
 .suggestions {
   background-color: #f0f0f0;
   border: 1px solid #a0a0a0;
-  border-radius: 1px;
+  border-radius: 5px;
+  position: absolute;
 }
 
 .suggestions:hover {
@@ -16,6 +17,7 @@
 
 .suggestionBox {
   background-color: white;
-  border-radius: 1px;
-  border: 1px solid #a0a0a0;
+  border-bottom: #a0a0a0 1px solid;
+  position: relative;
+
 }
diff --git a/src/components/SearchComponent/SearchField.tsx b/src/components/SearchComponent/SearchField.tsx
@@ -2,11 +2,18 @@ import React, { FC, useEffect, useMemo, useState } from "react";
 import { IconButton, InputAdornment, MenuItem, TextField } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import { SearchSuggestionsApi } from "../../utils/api/searchSuggestionsApi";
+import styles from "./Search.module.css";
+import { useSearchContext } from "../../views/Search/SearchProvider";
+
 
 const SearchField: FC = () => {
   const [search, setSearch] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
 
+  const searchContext = useSearchContext();
+  const setSearchQuery = searchContext ? searchContext.setSearchQuery : () => {console.error("Search is context not available"); };
+
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(event.target.value);
   };
@@ -36,34 +43,48 @@ const SearchField: FC = () => {
 
   const suggestionBoxes = useMemo(() => {
     return suggestions.map((s, key) => (
-      <MenuItem value={s} key={key} color="" onClick={() => handleSearch(s)}>
+      <MenuItem  className={styles.suggestionBox} value={s} key={key} color="" onClick={() => handleSearch(s)}>
         {s}
       </MenuItem>
     ));
   }, [suggestions]);
 
   const handleSearch = (s: string) => {
-    return s;
+    setSearch(s)
+    setSearchQuery(s)
+    //Send s to a different component
   };
 
+  const enterSearch = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter') {
+      console.log(search)
+      setSearchQuery(search);
+
+    }
+  }
+
+
+
   return (
     <div>
       <TextField
         label={placeholder}
+        value={search}
         fullWidth
         variant="outlined"
         onChange={handleChange}
+        onKeyPress={enterSearch}
         InputProps={{
           endAdornment: (
             <InputAdornment position="end">
-              <IconButton>
+              <IconButton onClick={() => setSearchQuery(search)}>
                 <SearchIcon />
               </IconButton>
             </InputAdornment>
           ),
         }}
       />
-      <div>{suggestionBoxes}</div>
+      <div className={styles.suggestions}>{suggestionBoxes}</div>
     </div>
   );
 };

diff --git a/src/views/Search/Search.tsx b/src/views/Search/Search.tsx
@@ -2,9 +2,17 @@ import React from "react";
 import SearchField from "../../components/SearchComponent/SearchField";
 import SearchPhotoGrid from "./SearchPhotoGrid";
 import styles from "./Searchbar.module.css";
+import SearchProvider from "./SearchProvider";
+
+
 
 const Search = () => {
+
+
+
+
   return (
+    <SearchProvider>
     <div>
       <div className={styles.backgroundFlex} style={{backgroundColor: "white"}}>
         <SearchField />
@@ -14,6 +22,7 @@ const Search = () => {
         <SearchPhotoGrid />
       </div>
     </div>
+    </SearchProvider>
   );
 };
 

diff --git a/src/views/Search/SearchProvider.tsx b/src/views/Search/SearchProvider.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import { useContext, createContext } from 'react';
+
+export interface SearchContextType {
+    searchQuery: string; 
+    setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+  }
+
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export const useSearchContext = () => useContext(SearchContext);
+
+const SearchProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [searchQuery, setSearchQuery] = useState<string>("");
+    return (
+        <SearchContext.Provider value={{ searchQuery, setSearchQuery }}>
+            {children}
+        </SearchContext.Provider>
+    );
+};
+
+export default SearchProvider