Ant design menu recursion function

const subMenuItems = (items) => {

    return items?.map((menu) => {

      return menu?.childMenus.length

        ? getItem(menu.name, menu.name, subMenuItems(menu?.childMenus))

        : getItem(

            <HashLink

              to={menu.URL}

              onClick={() => {

                if (

                  menu.name.toLowerCase() == MENU_TEXT.OFFERINGS.toLowerCase()

                ) {

                  removeOfferingFilter();

                } else if (

                  menu.name.toLowerCase() == MENU_TEXT.IPOS.toLowerCase()

                ) {

                  removeIpoFilter();

                }

              }}
            >
              {menu.name}

            </HashLink>,

            menu.name

          );

    });

  };

import { useEffect, useState } from "react";
import { Row, Col, Card, Skeleton, Statistic } from "antd";
import CardRow from "../../components/CardRow";
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
} from "@ant-design/icons";

const { Meta } = Card;

const Workplace = () => {
  const [info, setInfo] = useState(null);

  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      fetch("http://localhost:3005/results")
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          setInfo(data);
          setLoading(false);
        });
    }, 1000);
  }, []);
  return (
    <div className="import-container">
      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
        {isLoading && (
          <Col span={8} className="gutter-row">
            <Card
              className="campaign-card-row"
              hoverable={true}
              style={{ marginBottom: "10px" }}
            >
              <Skeleton loading={isLoading} active>
                <div className="campaign-card-title">
                  <span>{"Silly"}</span>
                </div>
                <Statistic value={30000} prefix={"$"} />
              </Skeleton>
            </Card>
          </Col>
        )}
        {info && <CardRow info={info} />}
        {/* conditional templating:: only if data is true, will the cardrow output */}
      </Row>
    </div>
  );
};

export default Workplace;

import { Row, Col, Card, Statistic } from "antd";

const CardRow = ({ info }) => {
  return (
    <>
      {info.map((n) => (
        <Col key={n.key} className="gutter-row" span={8}>
          <Card
            className="campaign-card-row"
            hoverable={true}
            style={{ marginBottom: "10px" }}
          >
            <div className="campaign-card-title">
              <span>{n.name}</span>
            </div>
            <Statistic value={n.salary} prefix={"$"} />
          </Card>
        </Col>
      ))}
    </>
  );
};

export default CardRow;

import React from "react";
import { Col, Card, Row, Statistic } from "antd";

class Workplace extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      DataisLoaded: false,
    };
  }

  componentDidMount() {
    fetch("http://localhost:3005/results")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          items: json,
          DataisLoaded: true,
        });
      });
  }

  render() {
    const { DataisLoaded, items } = this.state;
    if (!DataisLoaded) return <div>Give me time</div>;

    return (
      <div className="import-container">
        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
          
        </Row>
      </div>
    );
  }
}

export default Workplace;

import { Pagination } from "antd";

const [currentPage, setCurrentPage] = useState(1);
  const [itemPerPage, setItemPerPage] = useState(25);

const indexOfLastItem = currentPage * itemPerPage;
  const indexOfFirstItem = indexOfLastItem - itemPerPage;
  const currentItem = users.slice(indexOfFirstItem, indexOfLastItem);

//IMP. NOTE {(curretitem.map)map also run by curretitem}

    <Pagination
                total={users.length}
                current={currentPage}
                pageSize={itemPerPage}
                onChange={(currentPage) => setCurrentPage(currentPage)}
              />

.sqs-announcement-bar {
  padding: 10px;
}

.sqs-announcement-bar {

  overflow: hidden;

}

.sqs-announcement-bar-text {

  -moz-transform: translateX(100%);

  -webkit-transform: translateX(100%);

  transform: translateX(100%);

  -moz-animation: scroll 15s linear infinite;

  -webkit-animation: scroll 15s linear infinite;

  animation: scroll 15s linear infinite;

}

