Changeset 3e98cea

Timestamp:

08/06/22 18:16:44 (22 months ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

800779d

Parents:

d654c74

Message:

added SearchResults page, hide search dropdown when out of focus

Location:

reactapp/src

Files:

• App.js (modified) (2 diffs)
• Components/OpinionTree.js (modified) (1 diff)
• Components/Search.js (modified) (4 diffs)
• Components/Styled/Main.style.js (moved) (moved from reactapp/src/Components/Main.style.js ) (1 diff)
• Components/Styled/OpinionCard.style.js (moved) (moved from reactapp/src/Components/OpinionCard.style.js )
• Components/Styled/ProfessorCard.style.js (moved) (moved from reactapp/src/Components/ProfessorCard.style.js )
• Components/Styled/Search.style.js (moved) (moved from reactapp/src/Components/Search.style.js ) (4 diffs)
• Pages/Professor.js (modified) (2 diffs)
• Pages/SearchResults.js (added)
• index.js (modified) (2 diffs)

reactapp/src/App.js

@@ -1 +1 @@
 import { Outlet } from "react-router-dom";
-import { MainWrapper, MainTitle } from "./Components/Main.style";
+import { MainWrapper, MainTitle } from "./Components/Styled/Main.style";
 import Search from "./Components/Search.js";
 
@@ -16 +16 @@
         }
       </style>
-      <MainTitle>profesori.mk</MainTitle> <Search />
+      <a href="/">
+        <MainTitle>profesori.mk</MainTitle>
+      </a>{" "}
+      <Search />
       <Outlet />
     </MainWrapper>

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;
+`;

reactapp/src/Pages/Professor.js

@@ -9 +9 @@
   ProfessorCardName,
   ProfessorCardSeparator,
-} from "../Components/ProfessorCard.style";
+} from "../Components/Styled/ProfessorCard.style";
 
 function Professor(props) {
@@ -34 +34 @@
 
     fetchData();
-  }, []);
+  }, [params.professorId]);
 
   if (loaded) {

reactapp/src/index.js

@@ -3 +3 @@
 import App from "./App";
 import Professor from "./Pages/Professor";
+import SearchResults from "./Pages/SearchResults";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -12 +13 @@
           <Route path=":professorId" element={<Professor />} />
         </Route>
+        <Route path="search" element={<SearchResults />}></Route>
       </Route>
     </Routes>