theme-update

client/.env

@@ -0,0 +1,4 @@
+VITE_VARIABLE_BACKEND=http://localhost:8000
+VITE_VARIABLE_IPFS=http://localhost:8001
+VITE_VARIABLE_ID_STORE=654074c904cf9f8ebc076631
+VITE_VARIABLE_PORT=8002

client/package.json

@@ -20,7 +20,10 @@
     "vite-plugin-solid": "^2.5.0"
   },
   "dependencies": {
+    "@solid-primitives/graphql": "^2.0.1",
     "@solidjs/router": "^0.8.2",
+    "@urql/core": "^4.2.0",
+    "@urql/exchange-retry": "^1.2.0",
     "aos": "^2.3.4",
     "axios": "^1.4.0",
     "babel-preset-solid": "^1.7.4",

client/src/App.tsx

@@ -22,7 +22,7 @@ import Reset from "./pages/reset";
 const App: Component = () => {
   const location = useLocation();
   return (
-    <section>
+    <section class="bg-base-200">
       {location.pathname !== "/login" &&
         location.pathname !== "/register" &&
         location.pathname !== "/reset" && <Navbar />}

client/src/components/cards/Cards.tsx

@@ -2,21 +2,10 @@ import { Component, Show } from "solid-js";
 import { useCartContext } from "../../context/CartContext";
 import { useNavigate } from "@solidjs/router";
 
-export type Product = {
-  id: string;
-  name: string;
-  image: string;
-  rating: number;
-  brand: string;
-  price: number;
-  category: string;
-  quantity: number;
-};
-
-const Cards: Component<{ product: Product }> = (props) => {
+const Cards: Component<{ product: ProductType }> = (props) => {
   const { cartItems, addToCart } = useCartContext();
   const navigate = useNavigate();
-  const handleAddTocart = (product: Product) => {
+  const handleAddTocart = (product: ProductType) => {
     addToCart(product);
   };
   const isInCart = () => {
@@ -66,7 +55,9 @@ const Cards: Component<{ product: Product }> = (props) => {
             <div class="w-full">
               <img
                 class="p-3 rounded-t-lg w-60 sm:w-48 mx-auto group-hover:scale-110 duration-150"
-                src={props?.product?.image}
+                src={`${import.meta.env.VITE_VARIABLE_IPFS}/api/ipsf?hash=${
+                  props?.product?.thumbnail
+                }`}
                 alt="product image"
               />
             </div>
@@ -123,12 +114,12 @@ const Cards: Component<{ product: Product }> = (props) => {
                 </span>
               </div>
               <h5 class="text-md font-medium tracking-tight text-gray-900 dark:text-white ">
-                {props?.product?.name}
+                {props?.product?.title}
               </h5>
 
               <div
                 class={`flex items-center justify-between ${
-                  props?.product?.name?.length > 35 ? "mt-1" : "mt-7"
+                  props?.product?.title?.length > 35 ? "mt-1" : "mt-7"
                 }`}
               >
                 <span class="text-3xl lg:text-xl 2xl:text-3xl font-bold text-danger dark:text-white ">

client/src/components/layouts/Navbar.tsx

@@ -1,7 +1,8 @@
-import { Component } from "solid-js";
+import { Component, createResource } from "solid-js";
 import { A } from "@solidjs/router";
 import { useCartContext } from "../../context/CartContext";
 import NavActive from "./NavActive";
+import { read } from "../../utils/theme";
 
 export type Nav = {
   title: string;
@@ -12,13 +13,15 @@ export type Nav = {
 
 const Navbar: Component<{}> = () => {
   const { cartItems } = useCartContext();
-
+  const logo = read("logo");
+  const name = read("name");
+
   return (
     <div>
       <nav class="bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100 ">
         <div class="max-w-screen-xl flex lg:flex-wrap  items-center justify-between mx-auto p-4 md:px-2 lg:px-24 xl:px-24 2xl:px-2">
           <A href="/" class="flex items-center">
-            <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
+            <img class="md:w-24 w-24" src={logo()} alt={name()} />
           </A>
           <div class="flex items-center md:order-2">
             <div class="hidden md:hidden lg:block">

client/src/context/CartContext.tsx

@@ -13,14 +13,14 @@ type Product = {
 };
 
 type CartItem = {
-  product: Product;
+  product: ProductType;
   quantity: number;
 };
 
 type CartContextValue = {
   cartItems: CartItem[];
-  addToCart: (product: Product) => void;
-  minusCart: (product: Product) => void;
+  addToCart: (product: ProductType) => void;
+  minusCart: (product: ProductType) => void;
   removeFromCart: (productId: string) => void;
 };
 
@@ -46,7 +46,7 @@ export function CartContextProvider(props: { children: any }) {
     localStorage.setItem("cartItems", JSON.stringify(cartItems));
   };
 
-  const addToCart = (product: Product) => {
+  const addToCart = (product: ProductType) => {
     setCartItems((prevItems) => {
       const existingItem = prevItems.find(
         (item) => item.product?.id === product?.id
@@ -65,7 +65,7 @@ export function CartContextProvider(props: { children: any }) {
     updateLocalStorage();
   };
 
-  const minusCart = (product: Product) => {
+  const minusCart = (product: ProductType) => {
     setCartItems((prevItems) => {
       const existingItem = prevItems.find(
         (item) => item.product?.id === product?.id
@@ -78,7 +78,7 @@ export function CartContextProvider(props: { children: any }) {
         );
       }
       const updatedItems = prevItems.filter(
-        (item: any) => item.product.id !== product.id
+        (item: CartItem) => item.product.id !== product.id
       );
       return updatedItems;
       // const newItem: CartItem = { product, quantity: 1 };

client/src/graphql/product.ts

@@ -0,0 +1,38 @@
+import { gql } from "@urql/core";
+
+export const GET_ALL_PRODUCTS = gql`
+  query {
+    themeProducts {
+      id
+      desc
+      status
+      createdAt
+      title
+      thumbnail
+      images
+      variants {
+        price
+        option
+        label
+        image
+      }
+      updatedAt
+      category {
+        image
+        id
+        title {
+          en
+          kh
+        }
+        subcategories {
+          id
+          title {
+            en
+            kh
+          }
+          image
+        }
+      }
+    }
+  }
+`;

client/src/libs/client.ts

@@ -0,0 +1,44 @@
+import { createClient, cacheExchange, fetchExchange } from "@urql/core";
+import { retryExchange } from "@urql/exchange-retry";
+import { createGraphQLClient } from "@solid-primitives/graphql";
+
+export const client = createClient({
+  url: `${import.meta.env.VITE_VARIABLE_BACKEND}/graphql/private?store_id=${import.meta.env.VITE_VARIABLE_ID_STORE}`,
+  fetchOptions: {
+    credentials: "include",
+  },
+  exchanges: [
+    retryExchange({
+      maxNumberAttempts: 10,
+      maxDelayMs: 500,
+      retryIf: (error) => {
+        // NOTE: With this deemo schema we have a specific random error to look out for:
+        return (
+          error.graphQLErrors.some((x) => x.extensions?.code === "NO_SOUP") ||
+          !!error.networkError
+        );
+      },
+    }),
+    cacheExchange,
+    fetchExchange,
+  ],
+});
+
+export const clientQuery = createGraphQLClient(
+  `${import.meta.env.VITE_VARIABLE_BACKEND}/graphql/private?store_id=${import.meta.env.VITE_VARIABLE_ID_STORE}`,
+  {
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+    },
+  }
+);
+
+export const publicQuery = createGraphQLClient(
+  `${import.meta.env.VITE_VARIABLE_BACKEND}/graphql/public?store_id=${import.meta.env.VITE_VARIABLE_ID_STORE}`,
+  {
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+    },
+  }
+);
+