Conflicts resloved

contentstack · Apr 2, 2024 · a2c58f8 · a2c58f8
2 parents 2f19ee9 + fc0cc27
commit a2c58f8
Show file tree

Hide file tree

Showing 25 changed files with 1,579 additions and 1,514 deletions.
diff --git a/README.md b/README.md
@@ -25,13 +25,12 @@ This TypeScript demo adopts many of Hydrogen's [framework conventions and third-
 This demo comes preconfigured Contentstack, which adds a Contentstack client to the Remix context. This enables you to fetch content from Contentstack in Remix loaders and actions.
 ```tsx
 // <root>/app/routes/($locale).products.$handle.tsx
-import {getEntryByUid} from '~/components/contentstack-sdk';
+import {getEntry} from '~/components/contentstack-sdk';
 
 const fetchData = async () => {
     try {
-      const result = await getEntryByUid({
-        contentTypeUid: 'shopify_home',
-        entryUid: 'your entry uid',
+      const result = await getEntry({
+        contentTypeUid: `${your_contenttypeUID}`,
         envConfig,
       });
       return result;

diff --git a/app/components/Aside.tsx b/app/components/Aside.tsx
@@ -26,7 +26,7 @@ export function Aside({
           window.location.hash = '';
         }}
       />
-      <aside style={{top: '10%'}}>
+      <aside style={{top: '5%'}}>
         <header>
           <h3>{heading}</h3>
           <CloseAside />

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -96,104 +96,96 @@ function HeaderCtas({
 }: Pick<HeaderProps, 'isLoggedIn' | 'cart'>) {
   return (
     <>
-      <nav className="header-ctas" role="navigation">
-        <HeaderMenuMobileToggle />
+      <nav className="flex">
+        {/* <div> */}
         <SearchToggle />
-      </nav>
-      <nav>
-        <div>
-          <CartToggle cart={cart} />
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 32 32"
-            fill="none"
-            className="svg-icon"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M16 4C10.5998 4 6.63888 9.38524 7.92483 14.9399C8.23755 16.2908 8.00775 17.7221 7.29007 18.8846L6.40027 20.326C5.34395 22.037 6.50176 24.3077 8.43056 24.3077H12.5175C12.5175 24.7926 12.6076 25.2727 12.7826 25.7207C12.9576 26.1686 13.2141 26.5757 13.5375 26.9185C13.8609 27.2614 14.2448 27.5334 14.6673 27.7189C15.0898 27.9045 15.5427 28 16 28C16.4573 28 16.9102 27.9045 17.3327 27.7189C17.7552 27.5334 18.1391 27.2614 18.4625 26.9185C18.7859 26.5757 19.0424 26.1686 19.2174 25.7207C19.3924 25.2727 19.4825 24.7926 19.4825 24.3077H23.5694C25.4982 24.3077 26.656 22.037 25.5997 20.326L24.7099 18.8846C23.9922 17.7221 23.7625 16.2908 24.0752 14.9399C25.3611 9.38523 21.4002 4 16 4ZM17.7412 24.3077H14.2588C14.2588 24.5501 14.3038 24.7902 14.3913 25.0142C14.4788 25.2382 14.6071 25.4417 14.7688 25.6131C14.9304 25.7846 15.1224 25.9205 15.3337 26.0133C15.5449 26.1061 15.7713 26.1538 16 26.1538C16.2287 26.1538 16.4551 26.1061 16.6663 26.0133C16.8776 25.9205 17.0696 25.7846 17.2312 25.6131C17.3929 25.4417 17.5212 25.2382 17.6087 25.0142C17.6962 24.7902 17.7412 24.5501 17.7412 24.3077ZM9.61587 14.4999C8.59788 10.1026 11.7352 5.84615 16 5.84615C20.2648 5.84615 23.4021 10.1026 22.3841 14.4999C21.9566 16.3464 22.2701 18.3036 23.253 19.8957L24.1428 21.337C24.4412 21.8203 24.1142 22.4615 23.5694 22.4615H8.43056C7.88583 22.4615 7.55885 21.8203 7.85717 21.337L8.74697 19.8957C9.72988 18.3036 10.0434 16.3464 9.61587 14.4999Z"
-              fill="#212121"
-            />
-          </svg>
-          <NavLink
-            prefetch="intent"
-            to="/account"
-            style={activeLinkStyle}
-            className="pl-7"
-          >
-            {isLoggedIn ? (
-              'Account'
-            ) : (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="32"
-                height="32"
-                viewBox="0 0 32 32"
-                fill="none"
-                className="svg-icon"
-              >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M16 6C13.7909 6 12 7.79086 12 10C12 12.2091 13.7909 14 16 14C18.2091 14 20 12.2091 20 10C20 7.79086 18.2091 6 16 6ZM10 10C10 6.68629 12.6863 4 16 4C19.3137 4 22 6.68629 22 10C22 13.3137 19.3137 16 16 16C12.6863 16 10 13.3137 10 10Z"
-                  fill="#212121"
-                />
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M11.2518 19.5765C10.1973 19.0972 9 19.8681 9 21.0265V23.7142C9 24.9766 10.0234 26 11.2858 26H20.7142C21.9766 26 23 24.9766 23 23.7142V21.0265C23 19.8681 21.8027 19.0972 20.7482 19.5765C17.7313 20.9479 14.2687 20.9479 11.2518 19.5765ZM7 21.0265C7 18.4136 9.70066 16.6746 12.0794 17.7558C14.5705 18.8881 17.4295 18.8881 19.9206 17.7558C22.2993 16.6746 25 18.4136 25 21.0265V23.7142C25 26.0812 23.0812 28 20.7142 28H11.2858C8.91881 28 7 26.0812 7 23.7142V21.0265Z"
-                  fill="#212121"
-                />
-              </svg>
-            )}
-          </NavLink>
-        </div>
+        <CartToggle cart={cart} />
+        <NavLink
+          prefetch="intent"
+          to="/account"
+          style={activeLinkStyle}
+          className="pl-7"
+        >
+          {isLoggedIn ? (
+            // 'Account'
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 32 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20 13C20 15.2091 18.2091 17 16 17C13.7909 17 12 15.2091 12 13C12 10.7909 13.7909 9 16 9C18.2091 9 20 10.7909 20 13Z"
+                fill="#212121"
+              />
+              <path
+                d="M10 18.994C10 17.6096 11.4483 16.7022 12.694 17.3062C14.7818 18.3184 17.2182 18.3184 19.306 17.3062C20.5517 16.7022 22 17.6096 22 18.994V21.4196C22 22.8447 20.8447 24 19.4196 24H12.5804C11.1553 24 10 22.8447 10 21.4196V18.994Z"
+                fill="#212121"
+              />
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M16 4.5C9.64873 4.5 4.5 9.64873 4.5 16C4.5 22.3513 9.64873 27.5 16 27.5C22.3513 27.5 27.5 22.3513 27.5 16C27.5 9.64873 22.3513 4.5 16 4.5ZM3.5 16C3.5 9.09644 9.09644 3.5 16 3.5C22.9036 3.5 28.5 9.09644 28.5 16C28.5 22.9036 22.9036 28.5 16 28.5C9.09644 28.5 3.5 22.9036 3.5 16Z"
+                fill="#212121"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 32 32"
+              fill="none"
+              className="svg-icon"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M16 6C13.7909 6 12 7.79086 12 10C12 12.2091 13.7909 14 16 14C18.2091 14 20 12.2091 20 10C20 7.79086 18.2091 6 16 6ZM10 10C10 6.68629 12.6863 4 16 4C19.3137 4 22 6.68629 22 10C22 13.3137 19.3137 16 16 16C12.6863 16 10 13.3137 10 10Z"
+                fill="#212121"
+              />
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M11.2518 19.5765C10.1973 19.0972 9 19.8681 9 21.0265V23.7142C9 24.9766 10.0234 26 11.2858 26H20.7142C21.9766 26 23 24.9766 23 23.7142V21.0265C23 19.8681 21.8027 19.0972 20.7482 19.5765C17.7313 20.9479 14.2687 20.9479 11.2518 19.5765ZM7 21.0265C7 18.4136 9.70066 16.6746 12.0794 17.7558C14.5705 18.8881 17.4295 18.8881 19.9206 17.7558C22.2993 16.6746 25 18.4136 25 21.0265V23.7142C25 26.0812 23.0812 28 20.7142 28H11.2858C8.91881 28 7 26.0812 7 23.7142V21.0265Z"
+                fill="#212121"
+              />
+            </svg>
+          )}
+        </NavLink>
+        {/* </div> */}
       </nav>
     </>
   );
 }
 
-function HeaderMenuMobileToggle() {
-  return (
-    <a className="header-menu-mobile-toggle" href="#mobile-menu-aside">
-      <h3>☰</h3>
-    </a>
-  );
-}
 
 function SearchToggle() {
   return (
-    <a href="#search-aside">
-      <div className="search-wrap">
-        <div className="search-content">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            className="search-cion"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M10.6062 3C6.40541 3 3 6.40541 3 10.6062C3 14.807 6.40541 18.2124 10.6062 18.2124C12.4365 18.2124 14.1158 17.5659 15.4282 16.4889L19.7179 20.7785C20.0108 21.0714 20.4856 21.0714 20.7785 20.7785C21.0714 20.4856 21.0714 20.0107 20.7785 19.7179L16.4889 15.4282C17.5659 14.1158 18.2124 12.4365 18.2124 10.6062C18.2124 6.40541 14.807 3 10.6062 3ZM4.5 10.6062C4.5 7.23384 7.23384 4.5 10.6062 4.5C13.9786 4.5 16.7124 7.23384 16.7124 10.6062C16.7124 13.9786 13.9786 16.7124 10.6062 16.7124C7.23384 16.7124 4.5 13.9786 4.5 10.6062Z"
-              fill="#475161"
-            />
-          </svg>
-          <p className="search-text">Search</p>
-        </div>
-      </div>
+    <a href="#search-aside" className="pr-7">
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="svg-icon"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.1416 4C8.54055 4 4 8.54055 4 14.1416C4 19.7426 8.54055 24.2832 14.1416 24.2832C16.582 24.2832 18.821 23.4212 20.5709 21.9852L26.2905 27.7047C26.681 28.0952 27.3142 28.0952 27.7047 27.7047C28.0952 27.3142 28.0952 26.681 27.7047 26.2905L21.9852 20.5709C23.4212 18.821 24.2832 16.582 24.2832 14.1416C24.2832 8.54055 19.7426 4 14.1416 4ZM6 14.1416C6 9.64512 9.64512 6 14.1416 6C18.6381 6 22.2832 9.64512 22.2832 14.1416C22.2832 18.6381 18.6381 22.2832 14.1416 22.2832C9.64512 22.2832 6 18.6381 6 14.1416Z"
+          fill="#212121"
+        />
+      </svg>
     </a>
   );
 }
 
 function CartBadge({count}: {count: number}) {
   return (
-    <a href="#cart-aside" className="pr-7">
+    <a href="#cart-aside" className="pl-7">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="32"

diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
@@ -20,6 +20,7 @@ export type LayoutProps = {
   footer: Promise<FooterQuery>;
   header: HeaderQuery;
   isLoggedIn: boolean;
+  fetchData: any;
 };
 
 export function Layout({
@@ -28,6 +29,7 @@ export function Layout({
   footer,
   header,
   isLoggedIn,
+  fetchData,
 }: LayoutProps) {
   return (
     <>
@@ -38,7 +40,13 @@ export function Layout({
       <main>{children}</main>
       <Suspense>
         <Await resolve={footer}>
-          {(footer) => <Footer menu={footer?.menu} shop={header?.shop} />}
+          {(footer) => (
+            <Footer
+              menu={footer?.menu}
+              shop={header?.shop}
+              cmsData={fetchData}
+            />
+          )}
         </Await>
       </Suspense>
     </>

diff --git a/app/components/contentstack-sdk.js b/app/components/contentstack-sdk.js
@@ -16,26 +16,7 @@ export const getEntry = async ({contentTypeUid, envConfig}) => {
       .find()
       .then(
         (result) => {
-          resolve(result);
-        },
-        (error) => {
-          reject(error);
-        },
-      );
-  });
-};
-
-export const getEntryByUid = async ({contentTypeUid, entryUid, envConfig}) => {
-  return new Promise((resolve, reject) => {
-    const blogQuery = Stack(envConfig)
-      .ContentType(contentTypeUid)
-      .Entry(entryUid);
-    blogQuery
-      .toJSON()
-      .fetch()
-      .then(
-        (result) => {
-          resolve(result);
+          resolve(result[0][0]);
         },
         (error) => {
           reject(error);

diff --git a/app/root.tsx b/app/root.tsx
@@ -23,6 +23,7 @@ import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
 import {cssBundleHref} from '@remix-run/css-bundle';
+import {getEntry} from './components/contentstack-sdk';
 
 /**
  * This is important to avoid re-fetching root queries on sub-navigations
@@ -97,13 +98,28 @@ export async function loader({context}: LoaderFunctionArgs) {
     },
   });
 
+  const envConfig = context?.env;
+  const fetchData = async () => {
+    try {
+      const result = await getEntry({
+        contentTypeUid: 'footer',
+        envConfig,
+      });
+      return result;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('ERROR', error);
+    }
+  };
+
   return defer(
     {
       cart: cartPromise,
       footer: footerPromise,
       header: await headerPromise,
       isLoggedIn,
       publicStoreDomain,
+      fetchedData: await fetchData(),
     },
     {headers},
   );
@@ -112,7 +128,6 @@ export async function loader({context}: LoaderFunctionArgs) {
 export default function App() {
   const nonce = useNonce();
   const data = useLoaderData<typeof loader>();
-
   return (
     <html lang="en">
       <head>
@@ -122,7 +137,7 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Layout {...data}>
+        <Layout fetchData={data?.fetchedData} {...data}>
           <Outlet />
         </Layout>
         <ScrollRestoration nonce={nonce} />