<file_sep>import React from "react";
import "./buyItem.css";
import NumberFormat from "react-number-format";
import db from "../CONFIG";
import ProductHover from "./ProductHover";

function BuyItem({
  gameIcon,
  name,
  image,
  price,
  quantity,
  id,
  gameName,
  hero,
  quality,
  type,
  rarity,
}) {
  const handleBuyClick = (event) => {
    event.preventDefault();

    const cartItem = db.collection("buy").doc(id);

    cartItem.get().then((doc) => {
      if (doc.data().quantity > 1) {
        cartItem.update({
          quantity: doc.data().quantity - 1,
        });
      } else {
        cartItem.delete();
      }
    });

    const productItem = db.collection("product").doc(id);

    productItem.get().then((doc) => {
      if (doc.exists) {
        productItem.update({
          quantity: doc.data().quantity + 1,
        });
      } else {
        productItem.set({
          gameIcon: gameIcon,
          name: name,
          image: image,
          price: price,
          quantity: 1,
        });
      }
    });
  };

  return (
    <div className="buyItem" onClick={handleBuyClick}>
      <div className="buyItem__image">
        <img src={image} alt="" />
      </div>
      <h4>
        <NumberFormat
          value={price}
          displayType="text"
          thousandSeparator={true}
          thousandsGroupStyle="lakh"
          prefix={"Rs: "}
        />
      </h4>

      <p>x{quantity}</p>
      <div className="buyItem__gameIcon">
        <img src={gameIcon} alt="" />
      </div>
      <ProductHover name={name} rarity={rarity} type={type} hero={hero} />
    </div>
  );
}

export default BuyItem;
<file_sep>import React, { useEffect, useState } from "react";
import "./liveData.css";

//Database import
import db from "../CONFIG";

//Component Import
import RecentPurchase from "./RecentPurchase";

function LiveData() {
  const [liveData, setLiveData] = useState([]);
  useEffect(() => {
    db.collection("liveData")
      .orderBy("time", "desc")
      .onSnapshot((snapshot) =>
        setLiveData(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  }, []);

  return (
    <div className="container">
      <div className="title">Recent Purchases</div>
      <div className="liveData__dataContainer">
        {liveData.map((item) => (
          <RecentPurchase
            id={item.id}
            key={item.id}
            image={item.data.image}
            name={item.data.name}
            RpOrBal={item.data.RpOrBal}
            price={item.data.price}
            rarity={item.data.rarity}
            type={item.data.type}
            time={item.data.time}
            userImg={item.data.userImg}
            source={item.data.source}
          />
        ))}
      </div>
    </div>
  );
}

export default LiveData;
<file_sep>import React from "react";
import { useHistory } from "react-router-dom";

//Material-ui imports
import StoreRoundedIcon from "@material-ui/icons/StoreRounded";
import LocalAtmIcon from "@material-ui/icons/LocalAtm";
import EmailIcon from "@material-ui/icons/Email";
import ContactSupportIcon from "@material-ui/icons/ContactSupport";
import DeckRoundedIcon from "@material-ui/icons/DeckRounded";
import StyleIcon from "@material-ui/icons/Style";

//Css import
import "./headerCenter.css";

function HeaderCenter() {
  const history = useHistory();
  return (
    <div className="header__center">
      <div className="header__option" onClick={() => history.push("/store")}>
        <StoreRoundedIcon />
        <div className="header__optionTitle">Store</div>
      </div>

      <div
        className="header__option"
        onClick={() => history.push("/community")}
      >
        <DeckRoundedIcon />
        <div className="header__optionTitle">Marketplace</div>
      </div>

      <div
        className="header__option"
        onClick={() => history.push("/inventory")}
      >
        <StyleIcon />
        <div className="header__optionTitle">inventory</div>
      </div>

      <div className="header__option" onClick={() => history.push("/sell")}>
        <LocalAtmIcon />
        <div className="header__optionTitle">sell</div>
      </div>

      <div className="header__option">
        <EmailIcon />
        <div className="header__optionTitle">support</div>
      </div>

      <div className="header__option">
        <ContactSupportIcon />
        <div className="header__optionTitle">guide</div>
      </div>
    </div>
  );
}

export default HeaderCenter;
<file_sep>import React from "react";
/* import BuySection from "./BuySection";
import StoreSection from "./StoreSection"; */
import LandingPage from "./LandingPage";
import { useSelector } from "react-redux";
import { selectUser } from "../features/user/userSlice";
import "./storeMarket.css";

function StoreMarket() {
  const user = useSelector(selectUser);

  return (
    <div className="storeMarket">
      {!user ? <LandingPage /> : ""}
      <div
        style={{
          height: "100vh",
          backgroundColor: "#1a1830",
          color: "#69cacb",
          display: "flex",
          alignItems: "center",
          flexDirection: "column",
        }}
      >
        <h1>Welcome</h1>
        <h4>A webpage is still in progress</h4>
        <h4>
          This empty page will be replaced by landing page and some extra stuffs
        </h4>
      </div>
      {/* <div className="storeSection">
        <BuySection />
        <StoreSection />
      </div> */}
    </div>
  );
}

export default StoreMarket;
<file_sep>import React, { useEffect, useState } from "react";
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
import "./buysection.css";
import BuyItem from "../Product/buyItem";
import db from "../CONFIG";
import Bill from "./Bill";

function BuySection() {
  const [cartItem, setCartItem] = useState([]);

  useEffect(() => {
    db.collection("buy").onSnapshot((snapshot) =>
      setCartItem(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      )
    );
  }, []);

  return (
    <div className="storemarket__buySection">
      <div className="storemarket__buyList">
        <div className="buylist__header">
          <ShoppingCartIcon />
          <h4>You Receive</h4>
        </div>
        <div className="buylist__list">
          {cartItem.map((item) => (
            <BuyItem
              id={item.id}
              key={item.id}
              gameIcon={item.data.gameIcon}
              name={item.data.name}
              image={item.data.image}
              price={item.data.price}
              quantity={item.data.quantity}
              hero={item.data.hero}
              gameName={item.data.gameName}
              type={item.data.type}
              quality={item.data.quality}
              rarity={item.data.rarity}
            />
          ))}
        </div>
      </div>

      <Bill cartItem={cartItem} />
    </div>
  );
}

export default BuySection;
<file_sep>import React from "react";

//Css import
import "./community.css";

//Material-Imports
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import PropTypes from "prop-types"; // Other import

//Component import
import MarketItems from "./MarketItems";
import ActiveListing from "./ActiveListing";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box span={2}>
          <Typography component={"span"}>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}

function CommunityMarket() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <div className="community">
      <div className="community__topBar">
        <h1>Community Market</h1>
        <p>
          Buy and sell items with community members for Balance and Reward
          Points.
        </p>
      </div>
      <div className="community__choice">
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
        >
          <Tab label="Market" {...a11yProps(0)} />
          <Tab label="My active Listings" {...a11yProps(1)} />
        </Tabs>
      </div>
      <TabPanel value={value} index={0}>
        <MarketItems />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <ActiveListing />
      </TabPanel>
    </div>
  );
}

export default CommunityMarket;
<file_sep>import React from "react";
import "./dialog.css";
import NumberFormat from "react-number-format";

