DEV Community: Gurupal Singh

Add dark mode in react admin panel

Gurupal Singh — Tue, 17 May 2022 12:48:29 +0000

Hi, i am implementing a bootstrap theme to my react admin panel which is having dark mode. I want to add this into my project with prefers-color-scheme (window.matchMedia) and not by toggling. I have 2 bootstrap css files (theme-light.css and theme-dark.css).

Can anyone help me or have an example that how can i implement the dark mode inside my react application ? I have googled and found below code, but it is not working as expected.

const [isDarkMode, setisDarkMode] = useState(false); const [isLightMode, setisLightMode] = useState(false); const [supportsColorScheme, setSupportsColorScheme] = useState(false);
useEffect(() => {
const supportsColorScheme = window.matchMedia(
"(prefers-color-scheme)"
).matches;

const isDarkMode = window.matchMedia(
  "(prefers-color-scheme: dark)"
).matches;

const isLightMode = window.matchMedia(
  "(prefers-color-scheme: light)"
).matches;

setisDarkMode(isDarkMode);
setisLightMode(isLightMode);
setSupportsColorScheme(supportsColorScheme);

}, []);

if (supportsColorScheme) { if (isDarkMode) { require("assets/css/theme-dark.css"); } else if (isLightMode) { require("assets/css/theme-light.css"); } }

send json body in react useQuery ..!!

Gurupal Singh — Wed, 15 Dec 2021 12:00:03 +0000

Hi, is there any way to send json body in GET request of react useQuery ?

for example i want to send below id in json body :-

{ "id": 21 }

Router.back() won't work in incognito mode or when link comes from different source..!!

Gurupal Singh — Fri, 10 Sep 2021 06:24:48 +0000

Hi, i am using nextjs as react framework for my ecommerce website. My product detail page have an custom back button which is having Router.back() function. This works normal when browsing back and forth in website. But whenever i copy the product detail link and open directly in incognito mode the custom back button won't work...!!

Anyone have solution for this ?

Toggle state changed on routing..!!

Gurupal Singh — Mon, 23 Aug 2021 14:20:10 +0000

Hi, I am building a dashboard with reactjs. I have nested menu in the admin sidebar which is controlled by toggle on parent item. Whenever i click on any of the nested item the toggle items menu get closed. Screenshot attached for the same.

Anyone, please suggest some solution.

I am using react router for navigation.

Gatsby build cron issue..!!

Gurupal Singh — Tue, 03 Aug 2021 06:04:46 +0000

Hi, I am trying to Build static pages for gatsby from a bash script. Bash script is working fine but whenever i try to run it via crontab it throw error for node and npm.

Node version i am using is v10.13.0 and npm version is v6.4.1.

But somehow cron log gives me error which shows my node version v8.10.0 and npm version v3.5.2. Screenshot attached for the same.

Even i do not have node v8 installed on my server. Both on root and ubuntu user.

Why it is taking node version 8 for cronjob?

Multiple Network Calls on read, write apollo cache

Gurupal Singh — Tue, 18 May 2021 06:11:59 +0000

Hi, This is the ecommerce project that i am working on. I am using Nextjs framework with Apollo client 3. While doing add to cart mutation i am using read and write Apollo cache function to update the total items in the cart, but some how it is still hitting database when writing to cache. I can see 2 network calls that is -

For AddToCart mutation which is perfectly fine.
For Cart Query (which is i think wrong), as i could have directly use refetchQuery function to do the same.

import { useQuery, useMutation } from "@apollo/client";
import cookie from "react-cookies";

import {
  ALLCATEGORIES,
  SUBCATEGORIES,
  CART_QUERY,
  SESSIONID,
} from "apollo/queries";

import { CART_MUTATION } from "apollo/mutations";

var sessionid = cookie.load("sessionid");
var token = localStorage.getItem('auth');

export const useGetCategories = () => useQuery(ALLCATEGORIES);
export const useGetSessionId = () => useQuery(SESSIONID);
export const useCart = (options) => useQuery(CART_QUERY, options);
export const useProductListing = (options) => useQuery(SUBCATEGORIES, options);

export const useAddToCart = () =>
  useMutation(CART_MUTATION, {
    update(cache, { data: { addToCart } }) {
      try {
        const data = cache.readQuery({
          query: CART_QUERY,
          variables: {
            sessionId: sessionid,
            token: token,
          },
        });
        cache.writeQuery({
          query: CART_QUERY,
          variables: {
            sessionId: sessionid,
            token: token,
          },
          data: {
            cart: [data.cart, addToCart],
          },
        });
      } catch (error) {
        console.log("error", error);
      }
    },
  });

