Forem: San

Run the script in the background using npm forever cmd

San — Fri, 22 Dec 2023 11:24:42 +0000

Installing forever

npm i -g forever

Running a script with forever

forever start app.js

After you start the script, you can list all the running processes.

forever list

Some other useful forever commands:

forever start: starts a script as a daemon
forever stop: stops the daemon script by Id|Uid|Pid|Index|Script
forever stopall: stops all running scripts
forever restart: restarts the daemon script
forever restartall: restarts all running forever scripts
forever cleanlogs: deletes all historical forever log files
forever config: lists all forever user configurations
forever set : defines a forever config value for an unique key
forever clear : clears the specified forever config by its key

Run your customize script

Navigate your file:eg /var/www/frontend
Where package.json is available

forever start -c "npm run dev" ./

Utility CMD for linux

San — Fri, 15 Dec 2023 10:30:04 +0000

Display a list of ports in use:

sudo lsof -nP -iTCP -sTCP:LISTEN

Check a specific port number with this syntax:

sudo lsof -nP -i:[port-number]
For example, to check if port 5054 is in use, type:
sudo lsof -nP -i:5054

Check Ports via netstat Command

sudo netstat -tunpl

-t - Queries the command for TCP ports.
-u - Queries for UDP ports.
-n - Avoids DNS lookup and shows only IP addresses to speed up the process.
-p - Displays the process ID and the name of the program using the port.
-l - Outputs listening ports.

Give Permission

root@ip-192-168-4-59:/var/www# chmod -R 777 www

root@ip-192-168-4-59:/var/www# chown -R 777 www

For example, to copy a folder named source_folder to a destination directory named destination_folder, you can use the following command:

cp -r source_folder /path/to/destination_folder/

cp -r source_folder /path/to/destination_folder/
cp -r ./var/www/pharmacy_/v18/pharmacy /var/www

Verify the Copied Folder

ls /path/to/destination_folder/

How to give permission to any folder/file Linux ubuntu

San — Thu, 14 Dec 2023 17:16:45 +0000

 Go to a terminal and type:

sudo mkdir /var/myfolder
sudo chmod a+rwx /var/myfolder

Explain:

*Where * **myfolder **is the name of the directory.

a means "all" (users)
- means "add the following rights"
and rwx means read, write **and **execute

Create Directory with mkdir:


sudo mkdir /var/DirectoryName
To give all permissions to a folder give chmod -R 777:

sudo chmod -R 777 /var/DirectoryName

You can upload any zip file to your server using any FTP or SFTP and need to install unzip.

San — Thu, 14 Dec 2023 09:28:34 +0000

You can upload any zip file to your server using any FTP or SFTP
and need to install unzip.

You need to install the unzip package.

sudo apt-get install unzip

You may request an admin password and need to grant the Ubuntu package manager, called apt, to occupy additional disk space with programs. Enter the password and answer 'yes' when needed. After all the packets have been installed, type in a terminal:

unzip archive.zip

If you want to extract the zip file to another folder, you will need to use the -d key followed by the directory path. Type:

unzip file.zip -d destination_folder

for example:

unzip mysite.zip -d /var/www

will extract the contents of the archive mysite.zip to the folder /var/www. The directory path can be full or relative.

Here:
After coming to the directory where your zip file is uploaded path.
In: /var/www/project "Folder" code.zip is present
Then run cmd:

**/var/www/project#**:- unzip code.zip -d /var/www/project

Make zip file

npm install zip -g

zip -r newtest.zip /var/www/forntend/

router next js

San — Thu, 14 Dec 2023 09:25:27 +0000

import { ArrowUpRight } from "lucide-react";
import React from "react";

import { getOrderByIdAPI } from "@/utils";
import MyOrderCard from "./components/MyOrderCard";

export default async function MyOrderPage() {
  const uid = "6525c166fb721037a5de1164";
  const { data } = await getOrderByIdAPI(uid);
  return (
    <>
      <div className="py-14 px-4 md:px-6 2xl:px-20 2xl:container 2xl:mx-auto">
        {data?.map((myOrder: any) => (
          <MyOrderCard key={myOrder?._id} myOrder={myOrder} />
        ))}
      </div>
    </>
  );
}

