Changeset 3e98cea for reactapp/src


Ignore:
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
Files:
1 added
5 edited
4 moved

Legend:

Unmodified
Added
Removed

  • reactapp/src/App.js

    rd654c74 r3e98cea  
    11import { Outlet } from "react-router-dom";
    2 import { MainWrapper, MainTitle } from "./Components/Main.style";
     2import { MainWrapper, MainTitle } from "./Components/Styled/Main.style";
    33import Search from "./Components/Search.js";
    44
    … …  
    1616        }
    1717      </style>
    18       <MainTitle>profesori.mk</MainTitle> <Search />
     18      <a href="/">
     19        <MainTitle>profesori.mk</MainTitle>
     20      </a>{" "}
     21      <Search />
    1922      <Outlet />
    2023    </MainWrapper>

  • reactapp/src/Components/OpinionTree.js

    rd654c74 r3e98cea  
    88  OpinionReplyCardContentTime,
    99  StyledFontAwesomeIcon,
    10 } from "./OpinionCard.style";
    11 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
    12 import {
    13   solid,
    14   regular,
    15   brands,
    16 } from "@fortawesome/fontawesome-svg-core/import.macro";
     10} from "./Styled/OpinionCard.style";
     11
     12import { solid } from "@fortawesome/fontawesome-svg-core/import.macro";
    1713import { dateConverter } from "../Util/dateConverter";
    1814

  • reactapp/src/Components/Search.js

    rd654c74 r3e98cea  
    33import { transliterate } from "../Util/transliterate";
    44import {
    5   SearchDropdownResultSmall,
    6   SearchDropdownTextSmall,
    7   SearchDropdownSmall,
    8   SearchDropdownResultLinkSmall,
    9   SearchSmall,
    10 } from "./Search.style";
     5  SearchResult,
     6  SearchResultText,
     7  SearchDropdown,
     8  SearchResultLink,
     9  SearchBox,
     10} from "./Styled/Search.style";
     11import { useNavigate } from "react-router";
    1112function Search() {
    1213  const [query, setQuery] = useState("");
    … …  
    2728        //setLoaded(true);
    2829      } catch (error) {
    29         console.log("Error", error);
     30        console.log("Fetching error occured", error);
    3031      }
    3132    };
    … …  
    3334    if (query.length > 2) fetchData();
    3435  }, [query]);
     36
     37  const navigate = useNavigate();
     38
     39  const handleKeyDown = (event) => {
     40    if (event.key === "Enter") {
     41      setExpanded(false);
     42      navigate("/search", { state: professors });
     43    }
     44  };
     45
     46  const [expanded, setExpanded] = useState(false);
     47
     48  function expand() {
     49    setExpanded(true);
     50  }
     51
     52  function close() {
     53    setExpanded(false);
     54  }
    3555
    3656  return (
    … …  
    4262      }}
    4363    >
    44       <SearchSmall
     64      <SearchBox
    4565        placeholder="Пребарувај..."
    4666        onChange={(e) => setQuery(e.target.value)}
     67        onKeyDown={handleKeyDown}
     68        tabIndex={0}
     69        onFocus={expand}
     70        onBlur={close}
    4771      />
    48       <SearchDropdownSmall
    49         display={query.length > 2 && professors.length > 0 ? "block" : "none"}
     72      <SearchDropdown
     73        display={
     74          query.length > 2 && professors.length > 0 && expanded
     75            ? "block"
     76            : "none"
     77        }
    5078      >
    5179        {query.length > 2 &&
    5280          professors.slice(0, 7).map((professor) => (
    53             <SearchDropdownResultSmall key={professor.professorId}>
    54               <SearchDropdownResultLinkSmall
    55                 href={"/professor/" + professor.professorId}
    56               >
    57                 <SearchDropdownTextSmall weight="bold" size="medium">
     81            <SearchResult
     82              key={professor.professorId}
     83              onMouseDown={(event) => {
     84                event.preventDefault();
     85                event.stopPropagation();
     86              }}
     87              margin="0"
     88            >
     89              <SearchResultLink href={"/professor/" + professor.professorId}>
     90                <SearchResultText weight="bold" size="medium">
    5891                  {professor.professorName}
    59                 </SearchDropdownTextSmall>
    60                 <SearchDropdownTextSmall weight="normal" size="smaller">
     92                </SearchResultText>
     93                <SearchResultText weight="normal" size="er">
    6194                  {professor.faculty.facultyName}
    62                 </SearchDropdownTextSmall>
    63               </SearchDropdownResultLinkSmall>
    64             </SearchDropdownResultSmall>
     95                </SearchResultText>
     96              </SearchResultLink>
     97            </SearchResult>
    6598          ))}
    66       </SearchDropdownSmall>
     99      </SearchDropdown>
    67100    </div>
    68101  );

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

    rd654c74 r3e98cea  
    1616  font-size: 36pt;
    1717  text-decoration: underline 3px;
    18   margin-bottom: 30px;
    1918  width: fit-content;
    2019  float: left;
     20  color: black;
    2121`;

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

    rd654c74 r3e98cea  
    11import styled from "styled-components";
    2 import searchicon from "../searchicon.png";
     2import searchicon from "../../searchicon.png";
    33
    4 export const SearchSmall = styled.input`
     4export const SearchBox = styled.input`
    55  width: 350px;
    66  box-sizing: border-box;
    … …  
    1515`;
    1616
    17 export const SearchDropdownSmall = styled.div`
     17export const SearchDropdown = styled.div`
    1818  display: ${(props) => props.display};
    1919  position: absolute;
    … …  
    2727`;
    2828
    29 export const SearchDropdownResultSmall = styled.div`
     29export const SearchResult = styled.div`
    3030  &:hover {
    3131    background-color: papayawhip;
    … …  
    3434  }
    3535  padding: 10px;
     36  border: 1px solid transparent;
     37  margin: ${(props) => props.margin};
    3638`;
    3739
    38 export const SearchDropdownResultLinkSmall = styled.a`
     40export const SearchResultLink = styled.a`
    3941  text-decoration: none;
    4042  color: black;
    4143`;
    4244
    43 export const SearchDropdownTextSmall = styled.p`
     45export const SearchResultText = styled.p`
    4446  font-weight: ${(props) => props.weight};
    4547  font-size: ${(props) => props.size};
    4648`;
     49
     50export const SearchResultsWrapper = styled.div`
     51  margin-top: 140px;
     52`;

  • reactapp/src/Pages/Professor.js

    rd654c74 r3e98cea  
    99  ProfessorCardName,
    1010  ProfessorCardSeparator,
    11 } from "../Components/ProfessorCard.style";
     11} from "../Components/Styled/ProfessorCard.style";
    1212
    1313function Professor(props) {
    … …  
    3434
    3535    fetchData();
    36   }, []);
     36  }, [params.professorId]);
    3737
    3838  if (loaded) {

  • reactapp/src/index.js

    rd654c74 r3e98cea  
    33import App from "./App";
    44import Professor from "./Pages/Professor";
     5import SearchResults from "./Pages/SearchResults";
    56
    67const root = ReactDOM.createRoot(document.getElementById("root"));
    … …  
    1213          <Route path=":professorId" element={<Professor />} />
    1314        </Route>
     15        <Route path="search" element={<SearchResults />}></Route>
    1416      </Route>
    1517    </Routes>
Note: See TracChangeset for help on using the changeset viewer.