Merge pull request #281 from NIAEFEUP/develop

NIJobs Release 1.1.0

.gitignore

@@ -79,5 +79,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# .vscode directory
+# IDE directories
 .vscode/
+.idea/

README.md

@@ -1,4 +1,4 @@
-# niJobs - FrontEnd
+# NIJobs - FrontEnd
 
 
 ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/NIAEFEUP/nijobs-fe/CI/master?label=BUILD%20-%20Master&style=for-the-badge)

package.json

@@ -42,10 +42,12 @@
     "react-easy-crop": "^3.5.3",
     "react-ga": "^3.3.0",
     "react-hook-form": "^7.20.4",
+    "react-markdown": "^8.0.3",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
+    "remark-gfm": "^3.0.1",
     "swr": "^0.4.1",
     "yup": "^0.28.3"
   },

src/App.spec.js

@@ -2,6 +2,12 @@ import React from "react";
 import App from "./App";
 import Notifier from "./components/Notifications/Notifier";
 import AppRouter from "./AppRouter";
+import { MockedReactMarkdown } from "./components/utils/MockedReactMarkdown";
+
+jest.mock("react-markdown", () => function rmMock(props) {
+    return <MockedReactMarkdown {...props} />;
+});
+jest.mock("remark-gfm", () => () => null);
 
 describe("App", () => {
     it("should contain a Notifier", () => {

src/AppRouter.js

@@ -11,7 +11,10 @@ import CompanyApplicationPage, {
 import ApplicationsReviewPage from "./pages/ApplicationsReviewPage";
 import NotFound from "./pages/NotFound";
 import ErrorPage from "./pages/ErrorPage";
-import OfferPage, { OfferPageController, OfferPageControllerContext } from "./pages/OfferPage";
+import OfferPage, {
+    OfferPageController,
+    OfferPageControllerContext,
+} from "./pages/OfferPage";
 import RulesPage from "./pages/RulesPage";
 import { ProtectedRoute, Route } from "./utils";
 import PageLayout, { LayoutType } from "./components/Layout/PageLayout";
@@ -22,12 +25,19 @@ import {
 import FinishCompanyRegistrationPage from "./pages/FinishCompanyRegistrationPage";
 import CompanyOffersManagementPage from "./pages/CompanyOffersManagementPage";
 import CreateOfferPage from "./pages/CreateOfferPage";
-import { CreateOfferController, CreateOfferControllerContext } from "./components/Offers/New/CreateOfferForm";
+import {
+    CreateOfferController,
+    CreateOfferControllerContext,
+} from "./components/Offers/New/CreateOfferForm";
 import { CookieConsent } from "./cookieConsent";
-import { EditOfferController, EditOfferControllerContext } from "./components/Offers/Edit/EditOfferForm";
+import {
+    EditOfferController,
+    EditOfferControllerContext,
+} from "./components/Offers/Edit/EditOfferForm";
 import EditOfferPage from "./pages/EditOfferPage";
 import PrivacyPolicyPage from "./pages/PrivacyPolicyPage";
 import TermsAndConditionsPage from "./pages/TermsAndConditionsPage";
+import ChangeLogPage from "./pages/ChangeLogPage";
 
 /**
  *
@@ -39,24 +49,37 @@ import TermsAndConditionsPage from "./pages/TermsAndConditionsPage";
  *
  */
 
-const shouldShowCompanyApplicationMobile = ({ showConfirmationModal, isMobileSize }) => !showConfirmationModal && isMobileSize;
+const shouldShowCompanyApplicationMobile = ({
+    showConfirmationModal,
+    isMobileSize,
+}) => !showConfirmationModal && isMobileSize;
 
 const AppRouter = () => (
     <BrowserRouter basename={`${process.env.REACT_APP_BASE_ROUTE || "/"}`}>
         <CookieConsent />
         <Switch>
+            <Route exact path="/" key="/">
+                <PageLayout
+                    key="/"
+                    showHomePageLink={false}
+                    forceDesktopLayout
+                    layout={LayoutType.NONE}
+                >
+                    <HomePage />
+                </PageLayout>
+            </Route>
             <Route
                 exact
-                path="/"
-                key="/"
+                path="/recover/:token"
+                key="/recover/:token"
             >
                 <PageLayout
-                    key="/"
+                    key="/recover/:token"
                     showHomePageLink={false}
                     forceDesktopLayout
                     layout={LayoutType.NONE}
                 >
-                    <HomePage />
+                    <HomePage openPasswordRecoveryModal />
                 </PageLayout>
             </Route>
             <Route
@@ -103,10 +126,7 @@ const AppRouter = () => (
                     <CompanyApplicationPage />
                 </PageLayout>
             </Route>
-            <Route
-                exact
-                path="/rules"
-            >
+            <Route exact path="/rules">
                 <PageLayout
                     key="/rules"
                     pageTitle="Rules"
@@ -121,7 +141,7 @@ const AppRouter = () => (
                 path="/review/applications"
                 unauthorizedRedirectPath="/"
                 unauthorizedRedirectMessage="You are not allowed to access the applications review page."
-                authorize={(user) => (user.isAdmin)}
+                authorize={(user) => user.isAdmin}
             >
                 <PageLayout
                     key="/review/applications"
@@ -137,7 +157,9 @@ const AppRouter = () => (
                 path="/company/registration/finish"
                 unauthorizedRedirectPath="/"
                 unauthorizedRedirectMessage="To access this page you must be logged in and have a pending registration."
-                authorize={(user) => (user.company && !user.company.hasFinishedRegistration)}
+                authorize={(user) =>
+                    user.company && !user.company.hasFinishedRegistration
+                }
                 context={FinishCompanyRegistrationControllerContext}
                 controller={FinishCompanyRegistrationController}
             >
@@ -156,7 +178,7 @@ const AppRouter = () => (
                 path="/company/offers/manage"
                 unauthorizedRedirectPath="/"
                 unauthorizedRedirectMessage="You are not allowed to access the My Offers page"
-                authorize={(user) => !!(user?.company)}
+                authorize={(user) => !!user?.company}
             >
                 <PageLayout
                     key="/company/offers/manage"
@@ -215,10 +237,16 @@ const AppRouter = () => (
                     <CreateOfferPage />
                 </PageLayout>
             </Route>
-            <Route
-                path="/error"
-                key="/error"
-            >
+            <Route exact path="/whats-new">
+                <PageLayout
+                    key="/whats-new"
+                    pageTitle="What's new?"
+                    layout={LayoutType.DESKTOP}
+                >
+                    <ChangeLogPage />
+                </PageLayout>
+            </Route>
+            <Route path="/error" key="/error">
                 <PageLayout
                     key="/error"
                     forceDesktopLayout

src/actions/navbarActions.js

@@ -1,7 +1,20 @@
 export const NavbarActionTypes = Object.freeze({
     TOGGLE_LOGIN_MODAL: "TOGGLE_LOGIN_MODAL",
+    SET_AUTH_PAGE: "SET_AUTH_PAGE",
+    SET_RECOVERY_TOKEN: "SET_RECOVERY_TOKEN",
 });
 
-export const toggleLoginModal = () => ({
+export const toggleAuthModal = (page) => ({
     type: NavbarActionTypes.TOGGLE_LOGIN_MODAL,
+    page: page,
+});
+
+export const setAuthPage = (page) => ({
+    type: NavbarActionTypes.SET_AUTH_PAGE,
+    page: page,
+});
+
+export const setRecoveryToken = (token) => ({
+    type: NavbarActionTypes.SET_RECOVERY_TOKEN,
+    token: token,
 });

src/components/Apply/Company/CompanyApplicationForm.spec.js

@@ -5,6 +5,7 @@ import CompanyApplicationForm from "./CompanyApplicationForm";
 import { createTheme } from "@material-ui/core/styles";
 import { CompanyApplicationPageController, CompanyApplicationPageControllerContext } from "../../../pages/CompanyApplicationPage";
 import useComponentController from "../../../hooks/useComponentController";
+import Constants from "../../../utils/Constants";
 
 // eslint-disable-next-line react/prop-types
 const CompanyApplicationFormWrapper = ({ children, showConfirmation = false }) => {
@@ -216,7 +217,7 @@ describe("CompanyApplicationForm", () => {
                 await fireEvent.click(applyButton);
             });
 
-            expect(await wrapper.findByTestId("submission-error")).toHaveTextContent("An error occurred, please try again.");
+            expect(await wrapper.findByTestId("submission-error")).toHaveTextContent(Constants.UNEXPECTED_ERROR_MESSAGE);
         });
 
         it("should reset fields and errors on reset button press", async () => {
@@ -320,7 +321,7 @@ describe("CompanyApplicationForm", () => {
             await fireEvent.click(applyButton);
         });
 
-        expect(await wrapper.findByTestId("submission-error")).toHaveTextContent("An error occurred, please try again.");
+        expect(await wrapper.findByTestId("submission-error")).toHaveTextContent(Constants.UNEXPECTED_ERROR_MESSAGE);
 
         const testFieldChangeEffect = async (input, value) => {
             // eslint-disable-next-line no-console
@@ -336,7 +337,7 @@ describe("CompanyApplicationForm", () => {
                 await fireEvent.click(applyButton);
             });
 
-            expect(await wrapper.findByTestId("submission-error")).toHaveTextContent("An error occurred, please try again.");
+            expect(await wrapper.findByTestId("submission-error")).toHaveTextContent(Constants.UNEXPECTED_ERROR_MESSAGE);
         };
 
         await testFieldChangeEffect(companyNameInput, companyName);

src/components/Apply/Company/CompanyApplicationUtils.js

@@ -1,11 +1,9 @@
 import { validationRulesGenerator, generalHumanError } from "../../../utils";
+import { AuthConstants } from "../../Navbar/Auth/AuthUtils";
 
 
 export const CompanyApplicationConstants = {
-    password: {
-        minLength: 8,
-        hasNumber: /\d/,
-    },
+    password: AuthConstants.password,
     motivation: {
         minLength: 10,
         maxLength: 1500,

src/components/Apply/Company/CompanyApplicationUtils.spec.js

@@ -1,9 +1,9 @@
+import Constants from "../../../utils/Constants";
 import { getHumanError } from "./CompanyApplicationUtils";
 describe("CompanyApplicationUtils", () => {
-
     it("should return a readable error", () => {
         expect(getHumanError("email-already-exists")).toBe("The provided email is already associated to our platform.");
         expect(getHumanError("company-application-duplicate-email")).toBe("There is already an application associated with that email.");
-        expect(getHumanError("random-error")).toBe("An error occurred, please try again.");
+        expect(getHumanError("random-error")).toBe(Constants.UNEXPECTED_ERROR_MESSAGE);
     });
 });

src/components/HomePage/MainView.spec.js

@@ -7,6 +7,8 @@ import ShowMoreButton from "./ShowMoreButton";
 import { createTheme } from "@material-ui/core/styles";
 import { mountWithStore } from "../../test-utils";
 
+import { MemoryRouter } from "react-router-dom";
+
 describe("Main View", () => {
     let scrollToProductDescription, showSearchResults, wrapper;
     const theme = createTheme({});
@@ -24,10 +26,12 @@ describe("Main View", () => {
         showSearchResults = jest.fn();
 
         wrapper = mountWithStore(
-            <MainView
-                scrollToProductDescription={scrollToProductDescription}
-                showSearchResults={showSearchResults}
-            />,
+            <MemoryRouter initialEntries={["/"]}>
+                <MainView
+                    scrollToProductDescription={scrollToProductDescription}
+                    showSearchResults={showSearchResults}
+                />
+            </MemoryRouter>,
             initialState,
             theme
         );
@@ -59,7 +63,7 @@ describe("Main View", () => {
             fetch.mockResponse(JSON.stringify({ mockData: true }));
 
             wrapper.find("form#search_form").first().simulate("submit", {
-                preventDefault: () => {},
+                preventDefault: () => { },
             });
             expect(showSearchResults).toHaveBeenCalledTimes(1);
         });

src/components/HomePage/ProductPlacementArea/ProductDescription.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { RouterLink } from "../../../utils";
 import { connect } from "react-redux";
-import { toggleLoginModal } from "../../../actions/navbarActions";
+import { toggleAuthModal } from "../../../actions/navbarActions";
 
 import useProductDescriptionStyles from "./productDescriptionStyles.js";
 
@@ -19,7 +19,7 @@ import {
 
 import useSession from "../../../hooks/useSession";
 
-export const ProductDescription = React.forwardRef(({ toggleLoginModal }, ref) => {
+export const ProductDescription = React.forwardRef(({ toggleAuthModal }, ref) => {
     const { isLoggedIn, data } = useSession();
 
     const classes = useProductDescriptionStyles({ isMobile: !useDesktop() })();
@@ -85,7 +85,7 @@ export const ProductDescription = React.forwardRef(({ toggleLoginModal }, ref) =
                                 <Button
                                     variant="text"
                                     color="primary"
-                                    onClick={toggleLoginModal}
+                                    onClick={toggleAuthModal}
                                 >
                                 Login
                                 </Button>
@@ -111,13 +111,13 @@ export const ProductDescription = React.forwardRef(({ toggleLoginModal }, ref) =
 ProductDescription.displayName = "ProductDescription";
 
 ProductDescription.propTypes = {
-    toggleLoginModal: PropTypes.func.isRequired,
+    toggleAuthModal: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = () => ({});
 
 export const mapDispatchToProps = (dispatch) => ({
-    toggleLoginModal: () => dispatch(toggleLoginModal()),
+    toggleAuthModal: () => dispatch(toggleAuthModal()),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ProductDescription);

src/components/HomePage/ProductPlacementArea/ProductDescription.spec.js

@@ -20,7 +20,7 @@ describe("ProductDescription", () => {
 
             renderWithTheme(
                 <Router>
-                    <ProductDescription toggleLoginModal={toggleLoginModalMock} />
+                    <ProductDescription toggleAuthModal={toggleLoginModalMock} />
                 </Router>,
                 { theme }
             );
@@ -34,7 +34,7 @@ describe("ProductDescription", () => {
 
             renderWithTheme(
                 <Router>
-                    <ProductDescription toggleLoginModal={toggleLoginModalMock} />
+                    <ProductDescription toggleAuthModal={toggleLoginModalMock} />
                 </Router>,
                 { theme }
             );
@@ -48,7 +48,7 @@ describe("ProductDescription", () => {
 
             renderWithTheme(
                 <Router>
-                    <ProductDescription toggleLoginModal={toggleLoginModalMock} />
+                    <ProductDescription toggleAuthModal={toggleLoginModalMock} />
                 </Router>,
                 { theme }
             );
@@ -65,7 +65,7 @@ describe("ProductDescription", () => {
 
             renderWithTheme(
                 <Router>
-                    <ProductDescription toggleLoginModal={toggleLoginModalMock} />
+                    <ProductDescription toggleAuthModal={toggleLoginModalMock} />
                 </Router>,
                 { theme }
             );