@-moz-keyframes scroll {

  from { -moz-transform: translateX(100%); }

  to { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes scroll {

  from { -webkit-transform: translateX(100%); }

  to { -webkit-transform: translateX(-100%); }

}

@keyframes scroll {

  from {

    -moz-transform: translateX(100%);

    -webkit-transform: translateX(100%);

    transform: translateX(100%);

  }

  to {

    -moz-transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    transform: translateX(-100%);

  }

}

.sqs-announcement-bar-close {display:none}

.sqs-announcement-bar-text a {
    text-decoration: none !important;
}

// Color Animated Announcement Bar //

[data-header-theme] .sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: linear-gradient(99deg,#0d7d88,#708090,#add8e6);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 6s ease infinite;
  -moz-animation: AnimationName 6s ease infinite;
  animation: AnimationName 6s ease infinite;
}

// Animation Keyframes - Do Not Edit or Delete //

@-webkit-keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@-moz-keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@-webkit-keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

@-moz-keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

@keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

  @IBOutlet weak var barChartView: BarChartView!

 var productTypes = ["Aluminum Cans", "Plastic Bottles", "Paper Waste"]
 var productsCountArray = [Int]()

// viewDidLoad

   setBarChartView()   

// MARK: Chart View

extension FootPrintViewController {
 
    func setBarChartView() {
        productsCountArray.append(HomeViewController.aluminumItemRecycled)
        productsCountArray.append(HomeViewController.plasticBottleRecycled)
        productsCountArray.append(HomeViewController.otherItemsCount)
        
        
        barChartView.gridBackgroundColor = UIColor.clear
//        productsCountArray = [10, 12, 9]
        
        barChartView.drawValueAboveBarEnabled = true
        barChartView.animate(yAxisDuration: 1)
        
        barChartView.xAxis.granularity = 1
        barChartView.pinchZoomEnabled = true
        barChartView.drawBarShadowEnabled = false
        barChartView.drawBordersEnabled = false
        barChartView.doubleTapToZoomEnabled = false
        barChartView.drawGridBackgroundEnabled = true
        
        setBarChartData()
    }
    
    func setBarChartData() {
        barChartView.noDataText = "No Data available for Chart"
        
        barChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values:productTypes)

        barChartView.leftAxis.granularity = 1
        barChartView.rightAxis.granularity = 1

        var dataEntries: [BarChartDataEntry] = []
        for i in 0..<productTypes.count {
           let dataEntry = BarChartDataEntry(x: Double(i), y: Double(productsCountArray[i]))
           dataEntries.append(dataEntry)
        }
        
        
        let chartDataSet = BarChartDataSet(entries: dataEntries, label: "Bar Chart")
        chartDataSet.colors = [.systemGreen, .red , .systemBlue]
        
        
        
        let chartData = BarChartData(dataSet: chartDataSet)
        barChartView.data = chartData
    }
}

  const getMovies = async (url) => {
    setError(null);
    try {
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error("Something went wrong!");
      }

      const data = await response.json();
      
      if (data.results.length === 0) {
        throw new Error("Sorry, no movies were found.");
      }
      
      const transformedMovies = data.results.map((movie) => {
        return {
          id: movie.id,
          title: movie.title,
          description: movie.overview,
          rating: movie.vote_average,
          genres: movie.genre_ids,
          poster_path: movie.poster_path,
          backdrop_path: movie.backdrop_path,
          year: movie.release_date
        }
      })
      setTotalPages(data.total_pages);
      setMovies(transformedMovies);
      chooseMovie(transformedMovies);
    } catch (errorThrown) {
      setError(errorThrown.message);
    }
  }

  def search
    baseurl = "https://api.themoviedb.org/3/discover/movie?api_key=#{ENV['REACT_APP_TMDB_API_KEY']}&language=en-						US&sort_by=popularity.desc&with_watch_monetization_types=flatrate&include_adult=false&include_video		=false&page=${moviePageIndex}";
    urladdon = params[:urlAddon]

    require 'uri'
    require 'net/http'

    uri = URI("#{baseurl}#{urladdon}")
    res = Net::HTTP.get_response(uri)

    if res.is_a?(Net::HTTPSuccess)
      render json: res.body
    else
      render json: res.body, status: :bad_request
    end
  end

const rootDomElement: any = document.getElementById('root');
const newBlock = (
      <div>
        <p>The New Content</>
      </div>
  );
ReactDOM.createPortal(newBlock, rootDomElement);


// you can return it too
// return ReactDOM.createPortal(PDFPopup, RootDomElement);