const onAdd = (product, quantity) => {
  const checkProductInCart = cartItems.find((item) => item._id === product._id);
  
  setTotalPrice((prevTotalPrice) => prevTotalPrice + product.price * quantity);
  setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + quantity);
  
  if (checkProductInCart) {
    const updatedCartItems = cartItems.map((cartProduct) => {
      if (cartProduct._id === product._id)
        return {
          ...cartProduct,
          quantity: cartProduct.quantity + quantity,
        };
    });
  
    setCartItems(updatedCartItems);
  } else {
    product.quantity = quantity;
    // Sort the items to avoid them moving in the cart
    const sortedItems = [...cartItems, { ...product }];
    sortedItems.sort((a, b) => {
      const nameA = a.name.toUpperCase(); // ignore upper and lowercase
      const nameB = b.name.toUpperCase(); // ignore upper and lowercase
      if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }
      // names must be equal
      return 0;
    });
    setCartItems(sortedItems);
  }
  
  toast.success(`${qty} ${product.name} added to the cart.`);
};

const toggleCartItemQuantity = (id, value) => {
  foundProduct = cartItems.find((item) => item._id === id);
  // index = cartItems.findIndex((product) => product._id === id);
  const newCartItems = cartItems.filter((item) => item._id !== id);
  
  if (value === "inc") {
    // Sort the items to avoid them moving in the cart
    const sortedItems = [
      ...newCartItems,
      { ...foundProduct, quantity: foundProduct.quantity + 1 },
    ];
    sortedItems.sort((a, b) => {
      const nameA = a.name.toUpperCase(); // ignore upper and lowercase
      const nameB = b.name.toUpperCase(); // ignore upper and lowercase
      if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }
      // names must be equal
      return 0;
    });
    setCartItems(sortedItems);
    setTotalPrice((prevTotalPrice) => prevTotalPrice + foundProduct.price);
    setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + 1);
  } else if (value === "dec") {
    if (foundProduct.quantity > 1) {
      // Sort the items to avoid them moving in the cart
      const sortedItems = [
        ...newCartItems,
        { ...foundProduct, quantity: foundProduct.quantity - 1 },
      ];
      sortedItems.sort((a, b) => {
        const nameA = a.name.toUpperCase(); // ignore upper and lowercase
        const nameB = b.name.toUpperCase(); // ignore upper and lowercase
        if (nameA < nameB) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
        // names must be equal
        return 0;
      });
      setCartItems(sortedItems);
      setTotalPrice((prevTotalPrice) => prevTotalPrice - foundProduct.price);
      setTotalQuantities((prevTotalQuantities) => prevTotalQuantities - 1);
    }
  }
};

import React from 'react';
import {GoogleLogin, GoogleOAuthProvider} from '@react-oauth/google';
import { useNavigate } from 'react-router-dom';
import shareVideo from '../assets/share.mp4';
import logo from '../assets/logowhite.png';
import { client } from '../client';
import jwt_decode from 'jwt-decode'

const Login = () => {
    const navigate = useNavigate();

    const responseGoogle = (response) => {

        const userResponse = jwt_decode(response.credential);

        localStorage.setItem('user', JSON.stringify(userResponse));
        const { name, sub, picture } = userResponse;

        const doc = {
            _id: sub,
            _type: 'user',
            userName: name,
            image: picture
        }
        
        client.createIfNotExists(doc).then(()=>{
            navigate('/', {replace: true})
        });

    };

    return (
        <div className="flex justify-start items-center flex-col h-screen">
            <div className=" relative w-full h-full">
                <video
                    src={shareVideo}
                    type="video/mp4"
                    loop
                    controls={false}
                    muted
                    autoPlay
                    className="w-full h-full object-cover"
                />

                <div className="absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0    bg-blackOverlay">
                    <div className="p-5">
                        <img src={logo} width="130px" alt='logo' />
                    </div>

                    <GoogleOAuthProvider
                        clientId={`${process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID}`} className="shadow-2xl">
                        <GoogleLogin
                            onSuccess={responseGoogle}
                            onFailure={responseGoogle}
                            cookiePolicy="single_host_origin"
                        />
                    </GoogleOAuthProvider>
                </div>
            </div>
        </div>
    );
};

export default Login;

import React, { useState, useRef, useEffect } from 'react'
import { HiMenu } from 'react-icons/hi'
import { AiFillCloseCircle } from 'react-icons/ai'
import { Routes, Route, Link } from 'react-router-dom'
import { Sidebar, UserProfile } from '../components'
import { client } from '../client'
import logo from '../assets/logo.png'
import Pins from './Pins'
import { userQuery } from '../utils/data'