"use client";
import { ArrowUpRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import React from "react";

export interface MyOrdersPropsI {
  _id: string;
  uid: string;
  pid: string;
  qty: number;
  status: string;
  orderDate: string;
  shiftedDate: string;
  deliveredDate: string;
  paymentType: string;
  paymentStatus: boolean;
  address: string;
  name: string;
  mobile: string;
  __v: number;
  createdAt: Date;
  updatedAt: Date;
}

type MyOrdersPropsT = {
  myOrder: MyOrdersPropsI;
};

const MyOrderCard = ({ myOrder }: MyOrdersPropsT) => {
  // console.log("myOrders=>", myOrder);

  return (
    <>
      <Link href="/user/orders">
        <div className="flex max-w-2xl flex-col mb-2  items-center rounded-md border md:flex-row">
          {/* <div className="h-full w-full md:h-[200px] md:w-[300px]">
          <Image
            width={100}
            height={100}
            src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGJsb2d8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60"
            alt="Laptop"
            className="h-full w-full rounded-md object-cover"
          />
        </div> */}
          <div>
            <div className="p-4">
              <h1 className="inline-flex items-center text-lg font-semibold">
                Order id: {myOrder?.orderDate}{" "}
                <ArrowUpRight color="blue" className="ml-2 h-4 w-4" />
              </h1>
              <p className="mt-3 text-sm text-gray-600">
                Order date: {myOrder.orderDate}
              </p>
              <div className="mt-4">
                <span className="mb-2 mr-2 inline-block rounded-full bg-gray-100 px-3 py-1 text-[12px] font-semibold text-gray-900">
                  Payment Type: {myOrder.paymentType}
                </span>
                <span className="mb-2 mr-2 inline-block rounded-full bg-green-100 px-3 py-1 text-[12px] font-semibold text-gray-900">
                  Payment Status: {myOrder.paymentStatus && "Success"}
                </span>
              </div>
              <div className="mt-3 flex items-center space-x-2">
                {/* <img
                className="inline-block h-8 w-8 rounded-full"
                src="https://overreacted.io/static/profile-pic-c715447ce38098828758e525a1128b87.jpg"
                alt="Dan_Abromov"
              /> */}
                <span className="flex flex-col">
                  <span className="text-[12px] font-medium text-gray-900">
                    Order Status
                  </span>
                  <span className="bg-green-200 rounded-full p-[4px] text-center text-[10px] font-extrabold text-gray-800">
                    {myOrder?.status}
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </Link>
    </>
  );
};

export default MyOrderCard;

How to pass data in server-side component to client-side

San — Tue, 07 Nov 2023 17:40:02 +0000

"use client";
import React from "react";
import DeliveryInfoCard from "./delivery-info";

const MyOrders = ({ myorder }: any) => {
  console.log("component=>", myorder);

  return (
    <>
      <div className="py-14 px-4 md:px-6 2xl:px-20 2xl:container 2xl:mx-auto">
        <div className="flex justify-start item-start space-y-2 flex-col">
          <h1 className="text-3xl dark:text-white lg:text-4xl font-semibold leading-7 lg:leading-9 text-gray-800">
            Order #13432
          </h1>
          <p className="text-base dark:text-gray-300 font-medium leading-6 text-gray-600">
            21st Mart 2021 at 10:34 PM
          </p>
        </div>
        <div className="mt-10 flex flex-col xl:flex-row jusitfy-center items-stretch w-full xl:space-x-8 space-y-4 md:space-y-6 xl:space-y-0">
          <div className="flex flex-col justify-start items-start w-full space-y-4 md:space-y-6 xl:space-y-8">
            <div className="flex flex-col justify-start items-start dark:bg-gray-800 bg-gray-50 px-4 py-4 md:py-6 md:p-6 xl:p-8 w-full">
              <p className="text-lg md:text-xl dark:text-white font-semibold leading-6 xl:leading-5 text-gray-800">
                My Orders
              </p>
              <div className="mt-4 md:mt-6 flex flex-col md:flex-row justify-start items-start md:items-center md:space-x-6 xl:space-x-8 w-full">
                <div className="pb-4 md:pb-8 w-full md:w-40">
                  <img
                    className="w-full hidden md:block"
                    src="/images/sanv.jpg"
                    alt="dress"
                  />
                  <img
                    className="w-full md:hidden"
                    src="/images/sanv.jpg"
                    alt="dress"
                  />
                </div>
                <div className="border-b border-gray-200 md:flex-row flex-col flex justify-between items-start w-full pb-8 space-y-4 md:space-y-0">
                  <div className="w-full flex flex-col justify-start items-start space-y-8">
                    <h3 className="text-xl dark:text-white xl:text-2xl font-semibold leading-6 text-gray-800">
                      Premium Quaility Dress
                    </h3>
                    <div className="flex justify-start items-start flex-col space-y-2">
                      <p className="text-sm dark:text-white leading-none text-gray-800">
                        <span className="dark:text-gray-400 text-gray-300">
                          Style:{" "}
                        </span>{" "}
                        Italic Minimal Design
                      </p>
                      <p className="text-sm dark:text-white leading-none text-gray-800">
                        <span className="dark:text-gray-400 text-gray-300">
                          Size:{" "}
                        </span>{" "}
                        Small
                      </p>
                      <p className="text-sm dark:text-white leading-none text-gray-800">
                        <span className="dark:text-gray-400 text-gray-300">
                          Color:{" "}
                        </span>{" "}
                        Light Blue
                      </p>
                    </div>
                  </div>
                  <div className="flex justify-between space-x-8 items-start w-full">
                    <p className="text-base dark:text-white xl:text-lg leading-6">
                      $36.00{" "}
                      <span className="text-red-300 line-through"> $45.00</span>
                    </p>
                    <p className="text-base dark:text-white xl:text-lg leading-6 text-gray-800">
                      01
                    </p>
                    <p className="text-base dark:text-white xl:text-lg font-semibold leading-6 text-gray-800">
                      $36.00
                    </p>
                  </div>
                </div>
              </div>
              <div className="mt-6 md:mt-0 flex justify-start flex-col md:flex-row items-start md:items-center space-y-4 md:space-x-6 xl:space-x-8 w-full">
                <div className="w-full md:w-40">
                  <img
                    className="w-full hidden md:block"
                    src="/images/1.jpg"
                    width={100}
                    height={100}
                    alt="dress"
                  />
                  <img
                    className="w-full md:hidden"
                    src="/images/1.jpg"
                    alt="dress"
                  />
                </div>
                <div className="flex justify-between items-start w-full flex-col md:flex-row space-y-4 md:space-y-0">
                  <div className="w-full flex flex-col justify-start items-start space-y-8">
                    <h3 className="text-xl dark:text-white xl:text-2xl font-semibold leading-6 text-gray-800">
                      High Quaility Italic Dress
                    </h3>
                    <div className="flex justify-start items-start flex-col space-y-2">
                      <p className="text-sm dark:text-white leading-none text-gray-800">
                        <span className="dark:text-gray-400 text-gray-300">
                          Style:{" "}
                        </span>{" "}
                        Italic Minimal Design
                      </p>
                      <p className="text-sm dark:text-white leading-none text-gray-800">
                        <span className="dark:text-gray-400 text-gray-300">
                          Size:{" "}
                        </span>{" "}
                        Small
                      </p>
                      <p className="text-sm dark:text-white leading-none text-gray-800">
                        <span className="dark:text-gray-400 text-gray-300">
                          Color:{" "}
                        </span>{" "}
                        Light Blue
                      </p>
                    </div>
                  </div>
                  <div className="flex justify-between space-x-8 items-start w-full">
                    <p className="text-base dark:text-white xl:text-lg leading-6">
                      $20.00{" "}
                      <span className="text-red-300 line-through"> $30.00</span>
                    </p>
                    <p className="text-base dark:text-white xl:text-lg leading-6 text-gray-800">
                      01
                    </p>
                    <p className="text-base dark:text-white xl:text-lg font-semibold leading-6 text-gray-800">
                      $20.00
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex justify-center flex-col md:flex-row flex-col items-stretch w-full space-y-4 md:space-y-0 md:space-x-6 xl:space-x-8">
              <div className="flex flex-col px-4 py-6 md:p-6 xl:p-8 w-full bg-gray-50 dark:bg-gray-800 space-y-6">
                <h3 className="text-xl dark:text-white font-semibold leading-5 text-gray-800">
                  Summary
                </h3>
                <div className="flex justify-center items-center w-full space-y-4 flex-col border-gray-200 border-b pb-4">
                  <div className="flex justify-between w-full">
                    <p className="text-base dark:text-white leading-4 text-gray-800">
                      Subtotal
                    </p>
                    <p className="text-base dark:text-gray-300 leading-4 text-gray-600">
                      $56.00
                    </p>
                  </div>
                  <div className="flex justify-between items-center w-full">
                    <p className="text-base dark:text-white leading-4 text-gray-800">
                      Discount{" "}
                      <span className="bg-gray-200 p-1 text-xs font-medium dark:bg-white dark:text-gray-800 leading-3 text-gray-800">
                        STUDENT
                      </span>
                    </p>
                    <p className="text-base dark:text-gray-300 leading-4 text-gray-600">
                      -$28.00 (50%)
                    </p>
                  </div>
                  <div className="flex justify-between items-center w-full">
                    <p className="text-base dark:text-white leading-4 text-gray-800">
                      Shipping
                    </p>
                    <p className="text-base dark:text-gray-300 leading-4 text-gray-600">
                      $8.00
                    </p>
                  </div>
                </div>
                <div className="flex justify-between items-center w-full">
                  <p className="text-base dark:text-white font-semibold leading-4 text-gray-800">
                    Total
                  </p>
                  <p className="text-base dark:text-gray-300 font-semibold leading-4 text-gray-600">
                    $36.00
                  </p>
                </div>
              </div>
              {/* <div className="flex flex-col justify-center px-4 py-6 md:p-6 xl:p-8 w-full bg-gray-50 dark:bg-gray-800 space-y-6">
                <h3 className="text-xl dark:text-white font-semibold leading-5 text-gray-800">
                  Shipping
                </h3>
                <div className="flex justify-between items-start w-full">
                  <div className="flex justify-center items-center space-x-4">
                    <div className="w-8 h-8">
                      <img
                        className="w-full h-full"
                        alt="logo"
                        src="https://i.ibb.co/L8KSdNQ/image-3.png"
                      />
                    </div>
                    <div className="flex flex-col justify-start items-center">
                      <p className="text-lg leading-6 dark:text-white font-semibold text-gray-800">
                        DPD Delivery
                        <br />
                        <span className="font-normal">
                          Delivery with 24 Hours
                        </span>
                      </p>
                    </div>
                  </div>
                  <p className="text-lg font-semibold leading-6 dark:text-white text-gray-800">
                    $8.00
                  </p>
                </div>
                <div className="w-full flex justify-center items-center">
                  <button className="hover:bg-black dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 py-5 w-96 md:w-full bg-gray-800 text-base font-medium leading-4 text-white">
                    View Carrier Details
                  </button>
                </div>
              </div> */}
            </div>
            <DeliveryInfoCard />
          </div>
          <div className="bg-gray-50 dark:bg-gray-800 w-full xl:w-96 flex justify-between items-center md:items-start px-4 py-6 md:p-6 xl:p-8 flex-col">
            <h3 className="text-xl dark:text-white font-semibold leading-5 text-gray-800">
              Shipping Details
            </h3>
            <div className="flex flex-col md:flex-row xl:flex-col justify-start items-stretch h-full w-full md:space-x-6 lg:space-x-8 xl:space-x-0">
              <div className="flex flex-col justify-start items-start flex-shrink-0">
                <div className="flex justify-center w-full md:justify-start items-center space-x-4 py-8 border-b border-gray-200">
                  {/* <img
                    src="https://i.ibb.co/5TSg7f6/Rectangle-18.png"
                    alt="avatar"
                  /> */}
                  <div className="flex justify-start items-start flex-col space-y-2">
                    <p className="text-base dark:text-white font-semibold leading-4 text-left text-gray-800">
                      David Kent
                    </p>
                    <p className="text-sm dark:text-gray-300 leading-5 text-gray-600">
                      10 Previous Orders
                    </p>
                  </div>
                </div>
                <div className="flex justify-center text-gray-800 dark:text-white md:justify-start items-center space-x-4 py-4 border-b border-gray-200 w-full">
                  <svg
                    width={24}
                    height={24}
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M3 7L12 13L21 7"
                      stroke="currentColor"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <p className="cursor-pointer text-sm leading-5 ">
                    david89@gmail.com
                  </p>
                </div>
              </div>
              <div className="flex justify-between xl:h-full items-stretch w-full flex-col mt-6 md:mt-0">
                <div className="flex justify-center md:justify-start xl:flex-col flex-col md:space-x-6 lg:space-x-8 xl:space-x-0 space-y-4 xl:space-y-12 md:space-y-0 md:flex-row items-center md:items-start">
                  <div className="flex justify-center md:justify-start items-center md:items-start flex-col space-y-4 xl:mt-8">
                    <p className="text-base dark:text-white font-semibold leading-4 text-center md:text-left text-gray-800">
                      Shipping Address
                    </p>
                    <p className="w-48 lg:w-full dark:text-gray-300 xl:w-48 text-center md:text-left text-sm leading-5 text-gray-600">
                      180 North King Street, Northhampton MA 1060
                    </p>
                  </div>
                  <div className="flex justify-center md:justify-start items-center md:items-start flex-col space-y-4">
                    <p className="text-base dark:text-white font-semibold leading-4 text-center md:text-left text-gray-800">
                      Billing Address
                    </p>
                    <p className="w-48 lg:w-full dark:text-gray-300 xl:w-48 text-center md:text-left text-sm leading-5 text-gray-600">
                      180 North King Street, Northhampton MA 1060
                    </p>
                  </div>
                </div>
                {/* <div className="flex w-full justify-center items-center md:justify-start md:items-start">
                  <button className="mt-6 md:mt-0 dark:border-white dark:hover:bg-gray-900 dark:bg-transparent dark:text-white py-5 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 border border-gray-800 font-medium w-96 2xl:w-full text-base font-medium leading-4 text-gray-800">
                    Edit Details
                  </button>
                </div> */}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default MyOrders;

Dinfo

import React from "react";

const DeliveryInfoCard = () => {
  return (
    <>
      <ol className="flex items-center w-full">
        <li className="flex w-full items-center text-blue-600 dark:text-blue-500 after:content-[''] after:w-full after:h-1 after:border-b after:border-blue-100 after:border-4 after:inline-block dark:after:border-blue-800">
          <span className="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full lg:h-12 lg:w-12 dark:bg-blue-800 shrink-0">
            <svg
              className="w-3.5 h-3.5 text-blue-600 lg:w-4 lg:h-4 dark:text-blue-300"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 16 12"
            >
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M1 5.917 5.724 10.5 15 1.5"
              />
            </svg>
          </span>
        </li>
        <li className="flex w-full items-center after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-100 after:border-4 after:inline-block dark:after:border-gray-700">
          <span className="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-full lg:h-12 lg:w-12 dark:bg-gray-700 shrink-0">
            <svg
              className="w-4 h-4 text-gray-500 lg:w-5 lg:h-5 dark:text-gray-100"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 20 16"
            >
              <path d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3.014 13.021l.157-.625A3.427 3.427 0 0 1 6.5 9.571a3.426 3.426 0 0 1 3.322 2.805l.159.622-6.967.023ZM16 12h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Z" />
            </svg>
          </span>
        </li>
        <li className="flex items-center w-full">
          <span className="flex items-center justify-center w-10 h-10 bg-gray-100 rounded-full lg:h-12 lg:w-12 dark:bg-gray-700 shrink-0">
            <svg
              className="w-4 h-4 text-gray-500 lg:w-5 lg:h-5 dark:text-gray-100"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 18 20"
            >
              <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2ZM7 2h4v3H7V2Zm5.7 8.289-3.975 3.857a1 1 0 0 1-1.393 0L5.3 12.182a1.002 1.002 0 1 1 1.4-1.436l1.328 1.289 3.28-3.181a1 1 0 1 1 1.392 1.435Z" />
            </svg>
          </span>
        </li>
      </ol>
    </>
  );
};

export default DeliveryInfoCard;

Server component

import MyOrders from "@/components/myorder";
import { getOrderByIdAPI } from "@/utils";

export default async function MyOrdersPage() {
  const uid = "6525c166fb721037a5de1164";
  const { data } = await getOrderByIdAPI(uid);

  return (
    <>
      <MyOrders myorder={data} />
    </>
  );
}

API Call

export async function getOrderByIdAPI(uid: string) {
  try {
    const res = await axios.get(`${apiUrl}/order/${uid}`);
    const data = await res.data;
    console.log('api data=>', data);
    return data

  } catch (err) {
    console.log('err=>', err);

  }
};

URL Params value change on select using next js 13

San — Mon, 06 Nov 2023 18:36:59 +0000

"use client";
import { searchFilterProductAPI } from "@/utils";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";

// const checkList = ["Apple", "Banana", "Tea", "Coffee"];
const checkList = ["All", "Michael Kors", "Tommy Hilfiger", "Emporio Armani"];

interface MyFilterProps {
  brands: any;
}

const MyFilter = ({ brands }: MyFilterProps) => {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const [checkedItems, setCheckedItems] = useState<any>([]);
  const [catsItems, setCatsItems] = useState<any>([]);
  const [selectedPrice, setSelectedPrice] = useState("");
  const [searchTerm, setSearchTerm] = useState<any>("watch");

  function handleBrandChage(e: any) {
    const { value, checked } = e.target;
    let isSelected = checked;
    if (isSelected) {
      setCheckedItems([...checkedItems, value]);
    } else {
      setCheckedItems((preItems: any) => {
        return preItems?.filter((val: any) => {
          return val !== value;
        });
      });
    }
  }

  function handleCatsChage(e: any) {
    const { value, checked } = e.target;
    const selectedVal = value;
    let isSelected = checked;
    if (isSelected) {
      setCatsItems([...catsItems, selectedVal]);
    } else {
      setCatsItems((preItems: any) => {
        return preItems?.filter((val: any) => {
          return val !== selectedVal;
        });
      });
    }
  }

  // handle price select
  const handlePriceSelect = (e: any) => {
    const { value } = e.target;
    setSelectedPrice(value);
  };

  const params = new URLSearchParams(searchParams);
  // const searchTerm = "watch";
  useEffect(() => {
    if (searchTerm) {
      params.set("q", searchTerm);
    } else {
      params.delete("q");
    }
    if (!checkedItems || !catsItems) {
      params.set("", "");
      return;
    }
    if (checkedItems) {
      params.set("brand", checkedItems);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("brand", "");
    }
  }, [checkedItems]);

  console.log("checkedItems=>", { checkedItems, catsItems });

  useEffect(() => {
    if (catsItems) {
      params.set("category", catsItems);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("category", "");
    }
    if (selectedPrice) {
      params.set("price", selectedPrice);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("price", "");
    }
  }, [catsItems, selectedPrice]);

  // useEffect(() => {
  //   if (selectedPrice) {
  //     params.set("price", selectedPrice);
  //     router.push(`${pathname}?${params}`);
  //   } else {
  //     params.delete("price", "");
  //   }
  // }, [selectedPrice]);

  // API call for search and filter
  const category = catsItems.toString();
  const brand = checkedItems.toString();
  useEffect(() => {
    const q: any = "watch";
    const searchFilterProduct = async () => {
      await searchFilterProductAPI(searchTerm, category, brand, selectedPrice);
    };
    if (searchTerm) {
      searchFilterProduct();
    }
  }, [searchTerm, checkedItems, catsItems, selectedPrice]);

  const clearAllFilter = async () => {
    // setSearchTerm("");
    setSelectedPrice("");
    setCheckedItems("");
    setCatsItems("");
    await searchFilterProductAPI(searchTerm, category, brand, selectedPrice);
    router.push(`${pathname}?q=${searchTerm}`);
    router.refresh();
  };

  // console.log("selectedPrice==>", selectedPrice);

  return (
    <>
      <button onClick={clearAllFilter}>Clear Filter</button>
      <h1>Brand Filter</h1>
      {checkList &&
        checkList?.map((b: any, i: number) => (
          <>
            <input
              key={b}
              type="checkbox"
              checked={checkedItems?.includes(b)}
              value={b}
              onChange={handleBrandChage}
              name="brand-checkbox"
            />
            <label> {b}</label>
            <br />
          </>
        ))}
      <div className="result">
        Above checkbox is {checkedItems && checkedItems.join(", ")}.
      </div>

      <h1>category Filter</h1>
      {brands &&
        brands?.map((b: any) => (
          <>
            <input
              key={b.id}
              type="checkbox"
              checked={catsItems?.includes(b.brand)}
              value={b.brand}
              onChange={handleCatsChage}
              name="brand-checkbox"
            />
            <label> {b.brand}</label>
            <br />
          </>
        ))}
      <div className="result">
        Above checkbox is {catsItems && catsItems.join(", ")}.
      </div>

      {/* Price set */}
      <label
        htmlFor="price"
        className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
      >
        Select price range
      </label>
      <select
        defaultValue="nan"
        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        onChange={handlePriceSelect}
      >
        <option defaultValue={selectedPrice}>
          {selectedPrice === "" && "Choose a country"}
        </option>
        <option value="500">Above 500</option>
        <option value="2000">Above 2000</option>
        <option value="5000">Above 5000</option>
        <option value="10000">Above 10000</option>
        <option value="20000">Above 20000</option>
        <option value="30000">Above 30000</option>
        <option value="40000">Above 40000</option>
        <option value="50000">Above 50000</option>
      </select>
    </>
  );
};

export default MyFilter;

2. server-side search and filter

export async function searchFilterProductAPI(q: string, category: string, brand: string, price: string) {
  console.log('searchFilterProductAPI', { q, category, brand, price });
  // http://103.174.102.250:3000/api/filter?q=watch&category=Women's Watch&brand=Tommy Hilfiger&price
  try {
    const res = await axios.get(`${apiUrl}/filter?q=${q}&category=${category}&brand=${brand}&price=${price}`);
    const data = await res.data
    console.log('result api=?', data);
    return data;

  } catch (err) {
    console.log('err occured==>', err);
  }
};

How to use useSearchParams hooks in next js 13

San — Fri, 03 Nov 2023 18:29:28 +0000

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";

const checkList = ["Apple", "Banana", "Tea", "Coffee"];

interface MyFilterProps {
  brands: any;
}
const MyFilter = ({ brands }: MyFilterProps) => {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const [checkedItems, setCheckedItems] = useState<any>([]);
  const [catsItems, setCatsItems] = useState<any>([]);

  function handleBrandChage(e: any) {
    const { value, checked } = e.target;
    let isSelected = checked;
    if (isSelected) {
      setCheckedItems([...checkedItems, value]);
    } else {
      setCheckedItems((preItems: any) => {
        return preItems?.filter((val: any) => {
          return val !== value;
        });
      });
    }
  }

  function handleCatsChage(e: any) {
    const { value, checked } = e.target;
    const val = parseInt(value);

    let isSelected = checked;
    if (isSelected) {
      setCatsItems([...catsItems, val]);
    } else {
      setCatsItems((preItems: any) => {
        return preItems?.filter((val: any) => {
          return val !== val;
        });
      });
    }
  }

  const params = new URLSearchParams(searchParams);
  useEffect(() => {
    if (!checkedItems || !catsItems) {
      params.set("", "");
      return;
    }
    if (checkedItems) {
      params.set("brand", checkedItems);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("brand", "");
    }
  }, [checkedItems]);

  console.log("checkedItems=>", { checkedItems, catsItems });

  useEffect(() => {
    if (catsItems) {
      params.set("cats", catsItems);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("cats", "");
    }
  }, [catsItems]);

  return (
    <>
      <h1>Brand Filter</h1>
      {checkList &&
        checkList?.map((b: any, i: number) => (
          <>
            <input
              key={b}
              type="checkbox"
              checked={checkedItems?.includes(b)}
              value={b}
              onChange={handleBrandChage}
              name="brand-checkbox"
            />
            <label>{b}</label>
            <br />
          </>
        ))}
      <div className="result">
        Above checkbox is {checkedItems && checkedItems.join(", ")}.
      </div>

      <h1>Cats Filter</h1>
      {brands &&
        brands?.map((b: any) => (
          <>
            <input
              key={b.id}
              type="checkbox"
              checked={catsItems?.includes(b.id)}
              value={b.id}
              onChange={handleCatsChage}
              name="brand-checkbox"
            />
            <label>:::::{b.brand}</label>
            <br />
          </>
        ))}
      <div className="result">
        Above checkbox is {catsItems && catsItems.join(", ")}.
      </div>
    </>
  );
};

export default MyFilter;

You can convert the string field to int and then compare. If the db value is in sting

San — Thu, 02 Nov 2023 21:45:40 +0000

You can convert the string field to int and then compare.

If aggregation add a match stage

{"$match" : {"$expr" : {"$gt" : [{"$toInt" :"$diskSizeGb"} , 200]}}}
If find

find({"$expr" : {"$gt" : [{"$toInt" :"$diskSizeGb"} , 200]}})
*$expr allows us to use aggregate operators to query

Zoom image on hover

San — Wed, 01 Nov 2023 12:00:43 +0000

https://codesandbox.io/s/wizardly-grass-2cv76m?file=/src/MyReactImageMagnify.js

import { ArrowUpRight } from "lucide-react";
import React from "react";

import { getOrderByIdAPI } from "@/utils";
import MyOrderCard from "./components/MyOrderCard";

export default async function MyOrderPage() {
  const uid = "6525c166fb721037a5de1164";
  const { data } = await getOrderByIdAPI(uid);
  return (
    <>
      <div className="py-14 px-4 md:px-6 2xl:px-20 2xl:container 2xl:mx-auto">
        {data?.map((myOrder: any) => (
          <MyOrderCard key={myOrder?._id} myOrder={myOrder} />
        ))}
      </div>
    </>
  );
}

"use client";
import { ArrowUpRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import React from "react";

export interface MyOrdersPropsI {
  _id: string;
  uid: string;
  pid: string;
  qty: number;
  status: string;
  orderDate: string;
  shiftedDate: string;
  deliveredDate: string;
  paymentType: string;
  paymentStatus: boolean;
  address: string;
  name: string;
  mobile: string;
  __v: number;
  createdAt: Date;
  updatedAt: Date;
}

type MyOrdersPropsT = {
  myOrder: MyOrdersPropsI;
};

const MyOrderCard = ({ myOrder }: MyOrdersPropsT) => {
  // console.log("myOrders=>", myOrder);

  return (
    <>
      <Link href="/user/orders">
        <div className="flex max-w-2xl flex-col mb-2  items-center rounded-md border md:flex-row">
          {/* <div className="h-full w-full md:h-[200px] md:w-[300px]">
          <Image
            width={100}
            height={100}
            src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGJsb2d8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60"
            alt="Laptop"
            className="h-full w-full rounded-md object-cover"
          />
        </div> */}
          <div>
            <div className="p-4">
              <h1 className="inline-flex items-center text-lg font-semibold">
                Order id: {myOrder?.orderDate}{" "}
                <ArrowUpRight color="blue" className="ml-2 h-4 w-4" />
              </h1>
              <p className="mt-3 text-sm text-gray-600">
                Order date: {myOrder.orderDate}
              </p>
              <div className="mt-4">
                <span className="mb-2 mr-2 inline-block rounded-full bg-gray-100 px-3 py-1 text-[12px] font-semibold text-gray-900">
                  Payment Type: {myOrder.paymentType}
                </span>
                <span className="mb-2 mr-2 inline-block rounded-full bg-green-100 px-3 py-1 text-[12px] font-semibold text-gray-900">
                  Payment Status: {myOrder.paymentStatus && "Success"}
                </span>
              </div>
              <div className="mt-3 flex items-center space-x-2">
                {/* <img
                className="inline-block h-8 w-8 rounded-full"
                src="https://overreacted.io/static/profile-pic-c715447ce38098828758e525a1128b87.jpg"
                alt="Dan_Abromov"
              /> */}
                <span className="flex flex-col">
                  <span className="text-[12px] font-medium text-gray-900">
                    Order Status
                  </span>
                  <span className="bg-green-200 rounded-full p-[4px] text-center text-[10px] font-extrabold text-gray-800">
                    {myOrder?.status}
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </Link>
    </>
  );
};

export default MyOrderCard;

JavaScript

San — Fri, 27 Oct 2023 19:19:45 +0000

1. Join

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = fruits.join();


join() returns an array as a string

Output: 
Banana,Orange,Apple,Mango

const productPrice = 30
const gstRate = 5

const GST = 30 - [30 * 100 / (100 + 5)]
// GST = Supply Value - [Supply Value x {100/(100+GST%)}]

const vv = 30 - (30 * 100 / 105)

let gstPrice = vv
let gstIncludedPrice = productPrice - gstPrice
let finalPriceIncludedGST = productPrice - gstIncludedPrice
const finalProductPriceIncludedGST = gstIncludedPrice + gstPrice


console.log("GST Price=", gstPrice);
console.log("GST Included Price=", gstIncludedPrice);
console.log("Net Price Included GST=", finalProductPriceIncludedGST);

const finalVal = `GST charged of ${gstRate}% Product Price ${productPrice} = ${GST} `

console.log(finalVal);

Remove qouma and put space in string js

San — Fri, 27 Oct 2023 08:32:33 +0000

Remove qouma and put space in string js

const str = 'apple,ball,cat';

const withoutCommas = str.replaceAll(',', ' ');
console.log(withoutCommas); // 👉️ 'apple ball cat'