Feature/239 evident see offers wo user parameters

src/components/HomePage/SearchArea/SearchArea.js

@@ -177,6 +177,10 @@ export const SearchArea = ({ onSubmit, searchValue,
                 </form>
                 <SubmitSearchButton
                     onClick={submitForm}
+                    searchHasUserInput={
+                        (searchValue !== "" && searchValue !== undefined)
+                        || advancedOptionsActive
+                    }
                 />
             </Paper>
         </ContextProvider>

src/components/HomePage/SearchArea/SearchArea.spec.js

@@ -10,10 +10,12 @@ import {
 } from "../../../actions/searchOffersActions";
 import { createTheme } from "@material-ui/core";
 import { renderWithStoreAndTheme, screen, fireEvent, act } from "../../../test-utils";
-
 import { MemoryRouter } from "react-router-dom";
 
+import PropTypes from "prop-types";
+
 import qs from "qs";
+import { INITIAL_JOB_TYPE } from "../../../reducers/searchOffersReducer";
 
 // eslint-disable-next-line react/prop-types
 const RouteWrappedContent = ({ children, url = "/" }) => (
@@ -22,6 +24,47 @@ const RouteWrappedContent = ({ children, url = "/" }) => (
     </MemoryRouter>
 );
 
+const SearchAreaWrapper = ({
+    searchValue = "", jobType = INITIAL_JOB_TYPE, jobDuration = [null, null], filterJobDuration = false,
+    showJobDurationSlider = false, fields = [], technologies = [], setShowJobDurationSlider = () => { },
+    setTechs = () => { }, setJobDuration = () => { }, setFields = () => { }, setJobType = () => { },
+    setSearchValue = () => { }, onSubmit = () => {},
+}) => (
+    <SearchArea
+        searchValue={searchValue}
+        jobType={jobType}
+        jobDuration={jobDuration}
+        filterJobDuration={filterJobDuration}
+        fields={fields}
+        technologies={technologies}
+        showJobDurationSlider={showJobDurationSlider}
+        setShowJobDurationSlider={setShowJobDurationSlider}
+        setTechs={setTechs}
+        setJobDuration={setJobDuration}
+        setFields={setFields}
+        setJobType={setJobType}
+        setSearchValue={setSearchValue}
+        onSubmit={onSubmit}
+    />
+);
+
+SearchAreaWrapper.propTypes = {
+    onSubmit: PropTypes.func,
+    searchValue: PropTypes.string.isRequired,
+    jobType: PropTypes.string,
+    setSearchValue: PropTypes.func.isRequired,
+    setJobDuration: PropTypes.func.isRequired,
+    setJobType: PropTypes.func.isRequired,
+    fields: PropTypes.array.isRequired,
+    technologies: PropTypes.array.isRequired,
+    showJobDurationSlider: PropTypes.bool.isRequired,
+    setFields: PropTypes.func.isRequired,
+    setTechs: PropTypes.func.isRequired,
+    setShowJobDurationSlider: PropTypes.func.isRequired,
+    jobDuration: PropTypes.number,
+    filterJobDuration: PropTypes.bool,
+};
+
 describe("SearchArea", () => {
     let onSubmit;
     const theme = createTheme();
@@ -34,16 +77,8 @@ describe("SearchArea", () => {
         it("should render a Paper, a Form, a Search Bar, a Search Button and Advanced Options Button", () => {
             renderWithStoreAndTheme(
                 <RouteWrappedContent>
-                    <SearchArea
+                    <SearchAreaWrapper
                         onSubmit={onSubmit}
-                        fields={[]}
-                        technologies={[]}
-                        setShowJobDurationSlider={() => { }}
-                        setTechs={() => { }}
-                        setJobDuration={() => { }}
-                        setFields={() => { }}
-                        setJobType={() => { }}
-                        setSearchValue={() => { }}
                     />
                 </RouteWrappedContent>,
                 { initialState, theme }
@@ -55,6 +90,88 @@ describe("SearchArea", () => {
             expect(screen.getByRole("button", { name: "Search" })).toBeInTheDocument();
             expect(screen.getByRole("button", { name: "Toggle Advanced Search" })).toBeInTheDocument();
         });
+        it("should render a text='Show All' in the default state of searchArea", () => {
+            const searchArea = renderWithStoreAndTheme(
+                <RouteWrappedContent>
+                    <SearchAreaWrapper />
+                </RouteWrappedContent>,
+                { initialState, theme }
+            );
+
+            expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Show All");
+        });
+        it("should render a text='Search' when search bar value != ''", () => {
+            const searchArea = renderWithStoreAndTheme(
+                <RouteWrappedContent>
+                    <SearchAreaWrapper
+                        searchValue={"somevalue"}
+                    />
+                </RouteWrappedContent>,
+                { initialState, theme }
+            );
+
+            expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search");
+        });
+        it("should render a text='Show All' when search bar has undefined value", () => {
+            const searchArea = renderWithStoreAndTheme(
+                <RouteWrappedContent>
+                    <SearchAreaWrapper
+                        searchValue={undefined}
+                    />
+                </RouteWrappedContent>,
+                { initialState, theme }
+            );
+
+            expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Show All");
+        });
+        it("should render a text='Search' when fields != []", () => {
+            const searchArea = renderWithStoreAndTheme(
+                <RouteWrappedContent>
+                    <SearchAreaWrapper
+                        fields={["field1", "field2"]}
+                    />
+                </RouteWrappedContent>,
+                { initialState, theme }
+            );
+
+            expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search");
+        });
+        it("should render a text='Search' when technologies != []", () => {
+            const searchArea = renderWithStoreAndTheme(
+                <RouteWrappedContent>
+                    <SearchAreaWrapper
+                        technologies={["tech1", "tech2"]}
+                    />
+                </RouteWrappedContent>,
+                { initialState, theme }
+            );
+
+            expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search");
+        });
+        it("should render a text='Search' when jobType != INITIAL_JOB_TYPE", () => {
+            const searchArea = renderWithStoreAndTheme(
+                <RouteWrappedContent>
+                    <SearchAreaWrapper
+                        jobType={"JOB"}
+                    />
+                </RouteWrappedContent>,
+                { initialState, theme }
+            );
+
+            expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search");
+        });
+        it("should render a text='Search' when showJobDurationSlider = true ", () => {
+            const searchArea = renderWithStoreAndTheme(
+                <RouteWrappedContent>
+                    <SearchAreaWrapper
+                        showJobDurationSlider={true}
+                    />
+                </RouteWrappedContent>,
+                { initialState, theme }
+            );
+
+            expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search");
+        });
     });
 
     describe("interaction", () => {
@@ -124,15 +241,13 @@ describe("SearchArea", () => {
 
             renderWithStoreAndTheme(
                 <RouteWrappedContent url={url}>
-                    <SearchArea
+                    <SearchAreaWrapper
                         onSubmit={onSubmit}
                         setSearchValue={setSearchValue}
                         setJobType={setJobType}
                         setJobDuration={setJobDuration}
                         setShowJobDurationSlider={setShowJobDurationSlider}
-                        fields={[]}
                         setFields={setFields}
-                        technologies={[]}
                         setTechs={setTechs}
                     />
                 </RouteWrappedContent>,

src/components/HomePage/SearchArea/SubmitSearchButton.js

@@ -2,27 +2,32 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import { Fab } from "@material-ui/core";
-import { Search } from "@material-ui/icons";
 
 import useSearchAreaStyle from "./searchAreaStyle";
 
-const ShowAdvancedOptionsButton = ({ onClick }) => {
+const SubmitSearchButton = ({ onClick, searchHasUserInput }) => {
     const classes = useSearchAreaStyle();
     return (
         <div className={classes.submitSearchButtonWrapper}>
             <Fab
                 color="primary"
                 aria-label="Search"
+                variant="extended"
                 onClick={onClick}
             >
-                <Search />
+                <span>
+                    {searchHasUserInput
+                        ? "Search"
+                        : "Show All"}
+                </span>
             </Fab>
         </div>
     );
 };
 
-ShowAdvancedOptionsButton.propTypes = {
+SubmitSearchButton.propTypes = {
     onClick: PropTypes.func.isRequired,
+    searchHasUserInput: PropTypes.bool.isRequired,
 };
 
-export default ShowAdvancedOptionsButton;
+export default SubmitSearchButton;

src/components/HomePage/SearchArea/SubmitSearchButton.spec.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Search } from "@material-ui/icons";
 import { Fab } from "@material-ui/core";
 import SubmitSearchButton from "./SubmitSearchButton";
 
@@ -11,9 +10,6 @@ describe("SubmitSearchButton", () => {
                     .find(Fab).exists()
             ).toBe(true);
         });
-        it("should render 'search' icon", () => {
-            expect(shallow(<SubmitSearchButton />).find(Search).exists()).toBe(true);
-        });
     });
 
     describe("interaction", () => {

src/hooks/useComponentController.js

@@ -3,7 +3,7 @@ import React from "react";
 export const DefaultContext = React.createContext();
 
 /**
- * This is based on the pattern described here: https://angeloteixeira.me/blog/reactive-controller-pattern
+ * This is based on the pattern described here: https://angeloteixeira.eu/blog/reactive-controller-pattern
  * With it, components can abstract logic common to different view layouts (such as desktop/mobile) and both can read from the given Context
  *
  * @param controller - A function (can be a React Hook) that handles some logic.