Fix some regressions in web application (#299)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>
cncf · Oct 24, 2023 · 5cc573d · 5cc573d
1 parent 6d6d1ab
commit 5cc573d
Show file tree

Hide file tree

Showing 16 changed files with 110 additions and 441 deletions.
diff --git a/web/package.json b/web/package.json
@@ -1,45 +1,44 @@
 {
-    "name": "landscape",
-    "private": true,
-    "version": "0.2.0",
-    "type": "module",
-    "scripts": {
-        "build": "tsc && vite build",
-        "dev": "vite",
-        "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
-        "format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
-        "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "@solid-primitives/intersection-observer": "^2.1.3",
-        "@solid-primitives/resize-observer": "^2.0.22",
-        "@solid-primitives/scroll": "^2.0.20",
-        "@solidjs/router": "^0.8.3",
-        "add": "^2.0.6",
-        "apexcharts": "^3.43.0",
-        "bootstrap": "^5.3.2",
-        "lodash": "^4.17.21",
-        "moment": "^2.29.4",
-        "solid-apexcharts": "^0.3.2",
-        "solid-js": "^1.8.1",
-        "yarn": "^1.22.19"
-    },
-    "devDependencies": {
-        "@types/lodash": "^4.14.199",
-        "@typescript-eslint/eslint-plugin": "^6.8.0",
-        "@typescript-eslint/parser": "^6.8.0",
-        "eslint": "^8.51.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "eslint-plugin-simple-import-sort": "^10.0.0",
-        "eslint-plugin-solid": "^0.13.0",
-        "prettier": "^3.0.3",
-        "sass": "^1.69.3",
-        "typescript": "^5.0.2",
-        "vite": "^4.4.11",
-        "vite-plugin-ejs": "^1.6.4",
-        "vite-plugin-solid": "^2.7.1"
-    },
-    "description": "Landscape2 is a tool that generates interactive landscapes websites.",
-    "license": "Apache-2.0"
+  "name": "landscape",
+  "private": true,
+  "version": "0.2.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@solid-primitives/resize-observer": "^2.0.22",
+    "@solid-primitives/scroll": "^2.0.20",
+    "@solidjs/router": "^0.8.3",
+    "add": "^2.0.6",
+    "apexcharts": "^3.43.0",
+    "bootstrap": "^5.3.2",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
+    "solid-apexcharts": "^0.3.2",
+    "solid-js": "^1.8.1",
+    "yarn": "^1.22.19"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.199",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-solid": "^0.13.0",
+    "prettier": "^3.0.3",
+    "sass": "^1.69.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.11",
+    "vite-plugin-ejs": "^1.6.4",
+    "vite-plugin-solid": "^2.7.1"
+  },
+  "description": "Landscape2 is a tool that generates interactive landscapes websites.",
+  "license": "Apache-2.0"
 }
diff --git a/web/src/App.css b/web/src/App.css
@@ -7,11 +7,12 @@ body,
   padding: 0;
 }
 
-body {
+/* Lazy loading for images are not working on body */
+body:not(.screenshot) {
   overflow: hidden;
 }
 
-#landscape {
+body:not(.screenshot) #landscape {
   overflow-y: auto;
 }
 