const Home = () => {
  const [user, setUser] = useState(null)
  const [toggleSidebar, setToggleSidebar] = useState(false)
  
  const scrollRef = useRef(null);

  const userInfo = localStorage.getItem('user') !== 'undefined' ? JSON.parse(localStorage.getItem('user')) : localStorage.clear();

  useEffect(() => {
    const query = userQuery(userInfo?.sub);

    client.fetch(query).then((data) => {
      setUser(data[0]);
    })
    //eslint-disable-next-line
  }, []);

  useEffect(() => {
    scrollRef.current.scrollTo(0, 0);
  });

  return (
    <div className="flex bg-gray-50 md:flex-row flex-col h-screen transition-height duration-75 ease-out">
      <div className="hidden md:flex h-screen flex-initial">
        <Sidebar user={user && user} />
      </div>
      <div className="flex md:hidden flex-row">
        <div className="p-2 w-full flex flex-row justify-between items-center shadow-md">
          <HiMenu fontSize={40} className="cursor-pointer" onClick={() => setToggleSidebar(true)} />
          <Link to="/">
            <img src={logo} alt="logo" className="w-28" />
          </Link>
          <Link to={`user-profile/${user?._id}`}>
            <img src={user?.image} alt={user?.name} className="w-9 h-9 rounded-full " />
          </Link>
        </div>
        {toggleSidebar && (
          <div className="fixed w-4/5 bg-white h-screen overflow-y-auto shadow-md z-10 animate-slide-in">
            <div className="absolute w-full flex justify-end items-center p-2">
              <AiFillCloseCircle fontSize={30} className="cursor-pointer" onClick={() => setToggleSidebar(false)} />
            </div>
            <Sidebar closeToggle={setToggleSidebar} user={user && user} />
          </div>
        )}
      </div>
      <div className="pb-2 flex-1 h-screen overflow-y-scroll" ref={scrollRef}>
        <Routes>
          <Route path="/user-profile/:userId" element={<UserProfile />} />
          <Route path="/*" element={<Pins user={user && user} />} />
        </Routes>
      </div>
    </div>
  )
}

export default Home

return (
	<div className="flex flex-col justify-between bg-white h-full overflow-y-scroll min-w-210 hide-scrollbar">
		<div className="flex flex-col">
			<Link
				to="/"
				className="flex px-5 gap-2 my-6 pt-1 w-190 items-center"
				onClick={handleCloseSidebar}
			>
				<img src={logo} alt="logo" className="w-full" />
			</Link>
			<div className="flex flex-col gap-5">
				<NavLink
					to="/"
					className={({ isActive }) =>
						isActive ? isActiveStyle : isNotActiveStyle
					}
					onClick={handleCloseSidebar}
				>
					<RiHomeFill />
					Home
				</NavLink>
				<h3 className="mt-2 px-5 text-base 2xl:text:xl">
					Discover categories
				</h3>
				{categories.slice(0, categories.length - 1).map((category) => {
					return (
						<NavLink
							to={`/category/${category.name}`}
							className={({ isActive }) =>
								isActive ? isActiveStyle : isNotActiveStyle
							}
							onClick={handleCloseSidebar}
							key={category.name}
						>
							{category.name}
						</NavLink>
					);
				})}
			</div>
		</div>
		{user && (
			<Link
				to={`user-profile/${user._id}`}
				className="flex my-5 mb-3 gap-2 p-2 items-center bg-white rounded-lg shadow-lg mx-3"
				onClick={handleCloseSidebar}
			>
				<img
					src={user.image}
					className="w-10 h-10 rounded-full"
					alt="user-profile"
				/>
				<p>{user.userName}</p>
				<IoIosArrowForward />
			</Link>
		)}
	</div>
);

./node_modules/@sanity/client/dist/sanityClient.browser.mjs
Can't import the named export 'jsonRequest' from non EcmaScript module (only default export is available)

import SanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = SanityClient({
    projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
    dataset: 'production',
    apiVersion:'2021-10-21',
    useCdn: false,
    token: process.env.NEXT_PUBLIC_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

import {client} from '../client'

{
  "name": "excuse_frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-oauth/google": "^0.7.0",
    "@sanity/client": "^4.0.1",
    "@sanity/image-url": "^1.0.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.3",
    "jwt-decode": "^3.1.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-loader-spinner": "^5.3.4",
    "react-masonry-css": "^1.0.16",
    "react-router-dom": "^6.8.1",
    "react-scripts": "^2.1.3",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.2.6"
  }
}