Merge pull request #39 from fsereno/dev

Latest release build

app/app_home/pug/index.pug

@@ -1,5 +1,8 @@
 extends ../../pug/layouts/mainRoot.pug
 
+block head
+  meta(name="isRoot")
+
 block content
   div#result
   div.bg-dark#app

app/app_home/sass/styles.scss

@@ -12,55 +12,6 @@
 }
 
 #result, #app {
-  #searchBar {
-    .form-control {
-      border-right:none;
-      &:focus {
-        border: 1px solid $darkGrey;
-        border-right:none;
-        box-shadow: none;
-      }
-    }
-    span.input-group-text {
-      background: $darkGrey;
-      i {
-        color: $white;
-      }
-    }
-    #openFilterBtn {
-      border-left: 1px solid #fff;
-      &:focus {
-        box-shadow: none;
-      }
-    }
-    #cancelBtn {
-      button {
-        border-top: 1px solid $darkGrey;
-        border-bottom: 1px solid $darkGrey;
-        border-right: 1px solid #fff;
-        background:transparent;
-        height: 50px;
-        padding: 0 1.5rem;
-        &:focus {
-          box-shadow: none;
-        }
-        .lr {
-          height: 30px;
-          width: 1px;
-          transform: rotate(45deg);
-          display: block;
-          background: $darkGrey;
-          .rl {
-              height: 30px;
-              width: 1px;
-              transform: rotate(90deg);
-              display: block;
-              background: $darkGrey
-          }
-        }
-      }
-    }
-  }
   #introContainer {
     color: $white;
     #introContent {

app/app_home/src/app.js

@@ -5,10 +5,10 @@ import "../sass/styles.scss";
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ApplicationsContextProvider } from './components/contextProviders/applicationsContextProvider';
+import { ApplicationsContextProvider } from '../../js/modules/react/applicationsContextProvider';
 import { ContentContainer } from './components/contentContainer';
 import { IntroContainer } from './components/introContainer';
-import { ConfigContextProvider } from "./components/contextProviders/configContextProvider";
+import { ConfigContextProvider } from "../../js/modules/react/configContextProvider";
 import { AppContainer } from "./components/appContainer";
 import { SpinnerContextProvider } from "../../js/modules/react/spinnerComponent";
 

app/app_home/src/components/appContainer.js