import styled from "styled-components";
import Rup from "../../icons/rupee.svg";
import ProductImage from "public/product.png";
import { fontWeight, flexbox, fontSize } from "@/styles/global-styles";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { useAddToCart } from "apollo/actions";
import cookie from "react-cookies";
import Loading from "@/components/loader";

const Products = ({ products }) => {
  var sessionid = cookie.load("sessionid");
  const [addToCart, { loading }] = useAddToCart();

  const handleAddToCart = async (uuid) => {
    await addToCart({
      variables: {
        sessionId: sessionid,
        product: uuid,
        quantity: 1,
        monogram: "",
        monogramType: "",
      },
    });
  };

  if (loading) return <Loading />;

  return (
    <>
      <ProductContainer>
        {products.map((product, index) => {
          return (
            <ProductCard key={index}>
              <Badge>Our Bestseller</Badge>
              <ProductThumb>
                <LazyLoadImage src={ProductImage} height={436} effect="blur" />
              </ProductThumb>
              <ProductDetails>
                <ProductName>{product.name}</ProductName>
                <Subtitle>{product.subtitle}</Subtitle>
                <PriceContainer>
                  <Price>
                    <Rup />
                    <span>{product.specialPrice}</span>
                    {product.specialPrice != product.price ? (
                      <CrossPrice>{product.price}</CrossPrice>
                    ) : (
                      <></>
                    )}
                  </Price>
                  <Button onClick={() => handleAddToCart(product.uuid)}>
                    add to cart
                  </Button>
                </PriceContainer>
              </ProductDetails>
            </ProductCard>
          );
        })}
      </ProductContainer>
    </>
  );
};

export default Products;

Is there something wrong i am doing ? Need help please

browser back button takes to bottom of the page instead of previous location

Gurupal Singh — Wed, 10 Mar 2021 09:33:05 +0000

I have one product listing page with infinite scroll pagination. Whenever i click on any of the product and goto product detail page and then press browser back button, it will takes me to bottom of the page instead of where i was. What should i do to retain by old state ?

gatsby version 2.19.18

Animation stop working on conditional rendering ..!!

Gurupal Singh — Sat, 30 Jan 2021 12:58:16 +0000

const Products = ({
  product: { name, displayImage, subtitle, price, uuid, slug },
}) => {
  const [show, setShow] = useState(false);

  const clickVariants = {
    opened: {
      top: "50vh",
    },
    closed: {
      top: "0vh",
    },
  };

  return (
    <>
      <div className="products">
      <motion.button onClick={() => setShow((state) => !state)}>
                Buy
                </motion.button>
              </div>
      {show && (
        <>
          <div
            onClick={() => setShow((state) => !state)}
            className="backdrop"
          ></div>
          <motion.div
            initial={false}
            animate={show ? "opened" : "closed"}
            variants={clickVariants}
            className="modal__container"
          >
            <h1>{name}</h1>
          </motion.div>
        </>
      )}
    </>
  );
};

export default Products;

Can someone tell me why i am unable to run popup animation while adding condition ? I tried searching it on google but nothing works for me.

`onClick` listener to be a function, instead got a value of `object` type.

Gurupal Singh — Sun, 24 Jan 2021 16:50:28 +0000

Here is i am checking on my cart page if user is null than open login popup otherwise go directly to Checkout page.

 var path;
  if (user !== null) {
    path = "/checkout";
  } else {
    path = "";
  }

Here is the button on cart page.

 <button
   type="button"
   onClick={path === "" ? openModal : <></>}>
   <Link href={path}>Checkout</Link>
 </button>
 <Login showModal={showModal} setShowModal={setShowModal} />

But i am getting warnings on console that onClick listener to be a function, instead got a value of object type. Modal is opening but how can i fix this warning ?

Invalid hook call. Hooks can only be called inside of the body of a function component. ??

Gurupal Singh — Sun, 17 Jan 2021 12:56:05 +0000

store.js

index.js

package.json

import "../styles/style.scss";
import store from "@config/store";
import { Provider } from "react-redux";
import NetworkDetector from "@config/network";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "@config/apolloClient";

function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    <ApolloProvider client={apolloClient}>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </ApolloProvider>
  );
}

export default NetworkDetector(App);

