Merge pull request #461 from Dark-Matter-Labs/staging

Merge new themes and some query refactoring
Dark-Matter-Labs · Feb 9, 2024 · 172de0f · 172de0f
2 parents 16023a0 + ba26f2f
commit 172de0f
Show file tree

Hide file tree

Showing 35 changed files with 1,402 additions and 1,047 deletions.
diff --git a/components/instrument/instrument-header.js b/components/instrument/instrument-header.js
@@ -32,7 +32,12 @@ export default function InstrumentHeader({ data }) {
   const [simpleThema, setSimpleThema] = useState();
 
   useEffect(() => {
-    if (router.pathname.includes('meubels') || router.pathname.includes('woningen')) {
+    if (
+      router.pathname.includes('meubels') ||
+      router.pathname.includes('woningen') ||
+      router.pathname.includes('kunstgrasvelden') ||
+      router.pathname.includes('eiwittransitie')
+    ) {
       setSimpleThema(true);
     } else {
       setSimpleThema(false);

diff --git a/components/layouts/layout.js b/components/layouts/layout.js
@@ -21,19 +21,19 @@ export default function Layout({
 }) {
   const { data: aboutPageSlugs } = useSWR(groq`${siteSettingsQuerys.overCirulaw}`, fetcher);
   const { data: vraagAntwoordSlug } = useSWR(groq`${siteSettingsQuerys.vraagAntwoord}`, fetcher);
-  const { data: themaPageSlugs } = useSWR(groq`${siteSettingsQuerys.thema}`, fetcher);
+  // const { data: themaPageSlugs } = useSWR(groq`${siteSettingsQuerys.thema}`, fetcher);
   const { data: footerTextData } = useSWR(groq`${footerQuery}`, fetcher);
   const footerText = footerTextData;
   const aboutNavItems = aboutPageSlugs;
   const vraagSlug = vraagAntwoordSlug?.slug;
-  const themaSlugs = themaPageSlugs?.slugs;
+  // const themaSlugs = themaPageSlugs?.slugs;
 
   return (
     <>
       <Nav
         vraagSlug={vraagSlug}
         aboutSlugs={aboutNavItems}
-        themaSlugs={themaSlugs}
+        // themaSlugs={themaSlugs}
         homePageHeader={homePageHeader}
       />
       <Head>
@@ -62,7 +62,7 @@ export default function Layout({
       <Footer
         vraagSlug={vraagSlug}
         aboutSlugs={aboutNavItems}
-        themaSlugs={themaSlugs}
+        // themaSlugs={themaSlugs}
         footerText={footerText}
       />
     </>

diff --git a/components/layouts/measures-layout.js b/components/layouts/measures-layout.js
@@ -2,10 +2,8 @@ import { useState, useEffect, useRef, Fragment, useCallback } from 'react';
 import { Dialog, Transition, Combobox } from '@headlessui/react';
 import createPersistedState from 'use-persisted-state';
 import { SearchIcon, XIcon, AdjustmentsIcon } from '@heroicons/react/outline';
-import { groq } from 'next-sanity';
 import { toPlainText } from '@portabletext/react';
 import Fuse from 'fuse.js';
-import useSWR from 'swr';
 
 import {
   overheidslaag,
@@ -17,15 +15,13 @@ import {
 } from '@/utils/data-filter';
 import SearchFilter from '/components/search-filter';
 import PolicyList from '/components/policy-list';
-import { fetcher } from '@/utils/swr-fetcher';
-import { measureLayoutQuery } from '@/lib/queries';
 import OverviewPageHeader from '../overview-page-header';
 // creating objects for persisting values
 const useSelectedState = createPersistedState('selected');
 
 export default function MeasuresLayout({ ...props }) {
-  // TODO: import the data staticly with getStaticProps when we implement link structure changes
-  const { data } = useSWR(groq`${measureLayoutQuery}`, fetcher);
+  const data = props.instruments;
+
   // creating references to access child component functions
   const expertiseFilterRef = useRef();
   const wettelijkFilterRef = useRef();
@@ -132,10 +128,6 @@ export default function MeasuresLayout({ ...props }) {
     // added check for data to have been retrieved here
     if (data) {
       let filteredLaws = data;
-      // filter for thema
-      filteredLaws = filteredLaws?.filter((element) => {
-        return element.thema === props.thema;
-      });
 
       filteredLaws?.map((law) => {
         if (law.expertise[0] === true) {

diff --git a/components/layouts/simple-thema-layout.js b/components/layouts/simple-thema-layout.js
@@ -4,9 +4,8 @@ import InstrumentMetaData from '../instrument/instrument-metadata';
 import ThemePageHeader from '@/components/theme-page/theme-page-header';
 import ThemePageHeaderMobile from '../theme-page/theme-page-header-mobile';
 
-export default function SimpleThemaLayout({ instruments, numberOfLaws, subheading, ...props }) {
+export default function SimpleThemaLayout({ instruments, numberOfLaws, ...props }) {
   const themaData = props.thema;
-
   return (
     <>
       {/* HEADER DESKTOP */}
@@ -17,7 +16,7 @@ export default function SimpleThemaLayout({ instruments, numberOfLaws, subheadin
       <div className='global-margin'>
         <div className='max-w-[830px] mb-10'>
           <h2 className='p-5xl-semibold pb-4 pt-7'>
-            First {numberOfLaws} {subheading}
+            Eerste {numberOfLaws} {themaData.introTextTitle}
           </h2>
           <p>{themaData?.introText}</p>
         </div>

diff --git a/components/nav/footer.js b/components/nav/footer.js
@@ -25,6 +25,8 @@ const navigation = {
     { name: 'Windturbines', slug: '/maakindustrie/windturbines' },
     { name: 'Woningen', slug: '/bouw/woningen' },
     { name: 'Meubels', slug: '/consumptie-goederen/meubels' },
+    { name: 'Eiwittransitie', slug: '/biomassa-en-voedsel/eiwittransitie' },
+    { name: 'Kunstgrasvelden', slug: '/kunststoffen/kunstgrasvelden' },
   ],
 };
 

diff --git a/components/nav/index.js b/components/nav/index.js
@@ -53,14 +53,10 @@ const maakindustrieThemas = [{ name: 'Windturbines', url: '/maakindustrie/windtu
 
 const biomassaEnVoedselThemas = [
   { name: 'Voedselverspilling', url: '/biomassa-en-voedsel/voedselverspilling' },
+  { name: 'Eiwittransitie', url: '/biomassa-en-voedsel/eiwittransitie' },
 ];
 
-{
-  /* 
-const kunststoffenThemas = [
-  { name: 'Plastic in de bouw', url: '/kunststoffen/plastic-in-de-bouw' },
-];*/
-}
+const kunststoffenThemas = [{ name: 'Kunstgrasvelden', url: '/kunststoffen/kunstgrasvelden' }];
 
 export default function Nav3(props) {
   const router = useRouter();
@@ -373,9 +369,10 @@ export default function Nav3(props) {
                                           transitionAgenda='Maakindustrie'
                                           themas={maakindustrieThemas}
                                         />
-                                        <li className='p-base-semibold text-green-800 py-6 border-b opacity-75'>
-                                          Kunststoffen
-                                        </li>
+                                        <MobileDisclosure
+                                          transitionAgenda='Kunststoffen'
+                                          themas={kunststoffenThemas}
+                                        />
                                       </ul>
                                     </Disclosure.Panel>
                                   </Transition>
@@ -512,24 +509,10 @@ export default function Nav3(props) {
                               transitionAgenda='Maakindustrie'
                               themas={maakindustrieThemas}
                             />
-                            <div
-                              className={`${
-                                router.pathname === '/'
-                                  ? 'bg-green-600 text-gray-100 opacity-80'
-                                  : 'bg-grey-100 text-green-800 text-opacity-75'
-                              } w-full flex flex-col pl-3 lg:pl-6 pt-8 pr-2`}
-                            >
-                              <div className='p-lg-semibold '>Kunststoffen</div>
-                              <div className=''>
-                                <div
-                                  className={`${
-                                    router.pathname === '/' ? 'text-gray-100' : 'text-gray-600'
-                                  } p-xs mt-2 italic`}
-                                >
-                                  Thema’s voor deze productketen volgen binnenkort
-                                </div>
-                              </div>
-                            </div>
+                            <DesktopNavCard
+                              transitionAgenda='Kunststoffen'
+                              themas={kunststoffenThemas}
+                            />
                           </div>
                         </div>
                       </div>