Changeset 3e98cea for reactapp/src/Components

Timestamp:

08/06/22 18:16:44 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

800779d

Parents:

d654c74

Message:

added SearchResults page, hide search dropdown when out of focus

Location:

reactapp/src/Components

Files:

• OpinionTree.js (modified) (1 diff)
• Search.js (modified) (4 diffs)
• Styled/Main.style.js (moved) (moved from reactapp/src/Components/Main.style.js ) (1 diff)
• Styled/OpinionCard.style.js (moved) (moved from reactapp/src/Components/OpinionCard.style.js )
• Styled/ProfessorCard.style.js (moved) (moved from reactapp/src/Components/ProfessorCard.style.js )
• Styled/Search.style.js (moved) (moved from reactapp/src/Components/Search.style.js ) (4 diffs)

reactapp/src/Components/OpinionTree.js

@@ -8 +8 @@
   OpinionReplyCardContentTime,
   StyledFontAwesomeIcon,
-} from "./OpinionCard.style";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  solid,
-  regular,
-  brands,
-} from "@fortawesome/fontawesome-svg-core/import.macro";
+} from "./Styled/OpinionCard.style";
+
+import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
 import { dateConverter } from "../Util/dateConverter";
 

reactapp/src/Components/Search.js

@@ -3 +3 @@
 import { transliterate } from "../Util/transliterate";
 import {
-  SearchDropdownResultSmall,
-  SearchDropdownTextSmall,
-  SearchDropdownSmall,
-  SearchDropdownResultLinkSmall,
-  SearchSmall,
-} from "./Search.style";
+  SearchResult,
+  SearchResultText,
+  SearchDropdown,
+  SearchResultLink,
+  SearchBox,
+} from "./Styled/Search.style";
+import { useNavigate } from "react-router";
 function Search() {
   const [query, setQuery] = useState("");
@@ -27 +28 @@
         //setLoaded(true);
       } catch (error) {
-        console.log("Error", error);
+        console.log("Fetching error occured", error);
       }
     };
@@ -33 +34 @@
     if (query.length > 2) fetchData();
   }, [query]);
+
+  const navigate = useNavigate();
+
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      setExpanded(false);
+      navigate("/search", { state: professors });
+    }
+  };
+
+  const [expanded, setExpanded] = useState(false);
+
+  function expand() {
+    setExpanded(true);
+  }
+
+  function close() {
+    setExpanded(false);
+  }
 
   return (
@@ -42 +62 @@
       }}
     >
-      <SearchSmall
+      <SearchBox
         placeholder="Пребарувај..."
         onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        onFocus={expand}
+        onBlur={close}
       />
-      <SearchDropdownSmall
-        display={query.length > 2 && professors.length > 0 ? "block" : "none"}
+      <SearchDropdown
+        display={
+          query.length > 2 && professors.length > 0 && expanded
+            ? "block"
+            : "none"
+        }
       >
         {query.length > 2 &&
           professors.slice(0, 7).map((professor) => (
-            <SearchDropdownResultSmall key={professor.professorId}>
-              <SearchDropdownResultLinkSmall
-                href={"/professor/" + professor.professorId}
-              >
-                <SearchDropdownTextSmall weight="bold" size="medium">
+            <SearchResult
+              key={professor.professorId}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              }}
+              margin="0"
+            >
+              <SearchResultLink href={"/professor/" + professor.professorId}>
+                <SearchResultText weight="bold" size="medium">
                   {professor.professorName}
-                </SearchDropdownTextSmall>
-                <SearchDropdownTextSmall weight="normal" size="smaller">
+                </SearchResultText>
+                <SearchResultText weight="normal" size="er">
                   {professor.faculty.facultyName}
-                </SearchDropdownTextSmall>
-              </SearchDropdownResultLinkSmall>
-            </SearchDropdownResultSmall>
+                </SearchResultText>
+              </SearchResultLink>
+            </SearchResult>
           ))}
-      </SearchDropdownSmall>
+      </SearchDropdown>
     </div>
   );

reactapp/src/Components/Styled/Main.style.js

@@ -16 +16 @@
   font-size: 36pt;
   text-decoration: underline 3px;
-  margin-bottom: 30px;
   width: fit-content;
   float: left;
+  color: black;
 `;

reactapp/src/Components/Styled/Search.style.js

@@ -1 +1 @@
 import styled from "styled-components";
-import searchicon from "../searchicon.png";
+import searchicon from "../../searchicon.png";
 
-export const SearchSmall = styled.input`
+export const SearchBox = styled.input`
   width: 350px;
   box-sizing: border-box;
@@ -15 +15 @@
 `;
 
-export const SearchDropdownSmall = styled.div`
+export const SearchDropdown = styled.div`
   display: ${(props) => props.display};
   position: absolute;
@@ -27 +27 @@
 `;
 
-export const SearchDropdownResultSmall = styled.div`
+export const SearchResult = styled.div`
   &:hover {
     background-color: papayawhip;
@@ -34 +34 @@
   }
   padding: 10px;
+  border: 1px solid transparent;
+  margin: ${(props) => props.margin};
 `;
 
-export const SearchDropdownResultLinkSmall = styled.a`
+export const SearchResultLink = styled.a`
   text-decoration: none;
   color: black;
 `;
 
-export const SearchDropdownTextSmall = styled.p`
+export const SearchResultText = styled.p`
   font-weight: ${(props) => props.weight};
   font-size: ${(props) => props.size};
 `;
+
+export const SearchResultsWrapper = styled.div`
+  margin-top: 140px;
+`;