refactor: 💡 grid calc into lib

jaskaransarkaria · Dec 24, 2021 · f7faa70 · f7faa70
1 parent 5934871
commit f7faa70
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 46 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2021-12-24T17:33:44.336Z',
+  started: '2021-12-24T18:54:17.590Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Fri Dec 24 2021 17:33:48 GMT+0000 (Greenwich Mean Time)
+ * File generated Fri Dec 24 2021 18:54:20 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-12-24T17:33:48.463Z';
+export const __timestamp = '2021-12-24T18:54:20.111Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,18 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK"
-    />
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <meta name="description" content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK">
     <title>Enki</title>
-
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle-1640367224334.css" />
-
-    <script defer src="/build/bundle-1640367224334.js"></script>
+    
+    <link rel='icon' type='image/png' href='/favicon.png'>
+    <link rel='stylesheet' href='/global.css'>
+    <link rel='stylesheet' href='/build/bundle-1640372057589.css'>
+    
+    <script defer src='/build/bundle-1640372057589.js'></script>
   </head>
-  <body></body>
-</html>
+  <body>
+  </body>
+</html>
diff --git a/src/components/HexGrid/HexGrid.svelte b/src/components/HexGrid/HexGrid.svelte
@@ -1,20 +1,13 @@
 <script lang="typescript">
-  import { fade, slide } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
+  import { calcShowGrid } from '@/libs/gridCalc';
   import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.svelte';
 
   import type { Base, BaseFn } from '@/types/base';
 
   export let data: Base[] = [];
   export let categoryFn: BaseFn;
 
-  const gridCols: { [key: string]: number } = {
-    lessThan360AndDefault: 10,
-    upTo600: 4,
-    '600to900': 6,
-    '900to1200': 8,
-    '1960plus': 14,
-  };
-
   const createEmptyArray = (length: number) =>
     new Array(length).fill(undefined);
 
@@ -26,24 +19,7 @@
     sourceElemArr[idx].srcset = imgElemArr[idx].src;
   };
 
-  const getGridCols = (width: number) => {
-    if (width >= 1960) {
-      return gridCols['1960plus'];
-    }
-    if (width >= 900 && width <= 1200) {
-      return gridCols['900to1200'];
-    }
-    if (width >= 600 && width <= 900) {
-      return gridCols['600to900'];
-    }
-    if (width <= 600) {
-      return gridCols['upTo600'];
-    }
-    return gridCols['lessThan360AndDefault'];
-  };
-
-  $: showGrid =
-    getGridCols(window.innerWidth) - data.length * 2 <= 2 ? true : false;
+  $: showGrid = calcShowGrid(window.innerWidth, data.length);
 </script>
 
 <ul class={showGrid ? 'root-categories-container' : 'flexbox-container'}>

diff --git a/src/components/ProductView/ProductView.svelte b/src/components/ProductView/ProductView.svelte
@@ -1,6 +1,7 @@
 <script lang="typescript">
   import { groupBy } from 'lodash-es';
   import { fade } from 'svelte/transition';
+  import { calcShowGrid } from '@/libs/gridCalc';
   import SingleProduct from '@/components/SingleProduct/SingleProduct.svelte';
   import type { Product } from '@/types/product';
 
@@ -26,7 +27,8 @@
     {#each groupedVariantProducts as variants (variants)}
       <div
         in:fade={{ delay: 500 }}
-        class={showDetailedView || productArr.length <= 3
+        class={showDetailedView ||
+        !calcShowGrid(window.innerWidth, productArr.length)
           ? 'detailed-products-container'
           : 'products-container'}
       >
@@ -38,7 +40,8 @@
   {:else}
     <div
       in:fade={{ delay: 500 }}
-      class={showDetailedView || productArr.length <= 3
+      class={showDetailedView ||
+      !calcShowGrid(window.innerWidth, productArr.length)
         ? 'detailed-products-container'
         : 'products-container'}
     >

diff --git a/src/libs/gridCalc.ts b/src/libs/gridCalc.ts
@@ -0,0 +1,27 @@
+const gridCols: { [key: string]: number } = {
+  lessThan360AndDefault: 10,
+  upTo600: 4,
+  '600to900': 6,
+  '900to1200': 8,
+  '1960plus': 14,
+};
+
+const getGridCols = (width: number) => {
+  console.log('width', width);
+  if (width >= 1960) {
+    return gridCols['1960plus'];
+  }
+  if (width >= 900 && width <= 1200) {
+    return gridCols['900to1200'];
+  }
+  if (width >= 600 && width <= 900) {
+    return gridCols['600to900'];
+  }
+  if (width <= 600) {
+    return gridCols['upTo600'];
+  }
+  return gridCols['lessThan360AndDefault'];
+};
+
+export const calcShowGrid = (width: number, dataLength: number): boolean =>
+  getGridCols(width) - dataLength * 2 <= 2 ? true : false;