function DialogFinalConfirm({
  id,
  key,
  gameIcon,
  name,
  image,
  price,
  quantity,
}) {
  return (
    <div className="dialog__box">
      <div className="dialog__product">
        <div className="dialog__productName">{name}</div>
        <div className="dialog__productDetails">
          <div className="dialog__productQuantity">
            <div>Quantity :</div>
            <div>{quantity}</div>
          </div>
          <div className="dialog__productRate">
            <div>Rate :</div>
            <NumberFormat
              value={price}
              displayType="text"
              thousandSeparator={true}
              thousandsGroupStyle="lakh"
            />
          </div>
          <div className="dialog__productAmount">
            <div>Amount :</div>
            <NumberFormat
              value={quantity * price}
              displayType="text"
              thousandSeparator={true}
              thousandsGroupStyle="lakh"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default DialogFinalConfirm;
<file_sep>import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/user/userSlice";
import productReducer from "../features/product/productSlice";
import balanceReducer from "../features/balance/balanceSlice";

export default configureStore({
  reducer: {
    user: userReducer,
    product: productReducer,
    balance: balanceReducer,
  },
});
<file_sep>import React, { useEffect, useState } from "react";

import TransactionDetail from "./TransactionDetail";

import db from "../CONFIG";
import "./transactionHistory.css";

function TransactionHistory() {
  const [transactionData, setTransactionData] = useState([]); //store all transaction history data

  /*--------------Pagination---------------*/
  const [currentPage, setCurrentPage] = useState(1); //Current page
  const itemPerPage = Number(50); //Number of extra item load on each click

  //Get current items:
  const indexOfLastItem = currentPage * itemPerPage; //get index of last item of every page...

  //index of first item of every page...we need first transaction item always...
  const indexOfFirstItem = 0; //If we need middle part of page then 0 will be replaced by indexOfLastItem-itemPerPage...

  const currentPost = transactionData.slice(indexOfFirstItem, indexOfLastItem); //Render only specific part of array

  const totalItem = transactionData.length;
  const totalItemPagination = currentPost.length;

  const handlePagination = (event) => {
    event.preventDefault();
    setCurrentPage(currentPage + 1);
  };

  useEffect(() => {
    db.collection("transaction")
      .orderBy("date", "desc")
      .onSnapshot((snapshot) =>
        setTransactionData(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  }, []);

  return (
    <div className="transaction__body">
      <div className="transaction__header">
        <div className="transaction__headerDate">Date</div>
        <div className="transaction__headerDescription">Description</div>
        <div className="transaction__headerChange">
          <div className="transaction__change">Change</div>
          <div className="transaction__changeRB">
            <div className="transaction__changeRP">RP</div>
            <div className="transaction__changeBalance">Balance</div>
          </div>
        </div>
        <div className="transaction__headerWallet">
          <div className="transaction__wallet">Wallet</div>
          <div className="transaction__walletRB">
            <div className="transaction__walletRP">RP</div>
            <div className="transaction__walletBalance">Balance</div>
          </div>
        </div>
      </div>
      <div className="transaction__history">
        {currentPost.map((item) => (
          <TransactionDetail
            id={item.id}
            key={item.id}
            date={item.data.date}
            message={item.data.message}
            signRP={item.data.signRP}
            costRP={item.data.costRP}
            signBalance={item.data.signBalance}
            costBalance={item.data.costBalance}
            walletRP={item.data.walletRP}
            walletBalance={item.data.walletBalance}
          />
        ))}
        <div className="transaction__pagination">
          {totalItem !== totalItemPagination && (
            <button className="transaction__btn" onClick={handlePagination}>
              Load More Transaction
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export default TransactionHistory;
<file_sep>import React from "react";
import "./storeItem.css";
import styled from "styled-components";

function ProductHover({ name, rarity, type, hero }) {
  return (
    <span className="onHover__giveDetails">
      <HoverTitle>
        <HoverName>{name}</HoverName>
        <HoverType>
          {rarity} {type}
        </HoverType>
      </HoverTitle>
      <HoverHero>Used by: {hero}</HoverHero>
    </span>
  );
}

export default ProductHover;

const HoverTitle = styled.div`
  box-shadow: 0px 5px 8px -9px rgba(255, 255, 255, 1);
`;

const HoverName = styled.div`
  font-size: 14px;
  box-shadow: 0px 5px 8px -9px rgba(255, 255, 255, 1);
  padding: 5px 0px;
`;

const HoverType = styled.div`
  font-size: 12px;
  padding: 5px 0px;
`;

const HoverHero = styled.div`
  padding-top: 5px;
  font-size: 12px;
`;
<file_sep>import React, { useEffect, useState } from "react";

import db from "../CONFIG";
import NotificationMessage from "./NotificationMessage";

function Notification() {
  const [notificationMessage, setNotificationMessage] = useState([]);

  useEffect(() => {
    db.collection("notification")
      .orderBy("time", "desc")
      .onSnapshot((snapshot) =>
        setNotificationMessage(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  }, []);
  return (
    <>
      {notificationMessage.map((item) => (
        <NotificationMessage
          id={item.id}
          key={item.id}
          image={item.data.image}
          time={item.data.time}
          message={item.data.message}
        />
      ))}
    </>
  );
}

export default Notification;
<file_sep>import React, { useEffect, useState } from "react";
import "./discountStore.css";

//Database Import
import db from "../CONFIG";
import DiscountBotItem from "./DiscountBotItem";

function DiscountStore() {
  const [discountItem, setDiscountItem] = useState([]);

  useEffect(() => {
    db.collection("instantSell")
      .orderBy("price", "asc")
      .onSnapshot((snapshot) =>
        setDiscountItem(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  }, []);

  return (
    <div className="discountContainer">
      <div className="discountBody">
        {discountItem.map((item) => (
          <DiscountBotItem
            id={item.id}
            key={item.id}
            image={item.data.image}
            name={item.data.name}
            price={item.data.price}
            hero={item.data.hero}
            gameIcon={item.data.gameIcon}
            gameName={item.data.gameName}
            type={item.data.type}
            rarity={item.data.rarity}
            quality={item.data.quality}
          />
        ))}
      </div>
    </div>
  );
}

export default DiscountStore;
<file_sep>import React from "react";
import styled from "styled-components";

function SideDrawerOption({ title, Icon, clickMe }) {
  return (
    <>
      <Option onClick={clickMe}>
        <Icon />
        <Title>{title}</Title>
      </Option>
    </>
  );
}

export default SideDrawerOption;

const Option = styled.div`
  box-shadow: 0px 5px 8px -9px rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  margin: 7px 0px;
  padding: 7px 0px 7px 20px;
  cursor: pointer;
  :hover {
    background-color: rgba(255, 255, 255, 0.7);
    color: #000;
    .MuiSvgIcon-root {
      color: #000;
    }
  }
  .MuiSvgIcon-root {
    font-size: x-large;
    color: #9acd32;
  }
`;

const Title = styled.div`
  margin-left: 10px;
  text-transform: capitalize;
  font-weight: 700;
`;
<file_sep>import { createSlice } from "@reduxjs/toolkit";

export const productSlice = createSlice({
  name: "product",
  initialState: {
    loadImage: null,
    loadGameName: null,
    loadType: null,
    loadHeroName: null,
    loadRarity: null,
    loadGameIcon: null,
  },
  reducers: {
    loadImage: (state, action) => {
      state.loadImage = action.payload;
    },
    loadGameName: (state, action) => {
      state.loadGameName = action.payload;
    },
    loadGameIcon: (state, action) => {
      state.loadGameIcon = action.payload;
    },
    loadHeroName: (state, action) => {
      state.loadHeroName = action.payload;
    },
    loadType: (state, action) => {
      state.loadType = action.payload;
    },
    loadRarity: (state, action) => {
      state.loadRarity = action.payload;
    },
  },
});

export const {
  loadImage,
  loadType,
  loadRarity,
  loadHeroName,
  loadGameName,
  loadGameIcon,
} = productSlice.actions;

export const selectImage = (state) => state.product.loadImage;
export const selectType = (state) => state.product.loadType;
export const selectRarity = (state) => state.product.loadRarity;
export const selectHero = (state) => state.product.loadHeroName;
export const selectGame = (state) => state.product.loadGameName;
export const selectGameIcon = (state) => state.product.loadGameIcon;

export default productSlice.reducer;
<file_sep>import React from "react";

import NumberFormat from "react-number-format";

import Popover from "@material-ui/core/Popover";
import { Avatar, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";

const useStyles = makeStyles((theme) => ({
  popover: {
    pointerEvents: "none",
  },
}));

function RecentPurchase({
  id,
  image,
  name,
  RpOrBal,
  price,
  rarity,
  type,
  time,
  userImg,
  source,
}) {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const handlePopoverOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handlePopoverClose = () => {
    setAnchorEl(null);
  };
  const open = Boolean(anchorEl);

  return (
    <PopupState variant="popover">
      {(popupState) => (
        <>
          <Typography
            {...bindTrigger(popupState)}
            className="recentPurchase"
            onMouseEnter={handlePopoverOpen}
            onMouseLeave={handlePopoverClose}
          >
            <img src={image} alt="" />
          </Typography>
          <Popover
            {...bindPopover(popupState)}
            className={classes.popover}
            open={open}
            anchorEl={anchorEl}
            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
            transformOrigin={{ vertical: "top", horizontal: "center" }}
            onClose={handlePopoverClose}
            disableRestoreFocus
          >
            <div className="recentPurchase__detail">
              <div className="purchased__top">
                <div className="purchased__itemName">{name}</div>
                <div className="purchased__itemRarity">
                  {rarity} {type}
                </div>
              </div>
              <div className="purchased__middle">
                <div className="purchased__itemPrice">
                  {RpOrBal ? (
                    <NumberFormat
                      value={price}
                      displayType="text"
                      thousandSeparator={true}
                      thousandsGroupStyle="lakh"
                      prefix={"Rs: "}
                      suffix={" /-"}
                    />
                  ) : (
                    <NumberFormat
                      value={price}
                      displayType="text"
                      suffix={" RP"}
                    />
                  )}
                </div>
                <div className="purchased__source">{source} purchase</div>
              </div>
              <div className="purchased__bottom">
                <div className="purchased__person">
                  Purchased By :
                  <Avatar src={userImg} />
                </div>
                <div className="purchased__date">
                  <p>Purchase Date :</p>{" "}
                  {new Date(time?.toDate()).toLocaleString()}
                </div>
              </div>
            </div>
          </Popover>
        </>
      )}
    </PopupState>
  );
}

export default RecentPurchase;
<file_sep>import React from "react";
import db from "../CONFIG"; //Database import
import firebase from "firebase"; //Timestamp from firebase : like this "firebase.firestore.FieldValue.serverTimestamp()"
import { notificationCount } from "../features/user/userSlice";
import { useDispatch } from "react-redux";

function ItemInventory({ name, image, rarity, type, id }) {
  //Can't perform a React state update on an unmounted component.
  //This is a no-op, but it indicates a memory leak in your application.
  //To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
  //I got this fucking stupid error on console....kaam chai vairaxa tara yo muji le dimaag kharab banayo...
  const dispatch = useDispatch();

  const handleWithdraw = () => {
    db.collection("inventory").doc(id).delete();

    dispatch(notificationCount());
    db.collection("notification").add({
      message: `Trade offer to your steam account with item named ${name} has been made. Check your steam account.`,
      time: firebase.firestore.FieldValue.serverTimestamp(),
      image:
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABF1BMVEX///8AAAMAn9P/lgD/LEcAAAAA5Yv/Lkr/mwAA6Y0ArGhWDxgAKxsA7pF9SQIAibYAklkA2YQAd54ApdsAnM8AyHrNzc0Ak8S/v7/vKUN6enri4uLdJj7SJDvoKEHw8PC7IDQqKiuhHC2tra04ODjX19fJIzi2trbr6+uJiYm+cAEAQVYATWdCQkNNTU1xFCAsCA1jERyTGSmAFiQ7ChGWlpbrigBDKANmPAIAYYEAM0QAbpIAEBZeXl4XFxmEhIVIDBWuHjEbGxwgBgpsbG0XBAiioqOLUgKnYgHZfwAAKTcAHikAR18AcZYAv3QAbEIAgE4AJhglBgtR<KEY>
    });
  };

  return (
    <div className="webInventory__item">
      <div className="webInventory__itemTop">
        <img src={image} alt="" />
        <div className="webInventory__name">{name}</div>
        <div className="webInventory__rarity">
          {rarity} {type}
        </div>
      </div>
      <button className="webInventory__send" onClick={handleWithdraw}>
        Withdraw
      </button>
    </div>
  );
}

export default ItemInventory;
<file_sep>import React, { useState } from "react";
import "./buysection.css";
import "./dialog.css";
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
import NumberFormat from "react-number-format";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogFinalConfirm from "./DialogFinalConfirm";
import { useSelector, useDispatch } from "react-redux";
import { selectUser, loginName, loginPhoto } from "../features/user/userSlice";
import { auth, provider } from "../CONFIG";
import db from "../CONFIG";

//import Button from "@material-ui/core/Button";
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";
import {
  selectBalance,
  balanceCut,
  selectReward,
  rewardCut,
  rewardUp,
} from "../features/balance/balanceSlice";

function Bill({ cartItem }) {
  const dispatch = useDispatch();
  const user = useSelector(selectUser);
  //---------------------------------------------//
  const [confirmBillOpen, setConfirmBillOpen] = useState(false); //To open bill type of dialog
  const [confirmBillOpenRP, setConfirmBillOpenRP] = useState(false); //To open bill type of dialog
  const [successMessage, setSuccessMessage] = useState(false); //Message at bottom after purchase
  const [noItemMessage, setNoItemMessage] = useState(false); //Message when user clicked purchase without putting item in buy container.
  const [balanceLowMessage, setBalanceLowMessage] = useState(false);
  const [rewardLowMessage, setRewardLowMessage] = useState(false);

  const balance = useSelector(selectBalance);
  const reward = useSelector(selectReward);

  const handleClickOpenBalance = () => {
    if (totalCount() === 0) {
      setNoItemMessage(true);
    } else {
      if (totalPrice() > balance) {
        setBalanceLowMessage(true);
      } else {
        setConfirmBillOpen(true);
      }
    }
  };

  const handleClickOpenRP = () => {
    if (totalCount() === 0) {
      setNoItemMessage(true);
    } else {
      if (totalPrice() > reward) {
        setRewardLowMessage(true);
      } else {
        setConfirmBillOpenRP(true);
      }
    }
  };

  const handleClose = () => {
    setConfirmBillOpen(false);
    setConfirmBillOpenRP(false);
  };
  //-----------------------------------------//

  const handleLogin = () => {
    auth
      .signInWithPopup(provider)
      .then((result) => {
        dispatch(loginName(result.user.displayName));
        dispatch(loginPhoto(result.user.photoURL));
      })
      .catch((error) => {
        console.log(error.message);
      });
  };

  const handleConfirm = () => {
    //Some db stuffs need to be done....make new db collection called inventory...move db collection buy to db collection inventory
    cartItem.map((item) =>
      db.collection("inventory").doc().set({
        gameIcon: item.data.gameIcon,
        name: item.data.name,
        image: item.data.image,
        price: item.data.price,
        quantity: item.data.quantity,
        hero: item.data.hero,
        quality: item.data.quality,
        gameName: item.data.gameName,
        type: item.data.type,
        rarity: item.data.rarity,
      })
    );

    //Test item on sell container...directly send...just for test....
    cartItem.map((item) =>
      db.collection("sell").doc().set({
        gameIcon: item.data.gameIcon,
        name: item.data.name,
        image: item.data.image,
        price: item.data.price,
        quantity: item.data.quantity,
        hero: item.data.hero,
        quality: item.data.quality,
        gameName: item.data.gameName,
        type: item.data.type,
        rarity: item.data.rarity,
      })
    );

    //delete item from buy box....
    cartItem.map((item) => db.collection("buy").doc(item.id).delete());

    dispatch(balanceCut(totalPrice()));
    dispatch(rewardUp(Number(purchaseReward) || 0));
    setConfirmBillOpen(false);
    setSuccessMessage(true);
  };

  const handleConfirmRP = () => {
    //Some db stuffs need to be done....make new db collection called inventory...move db collection buy to db collection inventory
    cartItem.map((item) =>
      db.collection("inventory").doc().set({
        gameIcon: item.data.gameIcon,
        name: item.data.name,
        image: item.data.image,
        price: item.data.price,
        quantity: item.data.quantity,
      })
    );

    //Test item on sell container...directly send...just for test....
    cartItem.map((item) =>
      db.collection("sell").doc().set({
        gameIcon: item.data.gameIcon,
        name: item.data.name,
        image: item.data.image,
        price: item.data.price,
        quantity: item.data.quantity,
      })
    );

    //delete item from buy box....
    cartItem.map((item) => db.collection("buy").doc(item.id).delete());

    dispatch(rewardCut(totalPrice()));
    dispatch(rewardUp(Number(purchaseReward) || 0));
    setConfirmBillOpenRP(false);
    setSuccessMessage(true);
  };

  const totalCount = () => {
    let count = 0;
    cartItem.forEach((item) => {
      count += item.data.quantity;
    });
    return count;
  };

  const totalPrice = () => {
    let total = 0;
    cartItem.forEach((item) => {
      total += item.data.quantity * item.data.price;
    });
    return total;
  };

  const purchaseReward = parseInt(0.02 * totalPrice()).toFixed(2);

  function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
  }

  const handleCloseMessage = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setSuccessMessage(false);
    setNoItemMessage(false);
    setBalanceLowMessage(false);
    setRewardLowMessage(false);
  };

  return (
    <div className="storemarket__buyCheckout">
      <div className="checkout__header">
        <ShoppingCartIcon />
        <h4>Bill</h4>
      </div>
      <div className="checkout__description">
        <div className="checkout__descriptionDetails">
          <p>
            Item Count:
            <NumberFormat
              className="checkout__number"
              value={totalCount()}
              displayType="text"
              thousandSeparator={true}
              thousandsGroupStyle="lakh"
            />
          </p>
          <p>
            Total price (Rs):
            <NumberFormat
              className="checkout__number"
              value={totalPrice()}
              displayType="text"
              thousandSeparator={true}
              thousandsGroupStyle="lakh"
              suffix={"/-"}
            />
          </p>
        </div>
        <div className="checkout__descriptionConfirm">
          {!user ? (
            <>
              <img
                onClick={handleLogin}
                style={{ cursor: "pointer" }}
                src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/steamworks_docs/english/sits_small.png"
                alt="logo"
              />

              <p
                style={{
                  border: "2px solid green",
                  borderRadius: 5,
                  marginTop: 10,
                  padding: 5,
                }}
              >
                You need to login in order to make purchase.
              </p>
            </>
          ) : (
            <>
              <button
                className="checkout__button"
                onClick={handleClickOpenBalance}
              >
                Purchase from Balance
              </button>
              <button className="checkout__button" onClick={handleClickOpenRP}>
                Purchase from RP
              </button>
              <div className="checkout__descriptionConfirmMessage">
                <p>
                  <NumberFormat
                    value={Number(purchaseReward)}
                    displayType="text"
                    thousandSeparator={true}
                    thousandsGroupStyle="lakh"
                    prefix={"Reward Point (RP) : "}
                  />
                </p>
                <p>2% reward point on purchase.</p>
                <p>Check items on inventory after purchase.</p>
              </div>
            </>
          )}
          {/*Dialog Box for Purchase through Balance */}
          <Dialog
            open={confirmBillOpen}
            onClose={handleClose}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
          >
            <DialogTitle id="alert-dialog-title">
              {"Are you sure you want to purchase the following items?"}
            </DialogTitle>
            <DialogContent>
              <DialogContentText id="alert-dialog-description">
                {cartItem.map((item) => (
                  <DialogFinalConfirm
                    id={item.id}
                    key={item.id}
                    gameIcon={item.data.gameIcon}
                    name={item.data.name}
                    image={item.data.image}
                    price={item.data.price}
                    quantity={item.data.quantity}
                  />
                ))}
              </DialogContentText>
              <div className="dialog__footer">
                <div className="dialog__footerName">Grand Total</div>
                <div className="dialog__footerAmount">
                  <NumberFormat
                    value={totalPrice()}
                    displayType="text"
                    thousandSeparator={true}
                    thousandsGroupStyle="lakh"
                    prefix={"(Rs): "}
                    suffix={"/-"}
                  />
                </div>
              </div>
            </DialogContent>
            <DialogActions>
              <button className="button__cancel" onClick={handleClose}>
                Cancel
              </button>
              <button className="button__confirm" onClick={handleConfirm}>
                Confirm
              </button>
            </DialogActions>
          </Dialog>
          {/*Dialog Box for Purchase through Reward point */}
          <Dialog
            open={confirmBillOpenRP}
            onClose={handleClose}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
          >
            <DialogTitle id="alert-dialog-title">
              {"Are you sure you want to purchase the following items?"}
            </DialogTitle>
            <DialogContent>
              <DialogContentText id="alert-dialog-description">
                {cartItem.map((item) => (
                  <DialogFinalConfirm
                    id={item.id}
                    key={item.id}
                    gameIcon={item.data.gameIcon}
                    name={item.data.name}
                    image={item.data.image}
                    price={item.data.price}
                    quantity={item.data.quantity}
                  />
                ))}
              </DialogContentText>
              <div className="dialog__footer">
                <div className="dialog__footerName">Grand Total</div>
                <div className="dialog__footerAmount">
                  <NumberFormat
                    value={totalPrice()}
                    displayType="text"
                    thousandSeparator={true}
                    thousandsGroupStyle="lakh"
                    prefix={"(Rs): "}
                    suffix={"/-"}
                  />
                </div>
              </div>
            </DialogContent>
            <DialogActions>
              <button className="button__cancel" onClick={handleClose}>
                Cancel
              </button>
              <button className="button__confirm" onClick={handleConfirmRP}>
                Confirm
              </button>
            </DialogActions>
          </Dialog>
          {/*Success message snackbar*/}
          <Snackbar
            open={successMessage}
            autoHideDuration={6000}
            onClose={handleCloseMessage}
            anchorOrigin={{
              vertical: "top",
              horizontal: "center",
            }}
          >
            <Alert onClose={handleCloseMessage} severity="success">
              Thank you for the purchase!
            </Alert>
          </Snackbar>
          {/*No item snackbar */}
          <Snackbar
            open={noItemMessage}
            autoHideDuration={6000}
            onClose={handleCloseMessage}
            anchorOrigin={{
              vertical: "top",
              horizontal: "center",
            }}
          >
            <Alert onClose={handleCloseMessage} severity="error">
              You have not selected any item!
            </Alert>
          </Snackbar>
          {/*Balance low message snackbar*/}
          <Snackbar
            open={balanceLowMessage}
            autoHideDuration={6000}
            onClose={handleCloseMessage}
            anchorOrigin={{
              vertical: "top",
              horizontal: "center",
            }}
          >
            <Alert onClose={handleCloseMessage} severity="error">
              Insufficient balance!
            </Alert>
          </Snackbar>
          {/*Reward point low message snackbar*/}
          <Snackbar
            open={rewardLowMessage}
            autoHideDuration={6000}
            onClose={handleCloseMessage}
            anchorOrigin={{
              vertical: "top",
              horizontal: "center",
            }}
          >
            <Alert onClose={handleCloseMessage} severity="error">
              Insufficient Reward point!
            </Alert>
          </Snackbar>
        </div>
      </div>
    </div>
  );
}

export default Bill;
<file_sep>import React, { useState } from "react";

//Redux and slices
import { useDispatch, useSelector } from "react-redux";
import { notificationCount } from "../features/user/userSlice";
import {
  recharge,
  rewardUp,
  selectBalance,
  selectReward,
} from "../features/balance/balanceSlice";

//Material-UI imports
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import CloseIcon from "@material-ui/icons/Close";
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";

//Database import
import db from "../CONFIG";
import firebase from "firebase"; //Only for notification timestamp

//Other imports
import NumberFormat from "react-number-format";

function SteamInventory({
  gameIcon,
  name,
  image,
  price,
  quantity,
  id,
  gameName,
  hero,
  type,
  quality,
  rarity,
}) {
  const dispatch = useDispatch();
  const [sell, setSell] = useState(false); //On clicking an item, opening and closing first dialog box state.....
  const [instantSell, setInstantSell] = useState(false); //Dialog box open after clicking (Ok, Instant sell) button state...
  const [communityDialogOpen, setCommunityDialogOpen] = useState(false); //Dialog box open after clicking sell on community button..
  const instantSellRate = Number(parseInt(price - price * 0.3)); //instant Sell price
  const instantReward = Number(parseInt(instantSellRate * 0.03).toFixed(2)); //instant reward point value

  const [communitySell, setCommunitySell] = useState(); // You receive: (Seller price input) state

  const [noInputPrice, setNoInputPrice] = useState(false); // Error Snackbar open if user click (Ok, sell on community) button without putting price in You Receive Input field.
  const [itemSetOnCommunity, setItemSetOnCommunity] = useState(false); //Snackbar open after user successfully listed the item in community market.

  const balance = useSelector(selectBalance); //Fetch balance from balanceSlice
  const reward = useSelector(selectReward); //Fetch reward from balanceSlice

  const communityBuyerRate = Number(
    parseInt(Number(communitySell) + Number(communitySell * 0.1))
  ); //Buyer Pays: price(10% charge)

  const communityReward = Number(parseInt(communitySell * 0.02)); //reward point when selling in community market

  //A material-ui Lab code for snackbar (it's imported from material-ui)
  function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
  }

  /*1:First Dialog box function when clicking an item. */
  //1(a) Opening a dialog box
  const handleSell = () => {
    setSell(true);
  };

  //1(b) Closing a first dialog box
  const handleClose = () => {
    setSell(false);
  };

  /*2: Dialog box function when clicking (Ok, Instant sell) button. */
  //2(a) Opening a dialog box
  const handleInstant = () => {
    setInstantSell(true);
  };

  //2(b) Closing a dialog box (triggered on clicking Cancel button and outside the dialog box)
  const handleCloseInstantSell = () => {
    setInstantSell(false);
  };

  //2(c) Triggered on clicking confirm button in final confirmation dialog box of instant sell choice.
  //This will also close all dialog box...(both first and second)
  const handleInstantConfirm = () => {
    dispatch(recharge(Number(instantSellRate) || 0));
    dispatch(rewardUp(Number(instantReward) || 0));

    db.collection("sell").doc(id).delete();

    setInstantSell(false);
    setSell(false);

    dispatch(notificationCount());
    db.collection("notification").add({
      message: `${name} sold instantly to website. Balance (Rs) : ${instantSellRate} /- has been credited to your website wallet.`,
      time: firebase.firestore.FieldValue.serverTimestamp(),
      image:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaD0Q45xrXb6J_YCgnefcHz76apJspQSho7M0mqS7vQnZP3mPj1jjWkBJngPSD4Lhi2UI&usqp=CAU",
    });

    db.collection("instantSell").add({
      image: image,
      name: name,
      rarity: rarity,
      type: type,
      price: instantSellRate,
      gameName: gameName,
      gameIcon: gameIcon,
      hero: hero,
      quality: quality,
    });

    db.collection("transaction").add({
      date: firebase.firestore.FieldValue.serverTimestamp(),
      message: "Store transaction. ( Item sold Instantly )",
      signRP: true,
      costRP: Number(instantReward),
      signBalance: true,
      costBalance: Number(instantSellRate),
      walletRP: Number(reward) + Number(instantReward),
      walletBalance: Number(balance) + Number(instantSellRate),
    });
  };

  /*3: Dialog box function when clicking (Ok, sell on community) button. */
  //3(a) Opening a dialog box on clicking (Ok, sell on community) button.
  const handleCommunity = () => {
    //generate error snackbar if user forget to input price...
    if (!communitySell) {
      setNoInputPrice(true);
    } else {
      setCommunityDialogOpen(true);
    }
  };

  //3(b) Closing a error snackbar
  const handleErrorSnackbar = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setNoInputPrice(false);
  };

  //3(c) Closing a dialog on clicking cancel button as well as outside the dialog box
  const handleCloseCommunitySell = () => {
    setCommunityDialogOpen(false);
  };

  //3(d) Triggered on clicking confirm button in final confirmation dialog box of community sell choice.
  //This will also close all dialog box...(both first and second)
  //This will also trigger a snackbar which tells the item is listed in community market.
  const handleCommunityConfirm = () => {
    db.collection("community").doc(id).set({
      gameIcon: gameIcon,
      image: image,
      name: name,
      price: communityBuyerRate,
      quantity: 1,
      hero: hero,
      quality: quality,
      gameName: gameName,
      type: type,
      rarity: rarity,
    });

    db.collection("listing").doc(id).set({
      image: image,
      name: name,
      sellPrice: communityBuyerRate,
      getPrice: communitySell,
      time: firebase.firestore.FieldValue.serverTimestamp(),
      quality: quality,
      type: type,
      rarity: rarity,
    });

    setItemSetOnCommunity(true);
    setCommunityDialogOpen(false);
    setSell(false);

    db.collection("sell").doc(id).delete();

    dispatch(notificationCount());
    db.collection("notification").add({
      message: `Your item ${name} is listed on community market for sale.`,
      time: firebase.firestore.FieldValue.serverTimestamp(),
      image:
        "https://pngimage.net/wp-content/uploads/2018/05/estoque-icon-png-7.png",
    });

    //Transaction history if item is sold...for future use...
    /* db.collection("transaction").add({
      date: firebase.firestore.FieldValue.serverTimestamp(),
      message: "Community Market transaction. ( Purchase )",
      signRP: true,
      costRP: Number(purchaseReward),
      signBalance: false,
      costBalance: Number(price),
      walletRP: Number(reward) + Number(purchaseReward),
      walletBalance: Number(balance) + Number(price),
    }); */
  };

  //3(e) Closing success snackbar
  const handleSuccessSnackbar = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setItemSetOnCommunity(false);
  };

  //-------------------------------------------------------------------//

  return (
    <>
      <div className="steamInventory__item" onClick={handleSell}>
        <div className="steamInventory__itemTop">
          <img
            src={image}
            /* src={` https://community.akamai.steamstatic.com/economy/image/${image}`} */
            alt=""
          />
          <div className="steamInventory__name">{name}</div>
          <div className="steamInventory__rarity">
            {rarity} {type}
          </div>
        </div>
        <p>
          <NumberFormat
            value={price}
            displayType="text"
            thousandSeparator={true}
            thousandsGroupStyle="lakh"
            prefix={"Rs: "}
            suffix={" /-"}
          />
        </p>
        <button className="steamInventory__sell">Sell Now</button>
      </div>
      {/*First dialog box when clicking an item to sell */}
      <Dialog
        open={sell}
        onClose={handleClose}
        fullWidth={true}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title" className="dialog__title">
          <div className="dialog__titleArrange">
            <p>PUT AN ITEM UP FOR SALE</p>
            <CloseIcon onClick={handleClose} />
          </div>
        </DialogTitle>
        <DialogContent>
          <div className="dialog__body">
            <div className="dialog__header">
              <div className="item__photo">
                <img src={image} alt="" />
              </div>
              <div className="item__details">
                <div className="item__name">{name}</div>
                <h6>
                  {rarity} {type}
                </h6>
                <div className="item__gameIcon">
                  <img src={gameIcon} alt="" />
                  <p>{gameName}</p>
                </div>
              </div>
            </div>
            <div className="dialog__deals">
              <div className="deals__instantSell">
                <div className="instantSell__rate">
                  <h4>
                    <NumberFormat
                      value={instantSellRate}
                      displayType="text"
                      thousandSeparator={true}
                      thousandsGroupStyle="lakh"
                      prefix={"Instant Sell This At Rs: "}
                      suffix={"/-"}
                    />
                  </h4>
                </div>

                <div className="instantSell__reward">
                  <p>
                    <NumberFormat
                      value={instantReward}
                      displayType="text"
                      thousandSeparator={true}
                      thousandsGroupStyle="lakh"
                      prefix={"Reward Point (RP) : "}
                    />
                  </p>
                  <p>3% round off RP on instant sell.</p>
                </div>
              </div>
              <div className="deals__communitySell">
                <div className="communitySell__header">Sell on community</div>
                <div className="youReceive">
                  You Receive (Rs) :
                  <input
                    placeholder="Enter amount"
                    type="number"
                    value={communitySell}
                    onChange={(e) => setCommunitySell(e.target.value)}
                  />
                </div>
                <div className="buyerPays">
                  <p>
                    <NumberFormat
                      value={communityBuyerRate}
                      displayType="text"
                      thousandSeparator={true}
                      thousandsGroupStyle="lakh"
                      prefix={"Buyer Pays (Rs) : "}
                      suffix={" /- (includes fees)"}
                    />
                  </p>
                </div>

                <div className="communitySell__reward">
                  <p>
                    <NumberFormat
                      value={communityReward}
                      displayType="text"
                      thousandSeparator={true}
                      thousandsGroupStyle="lakh"
                      prefix={"Reward Point (RP) : "}
                    />
                  </p>
                  <p>2% round off RP on community sell.</p>
                </div>
              </div>
            </div>
          </div>
        </DialogContent>
        <DialogActions className="dialog__action">
          <button onClick={handleInstant} color="primary">
            Ok, Instant Sell
          </button>
          <button color="primary" onClick={handleCommunity}>
            OK, Sell On Community
          </button>
        </DialogActions>
      </Dialog>

      {/*Instant sell confirmation dialog box(This dialog box opens when we clicked (ok, Instant sell) button) */}
      <Dialog
        open={instantSell}
        onClose={handleCloseInstantSell}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title" className="dialog__title">
          Are you sure you want to instantly sell your item {name} ?
        </DialogTitle>
        <DialogContent>
          <div style={{ color: "#61c9ce" }}>
            <h4>You will receive :</h4>
            <h4>
              <NumberFormat
                value={instantSellRate}
                displayType="text"
                thousandSeparator={true}
                thousandsGroupStyle="lakh"
                prefix={"Balance (Rs) : "}
                suffix={" /-"}
              />
            </h4>
            <h4>Reward Point (RP) : {instantReward}</h4>
          </div>
        </DialogContent>
        <DialogActions className="dialog__action">
          <button onClick={handleCloseInstantSell}>Cancel</button>
          <button onClick={handleInstantConfirm}>Confirm</button>
        </DialogActions>
      </Dialog>
      {/* Community sell confirmation dialog box */}
      <Dialog
        open={communityDialogOpen}
        onClose={handleCloseCommunitySell}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title" className="dialog__title">
          Are you sure you want to list your item {name} on community market?
        </DialogTitle>
        <DialogContent>
          <div style={{ color: "#61c9ce" }}>
            <p>
              Someone from community will buy your item. Upon successful
              community transaction, you will receive :
            </p>
            <h4>
              <NumberFormat
                value={parseInt(communitySell, 10)}
                displayType="text"
                thousandSeparator={true}
                thousandsGroupStyle="lakh"
                prefix={"Balance (Rs) : "}
                suffix={" /-"}
              />
            </h4>
            <h4>Reward point (RP) : {communityReward}</h4>
          </div>
        </DialogContent>
        <DialogActions className="dialog__action">
          <button onClick={handleCloseCommunitySell}>Cancel</button>
          <button onClick={handleCommunityConfirm}>Confirm</button>
        </DialogActions>
      </Dialog>

      {/*Error snackbar if price is not set by user on community market */}
      <Snackbar
        open={noInputPrice}
        autoHideDuration={6000}
        onClose={handleErrorSnackbar}
      >
        <Alert onClose={handleErrorSnackbar} severity="error">
          You must put your selling price!
        </Alert>
      </Snackbar>
      {/*Success snackbar after user successfully listed item on community market */}
      <Snackbar
        open={itemSetOnCommunity}
        autoHideDuration={6000}
        onClose={handleSuccessSnackbar}
        anchorOrigin={{
          horizontal: "center",
          vertical: "top",
        }}
      >
        <Alert onClose={handleSuccessSnackbar} severity="success">
          Your item is listed on community market
        </Alert>
      </Snackbar>
    </>
  );
}

export default SteamInventory;
<file_sep># steambazarnepal
This is a simple project - something related to ecommerce. You can check the demo version here https://steambazarnepal.web.app/store
<file_sep>import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
  name: "user",
  initialState: {
    name: "Demo Project",
    photo:
      "https://icon-library.com/images/cool-profile-icon/cool-profile-icon-10.jpg",
    /* name: null,
    photo: null, */
    count: 0,
  },
  reducers: {
    loginName: (state, action) => {
      state.name = action.payload;
    },
    loginPhoto: (state, action) => {
      state.photo = action.payload;
    },
    notificationCount: (state) => {
      state.count += 1;
    },
    notificationReset: (state) => {
      state.count = 0;
    },
    logoutName: (state, action) => {
      state.name = action.payload;
    },
    logoutPhoto: (state, action) => {
      state.photo = action.payload;
    },
  },
});

export const {
  loginName,
  loginPhoto,
  logoutName,
  logoutPhoto,
  notificationCount,
  notificationReset,
} = userSlice.actions;

export const selectUser = (state) => state.user.name;
export const selectPhoto = (state) => state.user.photo;
export const selectNotification = (state) => state.user.count;

export default userSlice.reducer;
<file_sep>import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

//Import redux and slices
import {
  selectImage,
  selectGame,
  selectHero,
  selectType,
  selectRarity,
  selectGameIcon,
} from "../features/product/productSlice";
import { useSelector } from "react-redux";

//Import database
import db from "../CONFIG";

//Css import
import "./communitySelectItem.css";

//Import components
import CommunityEachProduct from "./CommunityEachProduct";

//Import material-UI
import Pagination from "@material-ui/lab/Pagination";

function CommunitySelectItem() {
  const image = useSelector(selectImage); //Get image
  const gameName = useSelector(selectGame); //Get item name
  const hero = useSelector(selectHero); //Get hero name
  const type = useSelector(selectType); //Get item type
  const rarity = useSelector(selectRarity); //Get item rarity
  const gameIcon = useSelector(selectGameIcon); //Get game icon
  const { name } = useParams(); //Dynamic routing params
  const [itemFetch, setItemFetch] = useState([]); // Get all item of same name------

  /*--------------Pagination---------------*/
  //total number of items in community
  const totalItem = itemFetch.length;
  const [currentPage, setCurrentPage] = useState(1); //Current page of pagination
  const itemPerPage = Number(5); //Number of items in each page

  //Get current items:
  const indexOfLastItem = currentPage * itemPerPage; //get index of last item of every page...
  const indexOfFirstItem = indexOfLastItem - itemPerPage; //index of first item of every page...
  const currentPost = itemFetch.slice(indexOfFirstItem, indexOfLastItem);

  //total pagination pages
  const noOfPage = Number(parseInt(totalItem / itemPerPage)) + Number(1);

  //Pagination function----
  const handlePagination = (event, value) => {
    setCurrentPage(value);
  };

  //Used in pagination result sentence
  let result = indexOfLastItem;
  if (indexOfLastItem >= totalItem) {
    result = totalItem;
  } else {
    result = indexOfLastItem;
  }

  //Use effect hook----------------------------------
  //Here it loads all the item from same name in an ascending order---------------
  useEffect(() => {
    db.collection("community")
      .where("name", "==", name)
      .orderBy("price", "asc")
      .onSnapshot((snapshot) =>
        setItemFetch(
          snapshot.docs.map((item) => ({
            id: item.id,
            data: item.data(),
          }))
        )
      );
  }, [name]);

  return (
    <div className="itemContainer">
      <div className="item__allDetails">
        <div className="item__image">
          <img src={image} alt="" />
        </div>
        <div className="item__description">
          <div className="item__name">
            <h2>{name}</h2>
          </div>
          <div className="item__game">
            <div className="game__logo">
              <img src={gameIcon} alt="" />
            </div>
            <div className="game__title">
              <h5>{gameName}</h5>
              <h5>
                {rarity} {type}
              </h5>
            </div>
          </div>
          <div className="hero__name">Used by : {hero}</div>
        </div>
      </div>
      <div className="item__lists">
        {currentPost.map((item) => (
          <CommunityEachProduct
            id={item.id}
            key={item.id}
            name={item.data.name}
            price={item.data.price}
            gameIcon={item.data.gameIcon}
            image={item.data.image}
            hero={item.data.hero}
            quality={item.data.quality}
            gameName={item.data.gameName}
            rarity={item.data.rarity}
            type={item.data.type}
          />
        ))}
      </div>

      <div className="community__pagination">
        <div className="pagination__results">
          Showing {indexOfFirstItem + 1}-{result} of {totalItem} results
        </div>
        <div className="pagination__jump">
          <Pagination
            count={noOfPage}
            defaultPage={currentPage}
            boundaryCount={2}
            size="small"
            onChange={handlePagination}
          />
        </div>
      </div>
    </div>
  );
}

export default CommunitySelectItem;
<file_sep>import React from "react";
import { Link } from "react-router-dom";

//Redux and slices
import { useDispatch } from "react-redux";
import {
  loadImage,
  loadType,
  loadRarity,
  loadGameName,
  loadHeroName,
  loadGameIcon,
} from "../features/product/productSlice";

//Other imports
import NumberFormat from "react-number-format";

function CommunityProduct({
  name,
  quantity,
  price,
  gameIcon,
  image,
  gameName,
  hero,
  type,
  quality,
  rarity,
}) {
  const dispatch = useDispatch();

  //This will be changed later...Now this is just to send some data to redux and render the selected item after clicking an item from community market------
  const sendImage = () => {
    dispatch(loadImage(image));
    dispatch(loadType(type));
    dispatch(loadRarity(rarity));
    dispatch(loadGameName(gameName));
    dispatch(loadHeroName(hero));
    dispatch(loadGameIcon(gameIcon));
  };
  return (
    <Link to={`/community/${name}`} className="link__to" onClick={sendImage}>
      <div className="community__product">
        <div className="community__productImage">
          <img src={image} alt="" />
          <div className="community__productQuantity">
            Quantity : {quantity}
          </div>
          <div className="product__gameIcon">
            <img src={gameIcon} alt="" />
          </div>
        </div>
        <div className="community__productTitle">
          <h4>{name}</h4>

          <div className="community__productPrice">
            <p>
              <NumberFormat
                value={price}
                displayType="text"
                thousandSeparator={true}
                thousandsGroupStyle="lakh"
                prefix={"Starting at (Rs) : "}
                suffix={" /-"}
              />
            </p>
          </div>
        </div>
      </div>
    </Link>
  );
}

export default CommunityProduct;
<file_sep>import React, { useEffect, useState } from "react";

//Redux and slices
import { useDispatch } from "react-redux";
import { loadGameName } from "../features/product/productSlice";

//Material imports
import Pagination from "@material-ui/lab/Pagination";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ExpandLessIcon from "@material-ui/icons/ExpandLess";
import SearchIcon from "@material-ui/icons/Search";

//Css import
import "./marketItems.css";

//Component import
import CommunityProduct from "./CommunityProduct";

//Database Import
import db from "../CONFIG";

function CommunityMarket() {
  const dispatch = useDispatch();

  const [community, setcommunity] = useState([]); //loads item with number of quantity
  const [priceSort, setPriceSort] = useState(false); //Sort price useState
  const [quantitySort, setQuantitySort] = useState(false); //Sort quantity useState

  /*--------------Pagination---------------*/
  const totalItem = community.length; //total number of items in community
  const [currentPage, setCurrentPage] = useState(1); //Current page of pagination
  const itemPerPage = Number(10); //Number of items in each page

  //Get current items:
  const indexOfLastItem = currentPage * itemPerPage; //get index of last item of every page...
  const indexOfFirstItem = indexOfLastItem - itemPerPage; //index of first item of every page...
  const currentPost = community.slice(indexOfFirstItem, indexOfLastItem); //Render only specific part of array

  //total pagination pages
  const noOfPage = Number(parseInt(totalItem / itemPerPage)) + Number(1);

  //Pagination extra----to render a result line-------------
  let result = indexOfLastItem;
  if (indexOfLastItem >= totalItem) {
    result = totalItem;
  } else {
    result = indexOfLastItem;
  }
  //End of pagination----------------------------------------------------------------------------------

  //Use effect hook----------------------------------------------------------
  useEffect(() => {
    db.collection("community").onSnapshot((snapshot) =>
      setcommunity(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      )
    );
  }, []);

  //Filter by game----------------
  //Dota2
  const handleDota2 = () => {
    setCurrentPage(1);
    dispatch(loadGameName("Dota 2"));
    db.collection("community")
      .where("gameName", "==", "Dota 2")
      .onSnapshot((snapshot) =>
        setcommunity(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  };
  //Csgo
  const handleCsgo = () => {
    setCurrentPage(1);
    dispatch(loadGameName("Counter-Strike: Global Offensive"));
    db.collection("community")
      .where("gameName", "==", "Counter-Strike: Global Offensive")
      .onSnapshot((snapshot) =>
        setcommunity(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  };

  //sorting price (ascending and descending both)
  const sortPrice = () => {
    setPriceSort(!priceSort);

    priceSort
      ? community.sort((first, second) => {
          return first.data.price - second.data.price;
        })
      : community.sort((first, second) => {
          return second.data.price - first.data.price;
        });
  };
  //Same function as price sorting....currently it does price sort....later on we just change price with quantity in function return part..
  const sortQuantity = () => {
    setQuantitySort(!quantitySort);

    quantitySort
      ? community.sort((first, second) => {
          return first.data.price - second.data.price;
        })
      : community.sort((first, second) => {
          return second.data.price - first.data.price;
        });
  };

  //Pagination function---clicking different page and showing up the items---
  const handlePagination = (event, value) => {
    setCurrentPage(value);
  };

  return (
    <div className="community__body">
      <div className="community__navbar">
        <div className="community__navbarLeft">
          <div
            className="community__navbarLeftGameFilter"
            onClick={handleDota2}
          >
            <img
              src="https://1.bp.blogspot.com/-GplgZlvkXSc/Uk_3BipvAlI/AAAAAAAAAJE/NIU9Sm2vSVU/s1600/Dota2-Filled.png"
              alt=""
            />
            <div className="gameTitle">Dota2</div>
          </div>
          <div className="community__navbarLeftGameFilter" onClick={handleCsgo}>
            <img
              src="https://www.meme-arsenal.com/memes/d81f1fc73c38e2cfacbd493b5d58509c.jpg"
              alt=""
            />
            <div className="gameTitle">CSGO</div>
          </div>
          <div className="filterPriceQuantity">
            <div className="filterBy" onClick={sortPrice}>
              <p>Price</p>
              {priceSort ? <ExpandMoreIcon /> : <ExpandLessIcon />}
            </div>
            <div className="filterBy" onClick={sortQuantity}>
              <p>Quantity</p>
              {quantitySort ? <ExpandMoreIcon /> : <ExpandLessIcon />}
            </div>
          </div>
        </div>
        <div className="community__navbarRight">
          <div className="searchBox">
            <input placeholder="search item" />
          </div>
          <div className="search__icon">
            <SearchIcon />
          </div>
        </div>
      </div>
      <div className="community__data">
        <div className="community__itemsContainer">
          {currentPost.map((item) => (
            <CommunityProduct
              id={item.id}
              key={item.id}
              gameIcon={item.data.gameIcon}
              name={item.data.name}
              price={item.data.price}
              image={item.data.image}
              quantity={item.data.quantity}
              hero={item.data.hero}
              quality={item.data.quality}
              gameName={item.data.gameName}
              rarity={item.data.rarity}
              type={item.data.type}
            />
          ))}
        </div>
        <div className="community__pagination">
          <div className="pagination__results">
            Showing {indexOfFirstItem + 1}-{result} of {totalItem} results
          </div>
          <div className="pagination__jump">
            <Pagination
              count={noOfPage}
              page={currentPage}
              size="small"
              onChange={handlePagination}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default CommunityMarket;
<file_sep>import React, { useEffect, useRef, useState } from "react";
import "./storesection.css";
import StoreItem from "../Product/StoreItem";
import StoreRoundedIcon from "@material-ui/icons/StoreRounded";
import SearchIcon from "@material-ui/icons/Search";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { useDispatch } from "react-redux";
import { loadGameName } from "../features/product/productSlice";

import db from "../CONFIG";
import { ClickAwayListener } from "@material-ui/core";

function StoreSection() {
  const dispatch = useDispatch();
  const [product, setProduct] = useState([]);
  const [open, setOpen] = useState(false);

  const handleDropdown = (event) => {
    event.preventDefault();
    setOpen(!open);
  };

  const handleLowToHighSort = (event) => {
    product.sort((first, second) => {
      return first.data.price - second.data.price;
    });

    setOpen(false);
  };

  const handleHighToLowSort = (event) => {
    product.sort((first, second) => {
      return second.data.price - first.data.price;
    });
    setOpen(false);
  };

  const anchorRef = useRef(null);

  const handleSortDropdownClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }
    setOpen(false);
  };

  const prevOpen = useRef(open);

  useEffect(() => {
    db.collection("product").onSnapshot((snapshot) =>
      setProduct(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      )
    );

    if (prevOpen.current === true && open === false) {
      anchorRef.current.focus();
    }
    prevOpen.current = open;
    // eslint-disable-next-line
  }, []);

  const handleDota2 = () => {
    dispatch(loadGameName("Dota 2"));
    db.collection("product")
      .where("gameName", "==", "Dota 2")
      .onSnapshot((snapshot) =>
        setProduct(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  };

  const handleCsgo = () => {
    dispatch(loadGameName("Counter-Strike: Global Offensive"));
    db.collection("product")
      .where("gameName", "==", "Counter-Strike: Global Offensive")
      .onSnapshot((snapshot) =>
        setProduct(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  };

  return (
    <div className="store__productContainer">
      <div className="store__productHeader">
        <div className="productHeader__title">
          <StoreRoundedIcon />
          <p>Store</p>
        </div>
        <div className="productHeader__searchInput">
          <div className="searchInput__input">
            <input placeholder="Search Item" />
          </div>
          <div className="searchInput__inputSearchIcon">
            <SearchIcon />
          </div>
        </div>
        <div className="productHeader__filter">
          <div className="sort__byGame">
            <div className="sort__gameLogo" onClick={handleDota2}>
              <img
                src="https://1.bp.blogspot.com/-GplgZlvkXSc/Uk_3BipvAlI/AAAAAAAAAJE/NIU9Sm2vSVU/s1600/Dota2-Filled.png"
                alt=""
              />
            </div>
            <div className="sort__gameLogo" onClick={handleCsgo}>
              <img
                src="https://www.meme-arsenal.com/memes/d81f1fc73c38e2cfacbd493b5d58509c.jpg"
                alt=""
              />
            </div>
            {/*Rust Icon
            
            <div className="sort__gameLogo">
              <img src="https://i.imgur.com/znQvBMih.jpg" alt="" />
            </div>
            */}
          </div>
          <div className="button__sort">
            <button onClick={handleDropdown} ref={anchorRef}>
              Price
              <ArrowDropDownIcon />
            </button>
            {open ? (
              <ClickAwayListener onClickAway={handleSortDropdownClose}>
                <span className="filter__sort">
                  <div
                    className="filter__sortOption"
                    onClick={handleLowToHighSort}
                  >
                    Low
                  </div>
                  <div
                    className="filter__sortOption"
                    onClick={handleHighToLowSort}
                  >
                    High
                  </div>
                </span>
              </ClickAwayListener>
            ) : (
              ""
            )}
          </div>
        </div>
      </div>
      <div className="store__productList">
        {product.map((item) => (
          <StoreItem
            id={item.id}
            key={item.id}
            gameIcon={item.data.gameIcon}
            image={item.data.image}
            name={item.data.name}
            price={item.data.price}
            quantity={item.data.quantity}
            hero={item.data.hero}
            gameName={item.data.gameName}
            type={item.data.type}
            quality={item.data.quality}
            rarity={item.data.rarity}
          />
        ))}
      </div>
    </div>
  );
}

export default StoreSection;
<file_sep>import React, { useEffect, useRef, useState } from "react";
import { useHistory } from "react-router-dom";

//Redux and slices
import { useSelector, useDispatch } from "react-redux"; //A redux
import {
  loginName,
  loginPhoto,
  logoutName,
  logoutPhoto,
  notificationCount,
  notificationReset,
  selectUser,
  selectPhoto,
  selectNotification,
} from "../features/user/userSlice"; //Importing actions related to user
import {
  selectBalance,
  recharge,
  selectReward,
  balanceCut,
} from "../features/balance/balanceSlice"; //Importing actions related to balance

//Database
import { auth, provider } from "../CONFIG";
import db from "../CONFIG";
import firebase from "firebase";

//Component imports
import HeaderCenter from "./HeaderCenter";
import Backdrop from "./Backdrop";
import SideDrawer from "./SideDrawer";
import Notification from "./Notification";

//Css and other imports
import logo from "../logo.png";
import "./header.css";
import NumberFormat from "react-number-format";

//Material-UI imports
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { Avatar, ClickAwayListener, IconButton } from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import CloseIcon from "@material-ui/icons/Close";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";
import TransactionHistory from "./TransactionHistory";
import NotificationsNoneIcon from "@material-ui/icons/NotificationsNone";
//A material-ui Lab code for snackbar (it's imported from material-ui)
function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

function Header() {
  const history = useHistory(); //Routes
  const dispatch = useDispatch();
  const notificationCountValue = useSelector(selectNotification); //Notification count value
  const photo = useSelector(selectPhoto); //User photo
  const user = useSelector(selectUser); //User name
  const balance = useSelector(selectBalance); //User balance
  const reward = useSelector(selectReward); //User Reward Point
  const [sideDrawerToggle, setSideDrawerToggle] = useState(false); //Sidedrawer for mobile nav
  const [rechargeDialog, setRechargeDialog] = useState(false); //To open recharge dialog box....
  const [rechargeAmount, setRechargeAmount] = useState(); //To get user input recharge amount....
  const [transferDialog, setTransferDialog] = useState(false); //To open transfer dialog box....
  const [transferAmount, setTransferAmount] = useState(); //To get user input transfer amount....
  const [highTransferBalance, setHighTransferBalance] = useState(false); //Show error snackbar if user withdraws more amount than site balance
  const [profileDropdown, setProfileDropdown] = useState(false); //A dropdown menu when clicking userName on top right navbar.
  const [notificationDropdown, setNotificationDropdown] = useState(false); //A dropdown state of notification...
  const [tradeDialog, setTradeDialog] = useState(false); //Open set trade url dialog box
  const [tradeUrl, settradeUrl] = useState(); //To get user trade url
  const [transactionDialog, setTransactionDialog] = useState(false); // Open transaction history dialog

  //Function part---------------------------------------------------------------
  //Login function - Google Auth through firebase
  const handleLogin = async () => {
    auth
      .signInWithPopup(provider)
      .then((result) => {
        dispatch(loginName(result.user.displayName));
        dispatch(loginPhoto(result.user.photoURL));
      })
      .catch((error) => {
        console.log(error.message);
      });
  };

  //LogOut function
  const handleLogOut = () => {
    dispatch(logoutName(null));
    dispatch(logoutPhoto(null));
  };

  //Notification dropdown function
  const handleNotificationDropdown = (event) => {
    setNotificationDropdown((prevOpen) => !prevOpen);
    setProfileDropdown(false);
    dispatch(notificationReset());
  };

  //A function used for profile dropdown
  const handleProfileDropdown = (event) => {
    setProfileDropdown((prevOpen) => !prevOpen);
    setNotificationDropdown(false);
  };

  //A function to open trade Url dialog box
  const handleTradeUrl = () => {
    setTradeDialog(true);
  };
  //Trade Url dialog box close
  const handleTradeUrlClose = () => {
    setTradeDialog(false);
  };
  //Save button function
  const handleTradeUrlSuccess = () => {
    //Need to save the user input trade url in user's database....so some stuffs is need to be done later here..
    setTradeDialog(false);
  };

  //Recharge functions-----------------------------------
  //1: Recharge Dialog Box open
  const handleRecharge = () => {
    setRechargeDialog(true);
  };

  //Recharge dialogBox close
  const handleRechargeClose = () => {
    setRechargeDialog(false);
  };

  //Recharge balance proceed
  const handleRechargeSuccess = () => {
    dispatch(recharge(Number(rechargeAmount) || 0));
    dispatch(notificationCount());

    db.collection("notification").add({
      message: `Your steamBazar wallet has been credited for Rs: ${rechargeAmount} /-`,
      time: firebase.firestore.FieldValue.serverTimestamp(),
      image:
        "https://cdn1.iconfinder.com/data/icons/business-and-finance-97/64/wallet-money-finance-cash-dollar-512.png",
    });

    db.collection("transaction").add({
      date: firebase.firestore.FieldValue.serverTimestamp(),
      message: "Wallet Credited from Esewa",
      signBalance: true,
      costBalance: Number(rechargeAmount),
      walletBalance: Number(rechargeAmount) + Number(balance),
    });
    setRechargeDialog(false);
  };

  //Cash out transfer balance functions
  //1: Open cashout dialog box
  const handleTransfer = () => {
    setTransferDialog(true);
  };

  //2: Close cashout dialog box
  const handleTransferClose = () => {
    setTransferDialog(false);
  };

  //3: Cashout proceed function
  const handleTransferSuccess = () => {
    if (transferAmount > balance) {
      setHighTransferBalance(true);
    } else {
      dispatch(balanceCut(Number(transferAmount) || 0));
      dispatch(notificationCount());
      db.collection("notification").add({
        message: `A transfer from webpage to your Esewa has been made. Cashout value Rs: ${transferAmount} /-`,
        time: firebase.firestore.FieldValue.serverTimestamp(),
        image:
          "https://cdn3.iconfinder.com/data/icons/terminal-and-atm/100/ATM_terminal_pay_cash_out_cash_bank-07-512.png",
      });

      db.collection("transaction").add({
        date: firebase.firestore.FieldValue.serverTimestamp(),
        message: "Wallet cashout to Esewa",
        signBalance: false,
        costBalance: Number(transferAmount),
        walletBalance: Number(balance) - Number(transferAmount),
      });
    }
    setTransferDialog(false);
  };

  //4: Transaction history
  const handleTransaction = () => {
    setTransactionDialog(true);
  };

  //Mobile sideDrawer toggle functions----------------
  //1: Open sidedrawer
  const handleToggle = () => {
    setSideDrawerToggle(!sideDrawerToggle);
  };
  //2: Close sidedrawer
  const backdropClickHandler = () => {
    setSideDrawerToggle(false);
  };

  //UX functions snackbars--------------------------------
  //A function to pop up error snackbar
  const handleErrorSnackbar = () => {
    setHighTransferBalance(false);
  };

  //Close notification dropdown and user profile dropdown
  const anchorRef = useRef(null);
  const handleDropdownClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }
    setProfileDropdown(false);
    setNotificationDropdown(false);
    setTransactionDialog(false);
  };
  const prevOpen = useRef(profileDropdown);
  //End of function part------------------------------------------------------------------

  //The use effect-------------------------------------------------------------
  useEffect(() => {
    if (prevOpen.current === true && profileDropdown === false) {
      anchorRef.current.focus();
    }
    prevOpen.current = profileDropdown;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  //React Render----------------------------------------------------------------
  return (
    <div className="header">
      <div className="header__left" onClick={() => history.push("/")}>
        <img src={logo} alt="SteamBazar" />
      </div>

      <HeaderCenter />

      <div className="header__right">
        {/*If user is not logged in*/
        /* <a href="/auth/steam">Login with Steam</a> */}
        {!user ? (
          <img
            onClick={handleLogin}
            style={{ cursor: "pointer" }}
            src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/steamworks_docs/english/sits_small.png"
            alt="logo"
          />
        ) : (
          <>
            {/*If user is logged in */}
            <div
              className="header__accountLogo"
              onClick={handleNotificationDropdown}
            >
              <Avatar alt="Profile" src={photo} />
              {/*No new notification and new notification*/}
              {notificationCountValue === 0 ? (
                <div className="notification__countNull"></div>
              ) : (
                <div className="notification__count">
                  {notificationCountValue}
                </div>
              )}
            </div>
            {/*Notification drop down component part */}
            {notificationDropdown ? (
              <ClickAwayListener onClickAway={handleDropdownClose}>
                <div className="notification__container">
                  <div className="notification__header">Notifications</div>
                  <Notification />
                </div>
              </ClickAwayListener>
            ) : (
              ""
            )}
            {/*End of notification dropdown component part */}
            {/*Account name and balance display */}
            <div className="header__accountInfo">
              <div className="header__accountName">{user}</div>
              <div className="header__accountRpBalance">
                <div className="header__account">
                  <div className="header__accountBalance">
                    <div>
                      <NumberFormat
                        value={reward}
                        displayType="text"
                        thousandSeparator={true}
                        thousandsGroupStyle="lakh"
                      />
                    </div>
                    <p>Rp</p>
                  </div>
                </div>
                <div className="header__account">
                  <div className="header__accountBalance">
                    <div>
                      <NumberFormat
                        value={balance}
                        displayType="text"
                        thousandSeparator={true}
                        thousandsGroupStyle="lakh"
                        prefix={"Rs:"}
                        suffix={"/-"}
                      />
                    </div>
                    <p>Balance</p>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="header__accountDropdown"
              onClick={handleProfileDropdown}
              ref={anchorRef}
            >
              <ArrowDropDownIcon />
              {/*Profile dropdown part */}
              {profileDropdown ? (
                <ClickAwayListener onClickAway={handleDropdownClose}>
                  <div className="dropdown__menu">
                    <div className="dropdown__option" onClick={handleTradeUrl}>
                      Set Trade URL
                    </div>
                    <div className="dropdown__option" onClick={handleRecharge}>
                      Recharge Balance
                    </div>
                    <div className="dropdown__option" onClick={handleTransfer}>
                      Withdraw Balance
                    </div>
                    <div
                      className="dropdown__option"
                      onClick={handleTransaction}
                    >
                      Transaction History
                    </div>
                    <div className="dropdown__option" onClick={handleLogOut}>
                      Log Out
                    </div>
                  </div>
                </ClickAwayListener>
              ) : (
                ""
              )}
            </div>
          </>
        )}
      </div>
      {/*Mobile view toggle option */}
      <div className="header__mobile">
        <div
          className="header__mobileNotification"
          onClick={handleNotificationDropdown}
        >
          <NotificationsNoneIcon />
          {/*No new notification and new notification*/}
          {notificationCountValue === 0 ? (
            <div className="notification__countNull"></div>
          ) : (
            <div className="notification__countMobile">
              {notificationCountValue}
            </div>
          )}
        </div>
        {/*Notification drop down component part */}
        {notificationDropdown ? (
          <ClickAwayListener onClickAway={handleDropdownClose}>
            <div className="notification__container">
              <div className="notification__header">Notifications</div>
              <Notification />
            </div>
          </ClickAwayListener>
        ) : (
          ""
        )}
        {/*End of notification dropdown component part */}

        <div className="header__toggle" onClick={handleToggle}>
          <IconButton>
            {sideDrawerToggle ? <CloseIcon /> : <MenuIcon />}
          </IconButton>
          <SideDrawer
            show={sideDrawerToggle}
            handleLogin={handleLogin}
            handleLogOut={handleLogOut}
          />
          {sideDrawerToggle ? (
            <Backdrop backdropClickHandler={backdropClickHandler} />
          ) : (
            ""
          )}
        </div>
      </div>

      {/*Starting of header function dialog box */}

      {/*Trade Url dialog box */}
      <Dialog
        open={tradeDialog}
        onClose={handleTradeUrlClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title" className="balance__title">
          Enter your trade URL
        </DialogTitle>
        <DialogContent className="tradeUrl__content">
          <div className="trade__message">
            We need to know your Trade URL so our site can send you trade offer
            requests.
          </div>
          <div className="tradeUrl__input">
            <input
              placeholder="Trade URL"
              type="text"
              value={tradeUrl}
              onChange={(e) => settradeUrl(e.target.value)}
            />
          </div>
          <div className="tradeUrl__guide">
            " Steps to find your steam Trade Url "
            <ol>
              <li>
                Go to your steam inventory and click "Trade Offers" button.
              </li>
              <li>
                After that, click on "Who can send me Trade Offers?" button.
              </li>
              <li>
                You'll see 3 options : "Friends", "Trading Forums" and
                "Third-Party Sites".
              </li>
              <li>
                Copy Trade URL from Third-Party Sites option and paste it here.
              </li>
              <li>
                Your Trade Url looks something like this :
                https://steamcommunity.com/tradeoffer/new/?partner="number"&token="words"
              </li>
              <li>Click "Save".</li>
            </ol>
          </div>
        </DialogContent>
        <DialogActions>
          <button
            onClick={handleTradeUrlClose}
            className="button__rechargeCancel"
          >
            Cancel
          </button>
          <button onClick={handleTradeUrlSuccess} className="button__recharge">
            Save
          </button>
        </DialogActions>
      </Dialog>

      {/*Recharge balance dialog box */}
      <Dialog
        open={rechargeDialog}
        onClose={handleRechargeClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title" className="balance__title">
          Filling up the balance
        </DialogTitle>
        <DialogContent>
          <div className="balance__input">
            <input
              placeholder="Enter amount (Rs)"
              type="number"
              value={rechargeAmount}
              onChange={(e) => setRechargeAmount(e.target.value)}
            />
          </div>
        </DialogContent>
        <DialogActions>
          <button
            onClick={handleRechargeClose}
            className="button__rechargeCancel"
          >
            Cancel
          </button>
          <button onClick={handleRechargeSuccess} className="button__recharge">
            Recharge
          </button>
        </DialogActions>
      </Dialog>

      {/*Cashout balance dialog box */}
      <Dialog
        open={transferDialog}
        onClose={handleTransferClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title" className="balance__title">
          Cashout
        </DialogTitle>
        <DialogContent>
          <div className="balance__input">
            <input
              placeholder="Enter amount (Rs)"
              type="number"
              value={transferAmount}
              onChange={(e) => setTransferAmount(e.target.value)}
            />
          </div>
        </DialogContent>
        <DialogActions>
          <button
            onClick={handleTransferClose}
            className="button__rechargeCancel"
          >
            Cancel
          </button>
          <button onClick={handleTransferSuccess} className="button__recharge">
            Transfer
          </button>
        </DialogActions>
      </Dialog>

      {/*Transaction History Dialog box */}
      <Dialog
        fullScreen
        open={transactionDialog}
        onClose={handleDropdownClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title" className="transaction__historyTop">
          <div className="transaction__title">
            {`${user}'s Transaction History`}
            <CloseIcon onClick={handleDropdownClose} />
          </div>
        </DialogTitle>
        <DialogContent>
          <TransactionHistory />
        </DialogContent>
      </Dialog>

      {/*Error snackbar when user input higher cashout value than available balance */}
      <Snackbar
        open={highTransferBalance}
        autoHideDuration={6000}
        onClose={handleErrorSnackbar}
        anchorOrigin={{
          horizontal: "center",
          vertical: "top",
        }}
      >
        <Alert onClose={handleErrorSnackbar} severity="error">
          Transfer failed!!! Transfer amount is higher than your balance.
        </Alert>
      </Snackbar>
    </div>
  );
}

export default Header;
<file_sep>import React from "react";
import "./transactionDetail.css";
import NumberFormat from "react-number-format";

function TransactionDetail({
  date,
  message,
  costRP,
  costBalance,
  signRP,
  signBalance,
  walletRP,
  walletBalance,
}) {
  return (
    <div>
      <div className="transaction__historyDetail">
        <div className="transaction__historyDate">
          {new Date(date?.toDate()).toLocaleDateString()}
        </div>
        <div className="transaction__historyDescription">{message}</div>
        <div className="transaction__costRP">
          <NumberFormat
            value={costRP}
            displayType="text"
            prefix={`${signRP ? "+" : "-"}`}
          />
        </div>
        <div className="transaction__costBalance">
          <NumberFormat
            value={costBalance}
            displayType="text"
            thousandSeparator={true}
            thousandsGroupStyle="lakh"
            prefix={`${signBalance ? "+" : "-"}Rs: `}
            suffix={" /-"}
          />
        </div>
        <div className="transaction__remainingRP">
          <NumberFormat value={walletRP} displayType="text" />
        </div>
        <div className="transaction__remainingBalance">
          <NumberFormat
            value={walletBalance}
            displayType="text"
            thousandSeparator={true}
            thousandsGroupStyle="lakh"
            prefix={"Rs: "}
            suffix={" /-"}
          />
        </div>
      </div>
    </div>
  );
}

export default TransactionDetail;
<file_sep>import React from "react";
import "./App.css";
import Header from "./Header/Header";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import StoreMarket from "./StoreMarket/StoreMarket";
import Store from "./Store/Store";
import Inventory from "./Inventory/Inventory";
import Sell from "./sell/Sell";
import CommunityMarket from "./Community/CommunityMarket";
import CommunitySelectItem from "./Community/CommunitySelectItem";
import LiveData from "./LiveData/LiveData";

function App() {
  return (
    <div className="app">
      <Router>
        <LiveData />
        <Header />
        <Switch>
          <Route exact path="/store">
            <Store />
          </Route>
          <Route exact path="/community">
            <CommunityMarket />
          </Route>
          <Route path="/community/:name" children={<CommunitySelectItem />} />
          <Route exact path="/inventory">
            <Inventory />
          </Route>
          <Route exact path="/sell">
            <Sell />
          </Route>
          <Route exact path="/">
            <StoreMarket />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;
<file_sep>import React, { useEffect, useState } from "react";

//Redux and slices
import { useDispatch } from "react-redux";
import { loadGameName } from "../features/product/productSlice";

//DB import
import db from "../CONFIG"; //Database import firebase firestore
//import axios from "../axios"; //Local axios that we created--because we need to connect to our backend...which we have set in axios.js file...

//Material-UI imports
import StoreRoundedIcon from "@material-ui/icons/StoreRounded";
import SearchIcon from "@material-ui/icons/Search";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ExpandLessIcon from "@material-ui/icons/ExpandLess";

//Component Import
import StoreBotItem from "./StoreBotItem";

//Css import
import "./store.css";

function StandardStore() {
  const dispatch = useDispatch();
  const [storeItem, setStoreItem] = useState([]); //All object type items of the bot account in a array....
  const [sort, setSort] = useState(false); //Price sorting

  //Use effect hook--------------------
  useEffect(() => {
    //Here we tried to get data from mongo db which we connect through express.
    /* async function fetchProduct() {
      const request = await axios.get("/store/product");
      setStoreItem(request.data);
    }
    fetchProduct(); */

    //this is fetching data from firebase
    db.collection("product").onSnapshot((snapshot) =>
      setStoreItem(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      )
    );
  }, []);

  //console.log(storeItem);

  //Price sorting
  const sortPrice = () => {
    setSort(!sort);
    sort
      ? storeItem.sort((first, second) => {
          return first.data.price - second.data.price;
        })
      : storeItem.sort((first, second) => {
          return second.data.price - first.data.price;
        });
  };

  //Game sorting----------------------
  //Dota2
  const handleDota2 = () => {
    dispatch(loadGameName("Dota 2"));
    db.collection("product")
      .where("gameName", "==", "Dota 2")
      .onSnapshot((snapshot) =>
        setStoreItem(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  };
  //Csgo
  const handleCsgo = () => {
    dispatch(loadGameName("Counter-Strike: Global Offensive"));
    db.collection("product")
      .where("gameName", "==", "Counter-Strike: Global Offensive")
      .onSnapshot((snapshot) =>
        setStoreItem(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        )
      );
  };
  //Function invoked when clicking "Store in secondary navbar(navbar of body container)"
  const resetFilter = () => {
    db.collection("product").onSnapshot((snapshot) =>
      setStoreItem(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      )
    );
  };

  return (
    <div className="store">
      <div className="storeHeader">
        <div className="storeHeader__left" onClick={resetFilter}>
          <StoreRoundedIcon />
          <p>Store</p>
        </div>

        <div className="storeHeader__center">
          <div className="filterByGame" onClick={handleDota2}>
            <img
              src="https://1.bp.blogspot.com/-GplgZlvkXSc/Uk_3BipvAlI/AAAAAAAAAJE/NIU9Sm2vSVU/s1600/Dota2-Filled.png"
              alt=""
            />
            <div className="gameTitle">Dota2</div>
          </div>
          <div className="filterByGame" onClick={handleCsgo}>
            <img
              src="https://www.meme-arsenal.com/memes/d81f1fc73c38e2cfacbd493b5d58509c.jpg"
              alt=""
            />
            <div className="gameTitle">CSGO</div>
          </div>
          <div className="filterByPrice" onClick={sortPrice}>
            <p>Price</p>
            {sort ? <ExpandMoreIcon /> : <ExpandLessIcon />}
          </div>
        </div>

        <div className="storeHeader__right">
          <div className="searchBox">
            <input placeholder="search item" />
          </div>
          <div className="search__icon">
            <SearchIcon />
          </div>
        </div>
      </div>
      <div className="storeBody">
        {storeItem.map((item) => (
          <StoreBotItem
            id={item.id}
            key={item.id}
            image={item.data.image}
            name={item.data.name}
            price={item.data.price}
            hero={item.data.hero}
            gameIcon={item.data.gameIcon}
            gameName={item.data.gameName}
            type={item.data.type}
            rarity={item.data.rarity}
            quality={item.data.quality}
          />
        ))}
      </div>
    </div>
  );
}

export default StandardStore;