@@ -12,7 +12,7 @@ export const AppContainer = ({ children }) => {
 
     const isBrowserValid = WebGLCheckerUtil.isWebGL2Available() || WebGLCheckerUtil.isWebGLAvailable();
     const spinnerContext = React.useContext(SpinnerContext);
-    const [fadeClass, setFadeClass] = useState(getElementFadeClass(false));
+    const [ fadeClass, setFadeClass ] = useState(getElementFadeClass(false));
 
     const loadHandler = () => {
         setTimeout(() => {

app/app_home/src/components/applicationCard.js

@@ -5,7 +5,7 @@ import Card from 'react-bootstrap/Card';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Badge from 'react-bootstrap/Badge';
-import { ConfigContext } from '../contexts';
+import { ConfigContext } from '../../../js/modules/react/configContextProvider';
 
 export const ApplicationCard = React.memo(({application, condition}) => {
 

app/app_home/src/components/cardsContainer.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { ApplicationCard } from './applicationCard';
-import { ApplicationsContext } from '../contexts';
+import { ApplicationsContext } from '../../../js/modules/react/applicationsContextProvider';
 
 export function CardsContainer() {
 

app/app_home/src/components/contentContainer.js

@@ -2,14 +2,17 @@
 "use strict;"
 
 import React from 'react';
-import { SearchBar } from './searchBar';
-import { ConfigContext } from '../contexts';
+import { SearchBar } from '../../../js/modules/react/searchBarComponent/searchBar';
+import { ConfigContext } from '../../../js/modules/react/configContextProvider';
 import { CardsContainer } from './cardsContainer';
+import { TopScrollComponent } from '../../../js/modules/react/topScrollComponent/topScrollComponent';
 
 export function ContentContainer() {
 
   const context = React.useContext(ConfigContext);
 
+  const topScrollComponentThreshold = 270;
+
   return (
     <div className={`container-fluid pt-4 bg-white`} id="contentContainer">
       <div className="row">
@@ -24,8 +27,15 @@ export function ContentContainer() {
           <hr />
         </div>
       </div>
-      <SearchBar />
+      <SearchBar
+        searchBarId="searchBar"
+        searchInputId="searchInput"
+        cancelBtnId="cancelBtn"
+        openFilterBtnId="openFilterBtn"
+        filterContainerId="filterContainer"
+      />
       <CardsContainer />
+      <TopScrollComponent threshold={topScrollComponentThreshold} />
     </div>
   );
 }

app/app_home/src/components/introContainer.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { CONTENT_CONTAINER_ID } from '../constants';
-import { ConfigContext } from '../contexts';
+import { ConfigContext } from '../../../js/modules/react/configContextProvider';
 
 export function IntroContainer() {
 

app/app_home/tests/contentContainer.test.js

@@ -5,8 +5,11 @@
 import React from "react";
 import { mount } from 'enzyme';
 import { ContentContainer } from "../src/components/contentContainer";
-import { ConfigContextProvider } from "../src/components/contextProviders/configContextProvider";
-import { ApplicationsContextProvider } from "../src/components/contextProviders/applicationsContextProvider";
+import { ConfigContextProvider } from "../../js/modules/react/configContextProvider";
+import { ApplicationsContextProvider } from "../../js/modules/react/applicationsContextProvider";
+
+jest.mock('../../js/modules/react/searchBarComponent/searchBar.scss', () => '');
+jest.mock('../../js/modules/react/topScrollComponent/topScrollComponent.scss', () => '');
 
 jest.mock('../../../config.json', () => {
     return {
@@ -128,6 +131,22 @@ it("can search using multiple quicksearch", () => {
     expect(wrapper.find('.grid-item.card')).toHaveLength(4);
 });
 
+it("can remove items from the quicksearch filter", () => {
+    const wrapper = mount(<App />);
+    const searchBar = wrapper.find('input#searchInput');
+    const openFilterBtn = wrapper.find('#openFilterBtn')
+    const quickSearchCloud = wrapper.find('button[value="Cloud"]');
+    const quickSearchReact = wrapper.find('button[value="React"]');
+    const quickSearchDummy = wrapper.find('button[value="ABC"]');
+    openFilterBtn.simulate('click');
+    quickSearchCloud.simulate('click');
+    quickSearchReact.simulate('click');
+    quickSearchDummy.simulate('click');
+    quickSearchReact.simulate('click');
+    searchBar.simulate('change');
+    expect(wrapper.find('.grid-item.card')).toHaveLength(3);
+});
+
 it("can cancel a search", () => {
     const wrapper = mount(<App />);
     const searchBar = wrapper.find('input#searchInput');

app/app_home/src/components/contextProviders/applicationsContextProvider.js → app/js/modules/react/applicationsContextProvider.js

@@ -1,8 +1,10 @@
 "use strict;"
 
 import React, { useState } from 'react';
-import { ApplicationSortUtil } from "../../../../typeScript/Utils/applicationsSortUtil/dist/Utils/applicationsSortUtil/index";
-import { ApplicationsContext, ConfigContext } from '../../contexts';
+import { ApplicationSortUtil } from "../../../typeScript/Utils/applicationsSortUtil/dist/Utils/applicationsSortUtil/index";
+import { ConfigContext } from './configContextProvider';
+
+export const ApplicationsContext = React.createContext();
 
 export function ApplicationsContextProvider({children}) {
 
@@ -12,7 +14,11 @@ export function ApplicationsContextProvider({children}) {
 
     const [ applications, setApplications ] = useState(configContext.config.applications);
 
-    const context = { unmodified: configContext.config.applications, applications, setApplications }
+    const context = {
+        unmodified: configContext.config.applications,
+        applications,
+        setApplications
+    }
 
     return (
         <ApplicationsContext.Provider value={context}>

app/js/modules/react/navFilterComponent/app.js

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ApplicationsContextProvider } from '../applicationsContextProvider';
+import { ConfigContextProvider } from '../configContextProvider';
+import { NavFilterComponent } from './navFilterComponent';
+
+function App() {
+
+    const isHomeActive = document.head.querySelector('[name="isRoot"]') !== null;
+    const folder = document.head.querySelector('[name="folder"]').content;
+
+    return(
+        <ConfigContextProvider>
+             <ApplicationsContextProvider>
+                <NavFilterComponent isHomeActive={isHomeActive} folder={folder}/>
+            </ApplicationsContextProvider>
+        </ConfigContextProvider>
+    )
+}
+
+ReactDOM.render(
+    <App />,
+    document.getElementById('applicationsDropdown')
+);