Why i am getting this Invalid hook call in redux dev tools. Am i doing something wrong here ?

List Products Action

Data is undefined - Apollo Client ..!!

Gurupal Singh — Mon, 09 Nov 2020 16:32:20 +0000

I am getting data undefined when I goto to localhost:3000:/someslug/

Is there i am doing something wrong in this ?

`import React from 'react';
import Layout from "@components/layout";
import Loader from "@components/Loader";
import Products from "@components/Products";
import { useQuery } from "@apollo/react-hooks";
import * as Constants from '../config/constants';
import { withApollo } from '../config/withApollo';
import gql from "graphql-tag";
import styles from '../components/Products/products.module.scss';

const CATEGORY_QUERY = gqlquery CategoryQuery($slug: String!) { categoryBySlug(slug: $slug) { url slug productCount } };

const Category = ({ slug }) => {
const { loading, error, data } = useQuery(CATEGORY_QUERY, {
variables: { slug },
});

console.log(data);

if (error) return

Error

;
if (loading) return ;
return (

{/* {data.allProducts.length
? data.allProducts.map(product => )
: ""
} */}

);
}

export default withApollo({ ssr: true })(Category);`

How to Serve Nodejs Application from sub directory with PHP Application on root?

Gurupal Singh — Fri, 23 Oct 2020 21:18:33 +0000

I have php running in root directory and wants to run a microservice built with nodejs in subdirectory. I did some configurations but the css/js/images are showing 404 not found. Below the nginx configuration.

server {
listen 80 default_server;
listen [::]:80 default_server;

    server_name    www.test.com;
return         301 https://$server_name$request_uri;

    root /var/www/html/app/webroot;

    index index.php index.html index.htm index.nginx-debian.html;


    location / {
    try_files $uri $uri/ /index.php?$args;
    }
location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_param SCRIPT_FILENAME $request_filename;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
        }

}

server {

listen  443 ssl http2;
    listen  [::]:443 ssl http2;
ssl_certificate /etc/nginx/ssl/test_chain.crt;
    ssl_certificate_key /etc/nginx/ssl/www.test.com.key;

root /var/www/html/app/webroot;

    # Add index.php to the list if you are using PHP
    index index.php index.html;

    include snippets/phpmyadmin.conf;

    server_name www.test.com;



# . files
location ~ /\.(?!well-known) {
        deny all;
}

    location / {

try_files $uri $uri/ /index.php?$args;
            }

location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_param SCRIPT_FILENAME $request_filename;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    fastcgi_buffers               8 16k;
    fastcgi_buffer_size           32k;
        }

    #NODEJS SERVER BLOCK
location /public {
       root /var/www/html/newcars/public/;
    }

    location /newcars {
     rewrite ^/newcars/(.*)$ /$1 break;
 proxy_pass http://127.0.0.1:3000;

}
 #END of NODEJS SERVER BLOCK

}

location ^~ /estore {
        root /var/www/html;
        index index.php index.html index.htm;
        try_files $uri $uri/ @opencart;
location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
        fastcgi_intercept_errors on;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_buffers               8 16k;
    fastcgi_buffer_size           32k;
        fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
}

    location ~* (\.(tpl|ini))$
        { deny all; }
}

location @opencart {
    rewrite ^/(.+)$ /estore/index.php?_route_=$1 last;
}

location = /estore/sitemap.xml {
    rewrite ^(.*)$ /estore/index.php?route=extension/feed/google_sitemap break;
}

location = /estore/googlebase.xml {
rewrite ^(.*)$ /estore/index.php?route=extension/feed/google_base break;
}

location /estore/system {
rewrite ^/estore/system/download/(.*) /estore/index.php?route=error/not_found break;
}

location /estore/video {
rewrite ^/estore/video/courses/(.*) /estore/index.php?route=video/courses break;
}

location /estore/courses {
rewrite ^/estore/courses-lists(.*) /estore/index.php?route=course/courseslist break;
}

# favicon.ico
    location = /favicon.ico {
            log_not_found off;
            access_log    off;
    }

    # robots.txt
    location = /robots.txt {
            log_not_found off;
            access_log    off;
    }

    # assets, media
    location ~* \.(?:css(\.map)?|js(\.map)?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {
            expires    7d;
            access_log off;
    }

    # svg, fonts
    location ~* \.(?:svgz?|ttf|ttc|otf|eot|woff2?)$ {
            add_header Access-Control-Allow-Origin "*";
            expires    7d;
            access_log off;
    }

}