diff --git a/web/src/layout/common/Image.tsx b/web/src/layout/common/Image.tsx
@@ -8,7 +8,7 @@ interface Props {
   name: string;
   logo: string;
   class?: string;
-  isLoaded?: boolean;
+  enableLazyLoad?: boolean;
 }
 
 const Image = (props: Props) => {
@@ -24,7 +24,7 @@ const Image = (props: Props) => {
           class={props.class}
           src={import.meta.env.MODE === 'development' ? `../../static/${props.logo}` : `${props.logo}`}
           onError={() => setError(true)}
-          loading={!isUndefined(props.isLoaded) && !props.isLoaded ? 'lazy' : undefined}
+          loading={!isUndefined(props.enableLazyLoad) && props.enableLazyLoad ? 'lazy' : undefined}
           width="auto"
           height="auto"
         />

diff --git a/web/src/layout/explore/Content.tsx b/web/src/layout/explore/Content.tsx
@@ -11,6 +11,7 @@ interface Props {
   initialSelectedGroup?: string;
   data: CategoriesData;
   categories_overridden?: string[];
+  updateHash: (hash?: string) => void;
   finishLoading: () => void;
 }
 
@@ -25,6 +26,7 @@ const Content = (props: Props) => {
           initialIsVisible={isSelected() && selectedViewMode() === ViewMode.Card}
           data={props.data}
           categories_overridden={props.categories_overridden}
+          updateHash={props.updateHash}
           finishLoading={props.finishLoading}
         />
       </div>

diff --git a/web/src/layout/explore/card/Card.tsx b/web/src/layout/explore/card/Card.tsx
@@ -68,7 +68,7 @@ const Card = (props: Props) => {
     <div class={`d-flex flex-column ${props.class}`}>
       <div class="d-flex flex-row align-items-center">
         <div class={`d-flex align-items-center justify-content-center ${styles.logoWrapper}`}>
-          <Image name={props.item.name} class={`m-auto ${styles.logo}`} logo={props.item.logo} isLoaded={false} />
+          <Image name={props.item.name} class={`m-auto ${styles.logo}`} logo={props.item.logo} enableLazyLoad />
         </div>
 
         <div class={`p-3 ms-2 ${styles.itemInfo}`}>

diff --git a/web/src/layout/explore/card/Content.tsx b/web/src/layout/explore/card/Content.tsx
@@ -1,14 +1,10 @@
-import { createVisibilityObserver, withDirection, withOccurrence } from '@solid-primitives/intersection-observer';
-import { A, useLocation, useNavigate } from '@solidjs/router';
-import isNull from 'lodash/isNull';
-import isUndefined from 'lodash/isUndefined';
+import { A } from '@solidjs/router';
 import orderBy from 'lodash/orderBy';
-import { Accessor, createMemo, For } from 'solid-js';
+import { Accessor, For } from 'solid-js';
 
 import { COLORS } from '../../../data';
 import { BaseItem, CardMenu, Item, SVGIconKind } from '../../../types';
 import convertStringSpaces from '../../../utils/convertStringSpaces';
-import isElementInView from '../../../utils/isElementInView';
 import isSectionInGuide from '../../../utils/isSectionInGuide';
 import { CategoriesData } from '../../../utils/prepareData';
 import slugify from '../../../utils/slugify';
@@ -26,69 +22,8 @@ interface Props {
 const Content = (props: Props) => {
   const bgColor = COLORS[0];
   const updateActiveItemId = useUpdateActiveItemId();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const state = createMemo(() => location.state);
   const data = () => props.data;
 
-  const useVisibilityObserver = createVisibilityObserver(
-    {},
-    withOccurrence(
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      // eslint-disable-next-line solid/reactivity
-      withDirection((entry, { occurrence, directionY }) => {
-        const currentNode = entry.target.id;
-        const prevSibling =
-          !isNull(window.document.getElementById(entry.target.id)) &&
-          !isNull(window.document.getElementById(entry.target.id)!.previousElementSibling)
-            ? window.document.getElementById(entry.target.id)!.previousElementSibling!.id
-            : undefined;
-        const nextSibling =
-          !isNull(window.document.getElementById(entry.target.id)) &&
-          !isNull(window.document.getElementById(entry.target.id)!.nextElementSibling)
-            ? window.document.getElementById(entry.target.id)!.nextElementSibling!.id
-            : undefined;
-
-        // Do not trigger handleEnter when we are not scrolling and we go directly to section
-        const nodes = [currentNode, prevSibling, nextSibling];
-
-        if (nodes.includes(location.hash.replace('#', ''))) {
-          if (directionY === 'Top') {
-            if (occurrence === 'Leaving' && !isUndefined(nextSibling)) {
-              handleEnter(nextSibling);
-            }
-            if (occurrence === 'Entering') {
-              handleEnter(currentNode);
-            }
-          }
-          if (directionY === 'Bottom') {
-            if (!isUndefined(state()) && occurrence === 'Entering') {
-              handleEnter(currentNode);
-            }
-          }
-        }
-      })
-    )
-  );
-
-  const handleEnter = (id: string) => {
-    if (`#${id}` !== location.hash) {
-      navigate(`${location.pathname}${location.search}#${id}`, {
-        replace: true,
-        scroll: false,
-        state: undefined,
-      });
-
-      if (!isElementInView(`btn_${id}`)) {
-        const target = window.document.getElementById(`btn_${id}`);
-        if (target) {
-          target.scrollIntoView({ block: 'nearest' });
-        }
-      }
-    }
-  };
-
   return (
     <For each={Object.keys(props.menu())}>
       {(cat: string) => {
@@ -103,11 +38,9 @@ const Content = (props: Props) => {
                 if (sortedItems().length === 0) return null;
 
                 const id = convertStringSpaces(`${cat}/${subcat}`);
-                let ref: HTMLDivElement | undefined;
-                useVisibilityObserver(() => props.isVisible && ref);
 
                 return (
-                  <div ref={(el) => (ref = el)} id={id}>
+                  <div id={`card_${id}`}>
                     <div class={`d-flex flex-row fw-semibold mb-4 ${styles.title}`}>
                       <div
                         class={`d-flex flex-row align-items-center p-2 ${styles.categoryTitle}`}

diff --git a/web/src/layout/explore/card/Menu.tsx b/web/src/layout/explore/card/Menu.tsx
@@ -77,7 +77,7 @@ const Menu = (props: Props) => {
                             }}
                             disabled={`#${hash}` === location.hash}
                             onClick={() => {
-                              goToElement(hash, 16);
+                              goToElement(`card_${hash}`, 16);
                               updateRoute(hash);
                             }}
                           >

diff --git a/web/src/layout/explore/card/index.tsx b/web/src/layout/explore/card/index.tsx
@@ -1,11 +1,11 @@
-import { useLocation, useNavigate, useSearchParams } from '@solidjs/router';
+import { useLocation } from '@solidjs/router';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import isUndefined from 'lodash/isUndefined';
 import { createEffect, createSignal, on, Show } from 'solid-js';
 
-import { REGEX_PLUS, VIEW_MODE_PARAM } from '../../../data';
-import { CardMenu, ViewMode } from '../../../types';
+import { REGEX_PLUS } from '../../../data';
+import { CardMenu } from '../../../types';
 import convertStringSpaces from '../../../utils/convertStringSpaces';
 import goToElement from '../../../utils/goToElement';
 import { SubcategoryDetails } from '../../../utils/gridCategoryLayout';
@@ -21,15 +21,14 @@ interface Props {
   initialIsVisible: boolean;
   data: CategoriesData;
   categories_overridden?: string[];
+  updateHash: (hash?: string) => void;
   finishLoading: () => void;
 }
 
 const TITLE_OFFSET = 16;
 
 const CardCategory = (props: Props) => {
-  const navigate = useNavigate();
   const location = useLocation();
-  const [searchParams] = useSearchParams();
   const [firstLoad, setFirstLoad] = createSignal<boolean>(false);
   const [menu, setMenu] = createSignal<CardMenu>({});
   const [firstItem, setFirstItem] = createSignal<string>();
@@ -39,13 +38,7 @@ const CardCategory = (props: Props) => {
   const isVisible = () => props.initialIsVisible;
 
   const updateRoute = (hash: string) => {
-    // searchParams is not working properly and we are getting 'grid'
-    const updatedSearchParams = new URLSearchParams(searchParams);
-    updatedSearchParams.set(VIEW_MODE_PARAM, ViewMode.Card);
-    navigate(`${location.pathname}?${updatedSearchParams.toString()}#${hash}`, {
-      replace: true,
-      scroll: false,
-    });
+    props.updateHash(hash);
   };
 
   const prepareMenu = (d: CategoriesData): CardMenu => {
@@ -118,7 +111,7 @@ const CardCategory = (props: Props) => {
               }
             }
             setTimeout(() => {
-              goToElement(cleanHash, TITLE_OFFSET);
+              goToElement(`card_${cleanHash}`, TITLE_OFFSET);
             }, 100);
           }
         } else {

diff --git a/web/src/layout/explore/grid/GridItem.tsx b/web/src/layout/explore/grid/GridItem.tsx
@@ -1,4 +1,3 @@
-// import { createIntersectionObserver } from '@solid-primitives/intersection-observer';
 import isUndefined from 'lodash/isUndefined';
 import { createEffect, createSignal, on, onCleanup, Show } from 'solid-js';
 
@@ -16,6 +15,7 @@ interface Props {
   borderColor?: string;
   showMoreInfo: boolean;
   activeDropdown: boolean;
+  enableLazyLoad?: boolean;
 }
 
 const DEFAULT_DROPDOWN_WIDTH = 450;
@@ -184,7 +184,12 @@ const GridItem = (props: Props) => {
             aria-hidden="true"
             tabIndex={-1}
           >
-            <Image name={props.item.name} class={`m-auto ${styles.logo}`} logo={props.item.logo} isLoaded={false} />
+            <Image
+              name={props.item.name}
+              class={`m-auto ${styles.logo}`}
+              logo={props.item.logo}
+              enableLazyLoad={!isUndefined(props.enableLazyLoad) ? props.enableLazyLoad : true}
+            />
 
             {props.item.featured && props.item.featured.label && (
               <div

diff --git a/web/src/layout/explore/index.tsx b/web/src/layout/explore/index.tsx
@@ -1,5 +1,6 @@
 import { useLocation, useNavigate, useSearchParams } from '@solidjs/router';
 import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
 import isUndefined from 'lodash/isUndefined';
 import throttle from 'lodash/throttle';
 import { createEffect, createSignal, For, on, onCleanup, onMount, Show } from 'solid-js';
@@ -91,6 +92,17 @@ const Explore = (props: Props) => {
     });
   };
 
+  const updateHash = (hash?: string) => {
+    const updatedSearchParams = new URLSearchParams();
+    updatedSearchParams.set(VIEW_MODE_PARAM, ViewMode.Card);
+    updatedSearchParams.set(GROUP_PARAM, selectedGroup() || 'default');
+
+    navigate(`${location.pathname}?${updatedSearchParams.toString()}${!isUndefined(hash) ? `#${hash}` : ''}`, {
+      replace: true,
+      scroll: false,
+    });
+  };
+
   async function fetchItems() {
     try {
       const fullData = await itemsDataGetter.getAll();
@@ -150,7 +162,12 @@ const Explore = (props: Props) => {
   );
 
   const removeFilter = (name: FilterCategory, value: string) => {
-    const tmpActiveFilters: string[] = ({ ...activeFilters() }[name] || []).filter((f: string) => f !== value);
+    let tmpActiveFilters: string[] = ({ ...activeFilters() }[name] || []).filter((f: string) => f !== value);
+    if (name === FilterCategory.Maturity) {
+      if (isEqual(tmpActiveFilters, [window.baseDS.foundation.toLowerCase()])) {
+        tmpActiveFilters = [];
+      }
+    }
     updateActiveFilters(name, tmpActiveFilters);
   };
 
@@ -350,6 +367,7 @@ const Explore = (props: Props) => {
                 <Content
                   data={{ ...groupsData() }.default}
                   categories_overridden={props.initialData.categories_overridden}
+                  updateHash={updateHash}
                   finishLoading={finishLoading}
                 />
               }
@@ -362,6 +380,7 @@ const Explore = (props: Props) => {
                       initialSelectedGroup={selectedGroup()}
                       data={{ ...groupsData() }[group.name]}
                       categories_overridden={props.initialData.categories_overridden}
+                      updateHash={updateHash}
                       finishLoading={finishLoading}
                     />
                   );