Startup profile front end code

profile.js

import React, { useEffect, useRef, useState } from "react";
import Avatar from "@mui/material/Avatar";
import Axios from "axios";
import { toast } from "react-toastify";
import axios from "axios";
import { useAuth } from "../../../../Utils/Auth";
import { useHistory, useLocation } from "react-router-dom";
import NotesModal from "../../Notes/CreateModal";
import countries from "../../UserMap/countries.json";
import Keywords from "../ProfileComponents/KeywordsBlock";
import NewsBlock from "../ProfileComponents/NewsBlock";
// import Tweets from "../ProfileComponents/TweetsBlock";
import ProfilePitchdeck from "../ProfileComponents/Pitchdecks";
// import WebTech from "../ProfileComponents/WebTech";
// import TechIcon from "../../../../components/Icons/tech";
import Loader from "../../../../components/Loader";
import Listcomponent from "./ListModal";
import { IconButton, Popover } from "@mui/material";
import NewsData from "../ProfileComponents/NewsData";
import Employee from "../ProfileComponents/Employee";
import EmpCard from "../ProfileComponents/EmpCard";
import CompareIcon from "../Icons/CompareIcon";
import CollectionIcon from "../Icons/CollectionIcon";
import WebsiteIcon from "../Icons/WebsiteIcon";
import ConnectIcon from "../Icons/ConnectIcon";
import { InvitedIcon } from "../Icons/InvitedIcon";
import ChatIcon from "../Icons/ChatIcon";
import AcceptIcon from "../Icons/AcceptIcon";
import BackIcon from "../../../../components/Icons/BackIcon";
import NoDataBlock from "../NoDataBlock";
import ViewPitchDeck from "../ProfileComponents/ViewPitchDeck";
import Timeline from "../ProfileComponents/Timeline";
import TimeLineIcon from "../Icons/TimeLineIcon";
import ProductsIcon from "../Icons/ProductsIcon";
import AcquisitionIcon from "../Icons/AcquisitionIcon";
import PatentsIcon from "../Icons/PatentsIcon";
import Acquisition from "../ProfileComponents/Acquisition";
import Patents from "../ProfileComponents/Patents";
import HighlightIcon from "../Icons/HighlightIcon";
import HighLights from "../ProfileComponents/HighLights";
import FundingIcon from "../Icons/FundingIcon";
import Funding from "../ProfileComponents/Funding";
import PitchdeckIcon from "../Icons/PitchdeckIcon";
import Products from "../ProfileComponents/Products";
import CompeitorsIcon from "../Icons/CompeitorsIcon";
import Competitors from "../ProfileComponents/Competitors";
import NewsIcon from "../Icons/NewsIcon";
import EmployeeIcon from "../Icons/EmployeeIcon";
import KeywordsIcon from "../Icons/KeywordsIcon";
import Patent2 from "../ProfileComponents/Patent2";
import TeamsIcon from "../Icons/TeamsIcon";
import Teams from "../ProfileComponents/Teams";
import { useMediaQuery } from "react-responsive";
import { toastResponseError } from "../../../../Utils/toastResponseError";
// import GeneralDetails from "../../"
export default function Startupprofile() {
  function useQuery() {
    return new URLSearchParams(useLocation().search);
  }
  const isMobile = useMediaQuery({
    query: "(max-width: 600px)",
  });
  const isMobileOrTab = useMediaQuery({
    query: "(max-width: 768px)",
  });
  const query = useQuery();
  var queryid = query.get("id");

  const [gi, setgi] = useState(1);

  const genRef = useRef();
  const highlightRef = useRef();
  const funRef = useRef();
  const emplRef = useRef();
  const newsRef = useRef();
  const tweetRef = useRef();
  const keyRef = useRef();
  const pdRef = useRef();
  const webRef = useRef();
  const compRef = useRef();
  const timelineRef = useRef();
  const productRef = useRef();
  const acquisitionRef = useRef();
  const patentRef = useRef();
  const teamsRef = useRef();

  const HandleSelectRef = (index) => {
    if (index === 1) {
      genRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 2) {
      highlightRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 3) {
      funRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 4) {
      webRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 5) {
      emplRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 6) {
      newsRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 7) {
      tweetRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 8) {
      keyRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 9) {
      pdRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 10) {
      compRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 11) {
      timelineRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 12) {
      productRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 13) {
      acquisitionRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 14) {
      patentRef.current.scrollIntoView({ behavior: "smooth" });
    }
    if (index === 15) {
      teamsRef.current.scrollIntoView({ behavior: "smooth" });
    }
  };

  const { user, setSessionExpire, setsTab, setsTabL, settTab } = useAuth();
  const history = useHistory();

  const [NoteId, setNoteId] = useState(null);
  const [note, setNote] = useState(null);
  const [openModal, setOpenModal] = useState(false);
  const [patentData, setPatentData] = useState([]);
  const [formdData, setFormdData] = useState([]);
  const [p_table, setP_table] = useState([]);
  const [isPat1, setIsPat1] = useState(false);

  // const handleOpen = () => {
  //   setOpenModal(true);
  // };

  const fetchNote = async (startupId) => {
    await Axios.get(
      `${process.env.REACT_APP_baseURL}/api/gdnotes/get/by-startup/` + startupId
    )
      .then((res) => {
        if (res.data.success === true) {
          setNoteId(res.data.notes._id);
          setNote(res.data.notes);
        }
      })
      .catch((err) => {
        toastResponseError(err, setSessionExpire);
      });
  };

  useEffect(() => {
    if (NoteId === null) {
      fetchNote(queryid);
    }
  }, [NoteId]);

  // const deleteNote = async (NoteId) => {
  //   await Axios.delete(`${process.env.REACT_APP_baseURL}/api/gdnotes/` + NoteId)
  //     .then((res) => {
  //       if (res.data.success === true) {
  //         console.log("DELETED: ");
  //         setNote(null);
  //         setNoteId(null);
  //       }
  //     })
  //     .catch((err) => {
  //       toast.error(err.response.data.message, { position: "bottom-right" });
  //     });
  // };

  // const editNote = () => {
  //   handleOpen();
  // };

  const [startupData, seStarupData] = useState(null);
  const [startupExtraData, setstartupExtraData] = useState(null);
  const [connection, setconnection] = useState(null);
  const [step, setStep] = useState(0);

  const getData = async (id) => {
    await Axios({
      method: "get",
      url: `${process.env.REACT_APP_baseURL}/api/gd/by-id/${id}`,
    })
      .then((res) => {
        seStarupData(res.data.data[0]);
        // if (res.data.data[0].patent_data2 || res.data.data[0].patent_data) {
        //   if (
        //     res.data.data[0].patent_data2.length === 0 &&
        //     res.data.data[0].patent_data
        //   ) {
        //     setPatentData(res.data.data[0].patent_data);
        //     setIsPat1(true);
        //   } else if (res.data.data[0].patent_data2.length > 0) {
        //     setPatentData(res.data.data[0].patent_data2);
        //     setIsPat1(false);
        //   }

        // }
        setconnection(res.data.connection);
      })
      .catch((err) => {
        toastResponseError(err, setSessionExpire);
      });
  };

  const getPatentsData = async () => {
    await Axios({
      method: "get",
      url: `${process.env.REACT_APP_baseURL}/api/gd/gd-patents?CompanyName=${startupData.CompanyName}&golden_id=${startupData.golden_id}&website=${startupData.WebsiteDomain}&&city=${startupData.City}`,
    })
      .then((res) => {
        setstartupExtraData(res.data.data);
        if (res.data.data.formd_d.length > 0) {
          setFormdData(res.data.data?.formd_d[0]?.f_table);
          setP_table(res.data.data?.formd_d[0]?.p_table);
        }
        if (res.data.data.patent_data2 || res.data.data.patent_data) {
          if (
            (Object.keys(res.data.data.patent_data2).length === 0 ||
              res.data.data.patent_data2.length === 0) &&
            res.data.data.patent_data
          ) {
            setPatentData(res.data.data.patent_data);
            setIsPat1(true);
          } else if (res.data.data.patent_data2.length > 0) {
            setPatentData(res.data.data.patent_data2);
            setIsPat1(false);
          }
        }
      })
      .catch((err) => {
        toastResponseError(err, setSessionExpire);
      });
  };

  useEffect(() => {
    if (queryid) {
      getData(queryid);
    }
  }, [queryid]);

  useEffect(() => {
    if (startupData) {
      getPatentsData();
      setsTab("Global Startups");
      setsTabL("step=1");
      settTab(startupData.CompanyName);
    }
  }, [startupData]);

  const goToChats = () => {
    history.push(`/dashboard/${user?.type}?tab=12`);
  };

  const [sentRequest, setsentRequest] = useState(false);
  const handleConnect = async (id) => {
    await Axios({
      url: `${process.env.REACT_APP_baseURL}/api/connect`,
      method: "post",
      data: { id },
    })
      .then(() => {
        toast.success("Request sent");
        setsentRequest(true);
      })
      .catch((err) => {
        toastResponseError(err, setSessionExpire);
      });
  };
  const [acceptRequest, setacceptRequest] = useState(false);

  const handleAccept = async (id) => {
    await Axios({
      method: "POST",
      url: `${process.env.REACT_APP_baseURL}/api/connect/accept`,
      data: {
        receiverID: id,
      },
    })
      .then(() => {
        toast.success("Request accepted");
        setacceptRequest(true);
      })
      .catch((err) => {
        toastResponseError(err, setSessionExpire);
      });
  };
  const [isInvited, setisInvited] = useState(false);
  const handleInvite = async (id) => {
    await Axios({
      url: `${process.env.REACT_APP_baseURL}/api/gd/invite`,
      method: "post",
      data: {
        gd_id: id,
      },
    })
      .then((res) => {
        if (res.data.success) {
          toast.success("Invited");
        }
        setisInvited(true);
      })
      .catch((err) => {
        toastResponseError(err, setSessionExpire);
      });
  };

  const getCity = (location) => {
    if (location) {
      var arr = location.split(",")[0];
      return arr;
    } else return "";
  };
  const getCountry = (location) => {
    if (location) {
      var arr = location.split(",")[2];
      var arr2 = location.split(",")[1];
      if (arr) return arr.trim();
      else if (arr2) {
        return arr2.trim();
      } else return "";
    } else return "";
  };
  const getFlag = (country) => {
    var code = countries.filter((con) => {
      if (con.name === country) {
        return con.code;
      }
    });
    if (code && code[0]) return code[0].code;
    else return "";
  };
  const getFounder = (founders) => {
    if (founders) {
      var arr = founders.split(",")[0];
      return arr;
    } else return "";
  };
  const [employeesData, setemployeesData] = useState(null);
  const [newsData, setnewsData] = useState(null);
  const [keywords, setKeywords] = useState(null);
  // const [webtech, setwebtech] = useState(null);
  // const [webLoader, setwebLoader] = useState(false);

  const getApiData = async () => {
    if (startupData) {
      await axios({
        url: `${process.env.REACT_APP_baseURL}/api/gd/employee`,
        method: "post",
        data: { website: startupData.Website },
      })
        .then((res) => {
          if (res.data.success) setemployeesData(res.data.employeedata);
        })
        .catch((err) => {
          toastResponseError(err, setSessionExpire);
        });
      // setwebLoader(true);
      // await axios({
      //   url: "/api/gd/webtech",
      //   method: "post",
      //   data: { website: startupData.Website },
      // })
      //   .then((res) => {
      //     if (res.data.success) setwebtech(res.data.data);
      //     setwebLoader(false);
      //   })
      //   .catch((err) => {
      //     setwebLoader(false);
      //     if (err.response.status === 401) {
      //       setSessionExpire(true);
      //     }
      //   });
    }
  };

  const [myLists, setmyLists] = useState([]);
  const [type, settype] = useState("collection");
  const [anchorEl, setAnchorEl] = React.useState(null);
  const popopen = Boolean(anchorEl);
  const popid = popopen ? "simple-popover" : undefined;
  const handleClick = (event, v) => {
    setAnchorEl(event.currentTarget);
    settype(v);
  };
  const handlePopClose = () => {
    setAnchorEl(null);
  };
  const [listloading, setlistloading] = useState(false);
  const getcollections = async () => {
    setlistloading(true);
    await Axios({
      method: "get",
      url: `${process.env.REACT_APP_baseURL}/api/collection/mycollections/${type}/startups`,
    })
      .then((res) => {
        if (res.data.success) {
          setlistloading(false);
          setmyLists(res.data.userlists);
        }
      })
      .catch((err) => {
        toastResponseError(err, setSessionExpire);
      });
  };

  const [competitors, setcompetitors] = useState([]);
  const getCompetors = async () => {
    await Axios({
      method: "get",
      url: `${process.env.REACT_APP_baseURL}/api/gd/compitetors/${queryid}`,
    }).then((res) => {
      if (res.data && res.data.data) setcompetitors(res.data.data.competitor);
    });
    // .catch((err) => {
    //   toastResponseError(err, setSessionExpire);
    // });
  };

  useEffect(() => {
    getApiData();
  }, [startupData]);
  useEffect(() => {
    getcollections();
  }, [type]);
  useEffect(() => {
    if (queryid) {
      getCompetors();
    }
  }, [queryid]);

  const globalHeadRef = useRef();
  const globalHead2Ref = useRef();
  const globalHeadMax_heightRef = useRef();

  const handleMainScroll = () => {
    if (globalHeadRef.current && globalHead2Ref.current) {
      let scrollPos2 = globalHead2Ref.current.getBoundingClientRect();
      if (scrollPos2.top < 130) {
        globalHeadRef.current.classList.remove("gdHead_normal_width");
        globalHeadRef.current.classList.add("gdHead_full_width");
        globalHeadMax_heightRef.current.classList.remove("gdMax_width_1275");
        globalHeadMax_heightRef.current.classList.add("gdmax_width_100");
      } else {
        globalHeadRef.current.classList.remove("gdHead_full_width");
        globalHeadRef.current.classList.add("gdHead_normal_width");
        globalHeadMax_heightRef.current.classList.remove("gdmax_width_100");
        globalHeadMax_heightRef.current.classList.add("gdMax_width_1275");
      }
    }
  };

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setgi(Number(entry.target.id));
          }
        });
      },
      { threshold: 0.5 }
    );
    genRef.current && observer.observe(genRef.current);
    teamsRef.current && observer.observe(teamsRef.current);
    funRef.current && observer.observe(funRef.current);
    pdRef.current && observer.observe(pdRef.current);
    productRef.current && observer.observe(productRef.current);
    timelineRef.current && observer.observe(timelineRef.current);
    acquisitionRef.current && observer.observe(acquisitionRef.current);
    patentRef.current && observer.observe(patentRef.current);
    compRef.current && observer.observe(compRef.current);
    newsRef.current && observer.observe(newsRef.current);
    emplRef.current && observer.observe(emplRef.current);
    keyRef.current && observer.observe(keyRef.current);
    return () => {
      observer.disconnect();
    };
  }, [
    genRef.current,
    teamsRef.current,
    funRef.current,
    pdRef.current,
    productRef.current,
    timelineRef.current,
    acquisitionRef.current,
    patentRef.current,
    compRef.current,
    newsRef.current,
    emplRef.current,
    keyRef.current,
  ]);

  if (startupData) {
    return (
      <div className="gsd_startup_page01">
        <Popover
          id={popid}
          open={popopen}
          anchorEl={anchorEl}
          onClose={handlePopClose}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left",
          }}
          className="vreportcardmain popOver-rootMain"
        >
          <Listcomponent
            listloading={listloading}
            startupData={startupData}
            handlePopClose={handlePopClose}
            myLists={myLists}
            type={type}
            datatype={"startups"}
            getcollections={getcollections}
          />
        </Popover>
        <div
          className="pos_sticky_0 d-flex justify-content-center gdHead_normal_width"
          ref={globalHeadRef}
        >
          {/* <div className=""> */}
          <div
            className="gdMax_width_1275 gdtool_startupProfile_block d-flex align-items-center justify-content-center"
            ref={globalHeadMax_heightRef}
          >
            <div
              className={`max_width_1275 ${
                isMobile
                  ? "d-flex flex-column align-items-center justify-content-between"
                  : "d-flex align-items-center justify-content-between"
              } `}
            >
              <div
                className={`d-flex align-items-center startup_profile_gdLogo ${
                  !isMobile && "width_fit"
                } `}
              >
                <IconButton
                  className="trans_cta mr-lg-24 mr-md-24 mr-sm-24 mr-8 pointer width_fit"
                  onClick={() => {
                    step === 1 || step === 2 || step === 3
                      ? setStep(0)
                      : history.push(
                          `/dashboard/${user?.type}?tab=${
                            user?.type === "institute" ||
                            user?.type === "academiauser"
                              ? "4"
                              : user?.type === "startup"
                              ? "6"
                              : "2"
                          }&step=1`
                        );
                    settTab(null);
                  }}
                >
                  <BackIcon />
                </IconButton>
                <div className="d-flex align-items-center gd_head_left">
                  <Avatar
                    src={"https://logo.clearbit.com/" + startupData.Website}
                    sx={{ width: 48, height: 48, padding: 0 }}
                  >
                    {startupData.CompanyName[0]}
                  </Avatar>
                  <div className="ml-16 width_fit gd_head_leftProfile">
                    <p className="title2 mb-0">{startupData.CompanyName}</p>
                    <p
                      className={`${
                        isMobileOrTab
                          ? "caption color_grey_46 mb-0"
                          : "body1 color_grey_46 mb-0"
                      }`}
                    >
                      {startupData.Location}
                    </p>
                  </div>
                </div>
              </div>
              {isMobile && <div className="gd_right_Line mt-14"></div>}
              <div
                className={`gd_connection_CTA row_align col-md-5 col-12 ${
                  !isMobile && "width_fit"
                }`}
                style={{ marginLeft: "auto" }}
              >
                <div className="d-flex align-items-center gd_head_options1">
                  <NotesModal
                    NoteId={NoteId}
                    setNoteId={setNoteId}
                    note={note}
                    setNote={setNote}
                    openModal={openModal}
                    setOpenModal={setOpenModal}
                    isStartup={true}
                  />

                  <div className="mx-16 text-center p_button">
                    <span onClick={(e) => handleClick(e, "comparison")}>
                      <CompareIcon />
                    </span>
                    <p className="mb-0 mt-8 overline color_grey_46">Compare</p>
                  </div>
                  <div className="mx-16 text-center p_button">
                    <span onClick={(e) => handleClick(e, "collection")}>
                      <CollectionIcon />
                    </span>
                    <p className="mb-0 mt-8 overline color_grey_46">
                      Collection{" "}
                    </p>
                  </div>
                </div>
                <div className="d-flex align-items-center gd_head_options2">
                  <div className="mx-16 text-center p_button border-right gd_head_options_hr">
                    <hr />
                  </div>

                  <a
                    href={startupData.Website}
                    target="_blank"
                    rel="noreferrer"
                  >
                    <div className="mx-16 text-center p_button">
                      <WebsiteIcon />
                      <p className="mb-0 mt-8 overline color_grey_46">
                        Website
                      </p>
                    </div>
                  </a>

                  {startupData.isMember &&
                  startupData.id &&
                  startupData.id !== user.id ? (
                    <>
                      {!connection ? (
                        <>
                          {!sentRequest ? (
                            <div
                              className="mx-16 text-center p_button"
                              onClick={() => handleConnect(startupData.id)}
                            >
                              <ConnectIcon />
                              <p className="mb-0 mt-8 overline color_grey_46">
                                Connect
                              </p>
                            </div>
                          ) : (
                            <div className="mx-16 text-center p_button">
                              <InvitedIcon />
                              <p className="mb-0 mt-8 overline aqua2">
                                Invited
                              </p>
                            </div>
                          )}
                        </>
                      ) : (
                        <>
                          {connection.isAccepted ? (
                            <div
                              className="mx-16 text-center p_button"
                              onClick={() => goToChats(startupData.id)}
                            >
                              <ChatIcon />
                              <p className="mb-0 mt-8 overline color_grey_46">
                                Chat
                              </p>
                            </div>
                          ) : (
                            <>
                              {connection.sender === user.id ? (
                                <div className="mx-16 text-center p_button">
                                  <InvitedIcon />
                                  <p className="mb-0 mt-8 overline aqua2">
                                    Invited
                                  </p>
                                </div>
                              ) : (
                                <>
                                  {acceptRequest ? (
                                    <div
                                      className="mx-16 text-center p_button"
                                      onClick={() => goToChats(startupData.id)}
                                    >
                                      <ChatIcon />
                                      <p className="mb-0 mt-8 overline color_grey_46">
                                        Chat
                                      </p>
                                    </div>
                                  ) : (
                                    <div
                                      className="mx-16 text-center p_button"
                                      onClick={() =>
                                        handleAccept(startupData.id)
                                      }
                                    >
                                      <AcceptIcon />
                                      <p className="mb-0 mt-8 overline aqua2">
                                        Accept
                                      </p>
                                    </div>
                                  )}
                                </>
                              )}
                            </>
                          )}
                        </>
                      )}
                    </>
                  ) : (
                    <>
                      {isInvited ? (
                        <span className=" width_fit" disabled>
                          <div className="mx-16 text-center">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="24"
                              height="24"
                              fill="none"
                              viewBox="0 0 24 24"
                            >
                              <path
                                fill="#239F99"
                                d="M22.5 8.25a6.75 6.75 0 11-13.5 0 6.75 6.75 0 0113.5 0zm-3.219-2.781a.75.75 0 00-1.062 0l-3.969 3.97-.969-.97a.75.75 0 10-1.062 1.062l1.5 1.5a.75.75 0 001.062 0l4.5-4.5a.75.75 0 000-1.062zM15.75 16.5c1.35 0 2.625-.324 3.75-.9v3.9a3 3 0 01-3 3h-12a3 3 0 01-3-3v-6.995l8.645 4.655a.75.75 0 00.71 0l2.117-1.14c.869.31 1.803.48 2.778.48zM4.5 7.5h3.033a8.244 8.244 0 003.783 7.71l-.816.436-9-4.845V10.5a3 3 0 013-3z"
                              ></path>
                            </svg>
                            <p className="mb-0 mt-2 font10 aqua2">Invited</p>
                          </div>
                        </span>
                      ) : (
                        <span
                          className="width_fit p_button"
                          onClick={() => handleInvite(startupData._id)}
                        >
                          <div className="mx-16 text-center p_button">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="24"
                              height="24"
                              fill="none"
                              viewBox="0 0 24 24"
                            >
                              <path
                                fill="#404654"
                                d="M22.8 6.6a5.4 5.4 0 11-10.8 0 5.4 5.4 0 0110.8 0zM18 4.2a.6.6 0 10-1.2 0V6H15a.6.6 0 100 1.2h1.8V9A.6.6 0 1018 9V7.2h1.8a.6.6 0 000-1.2H18V4.2zm-.6 9c1.596 0 3.06-.567 4.2-1.51v5.71a3 3 0 01-3 3H5.4a3 3 0 01-3-3V8.846l9.297 5.47a.6.6 0 00.608 0l2.676-1.575c.77.303 1.591.458 2.42.457zm-12-8.4h5.649a6.595 6.595 0 002.682 7.286L12 13.103 2.417 7.467A3 3 0 015.4 4.799z"
                              ></path>
                            </svg>
                            <p className="mb-0 mt-2 font10">Invite</p>
                          </div>
                        </span>
                      )}
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
          {/* </div> */}
        </div>
        {step === 1 ? (
          <NewsData
            newsData={newsData}
            setnewsData={setnewsData}
            website={startupData.Website}
          />
        ) : step === 2 ? (
          <Employee employeesData={employeesData} />
        ) : step === 3 ? (
          <ViewPitchDeck
            deck={startupData.pitchdeck}
            companyName={startupData.CompanyName}
          />
        ) : (
          <div className="d-flex justify-content-center px-16">
            <div className="max_width_1275">
              <div className="row gd01_profile_data mt-24 justify-content-center">
                <div className="col-lg-3 col-0 ps-0 pe-3 gd01_profile_left_data">
                  <div className="dashboard01_block mt-0">
                    <p
                      className={`gd01_left_tab_item body1 color_grey_46 ${
                        gi === 1 ? "active_gd01" : ""
                      }`}
                      onClick={() => HandleSelectRef(1)}
                    >
                      <span>
                        <HighlightIcon cc={"inherit"} />
                      </span>{" "}
                      Highlights
                    </p>
                    {((startupExtraData &&
                      startupExtraData.org_data &&
                      startupExtraData.org_data.ceo) ||
                      p_table.length > 0) && (
                      <p
                        className={`gd01_left_tab_item body1 color_grey_46 ${
                          gi === 15 ? "active_gd01" : ""
                        }`}
                        onClick={() => HandleSelectRef(15)}
                      >
                        <span>
                          <TeamsIcon cc={"inherit"} />
                        </span>{" "}
                        Team
                      </p>
                    )}

                    <p
                      className={`gd01_left_tab_item body1 color_grey_46 ${
                        gi === 3 ? "active_gd01" : ""
                      }`}
                      onClick={() => HandleSelectRef(3)}
                    >
                      <span>
                        <FundingIcon cc={"inherit"} />
                      </span>{" "}
                      Funding
                    </p>
                    {startupData && startupData.pitchdeck ? (
                      <p
                        className={`gd01_left_tab_item body1 color_grey_46 ${
                          gi === 9 ? "active_gd01" : ""
                        }`}
                        onClick={() => HandleSelectRef(9)}
                      >
                        <span>
                          <PitchdeckIcon cc={"inherit"} />
                        </span>{" "}
                        Pitch Deck
                      </p>
                    ) : null}
                    {startupExtraData &&
                      startupExtraData.product_data &&
                      startupExtraData.product_data.length > 0 && (
                        <p
                          className={`gd01_left_tab_item body1 color_grey_46 ${
                            gi === 12 ? "active_gd01" : ""
                          }`}
                          onClick={() => HandleSelectRef(12)}
                        >
                          <span>
                            <ProductsIcon cc={"inherit"} />
                          </span>{" "}
                          Product
                        </p>
                      )}
                    {startupData.timelines && startupData.timelines.length > 0 && (
                      <p
                        className={`gd01_left_tab_item body1 color_grey_46 ${
                          gi === 11 ? "active_gd01" : ""
                        }`}
                        onClick={() => HandleSelectRef(11)}
                      >
                        <span>
                          <TimeLineIcon cc={"inherit"} />
                        </span>{" "}
                        Timeline
                      </p>
                    )}
                    {startupExtraData &&
                      startupExtraData.acquisition &&
                      startupExtraData.acquisition.length > 0 && (
                        <p
                          className={`gd01_left_tab_item body1 color_grey_46 ${
                            gi === 13 ? "active_gd01" : ""
                          }`}
                          onClick={() => HandleSelectRef(13)}
                        >
                          <span>
                            <AcquisitionIcon cc={"inherit"} />
                          </span>{" "}
                          Acquisitions
                        </p>
                      )}
                    {patentData.length > 0 && (
                      <p
                        className={`gd01_left_tab_item body1 color_grey_46 ${
                          gi === 14 ? "active_gd01" : ""
                        }`}
                        onClick={() => HandleSelectRef(14)}
                      >
                        <span>
                          <PatentsIcon cc={"inherit"} />
                        </span>{" "}
                        Patents
                      </p>
                    )}
                    <p
                      className={`gd01_left_tab_item body1 color_grey_46 ${
                        gi === 10 ? "active_gd01" : ""
                      }`}
                      onClick={() => HandleSelectRef(10)}
                    >
                      <span>
                        <CompeitorsIcon cc={"inherit"} />
                      </span>{" "}
                      Competitor
                    </p>
                    <p
                      className={`gd01_left_tab_item body1 color_grey_46 ${
                        gi === 6 ? "active_gd01" : ""
                      }`}
                      onClick={() => HandleSelectRef(6)}
                    >
                      <span>
                        <NewsIcon cc={"inherit"} />
                      </span>{" "}
                      News and Tweets
                    </p>
                    {(startupExtraData &&
                      startupExtraData.org_data &&
                      startupExtraData.org_data.ceo) ||
                    p_table.length > 0 ? (
                      <></>
                    ) : (
                      <p
                        className={`gd01_left_tab_item body1 color_grey_46 ${
                          gi === 5 ? "active_gd01" : ""
                        }`}
                        onClick={() => HandleSelectRef(5)}
                      >
                        <span>
                          <EmployeeIcon cc={"inherit"} />
                        </span>{" "}
                        Employees
                      </p>
                    )}

                    <p
                      className={`gd01_left_tab_item body1 color_grey_46 ${
                        gi === 8 ? "active_gd01" : ""
                      }`}
                      onClick={() => HandleSelectRef(8)}
                    >
                      <span>
                        <KeywordsIcon cc={"inherit"} />
                      </span>{" "}
                      Keywords
                    </p>
                  </div>
                </div>

                <div
                  className="col-lg-9 col-11 ps-2 pe-0 gd01_profile_scroll_div"
                  onScroll={() => handleMainScroll()}
                >
                  <div ref={globalHead2Ref}>
                    <div className="" ref={genRef} id="1">
                      <div className="gd_right_headLine">
                        <div className="d-flex align-items-center">
                          <span>
                            <HighlightIcon />
                          </span>
                          <p className="body2 ml-16 fw-6">Highlights</p>
                        </div>
                        <div className="gd_right_Line"></div>
                      </div>
                      <HighLights
                        startupData={startupData}
                        getCity={getCity}
                        getCountry={getCountry}
                        getFlag={getFlag}
                        getFounder={getFounder}
                        keywords={keywords}
                        employeesData={employeesData}
                      />
                    </div>
                    {((startupExtraData &&
                      startupExtraData.org_data &&
                      startupExtraData.org_data.ceo) ||
                      p_table.length > 0) && (
                      <div className="mt-50" ref={teamsRef} id="15">
                        <div className="gd_right_headLine">
                          <div className="d-flex align-items-center">
                            <span>
                              <TeamsIcon />
                            </span>
                            <p className="body2 ml-16 fw-6">Team</p>
                          </div>
                          <div className="gd_right_Line"></div>
                        </div>
                        <div className="mt-24">
                          <Teams
                            org={startupExtraData?.org_data}
                            p_table={p_table}
                          />
                        </div>
                      </div>
                    )}

                    <div ref={funRef} className="mt-50" id="3">
                      <div className="gd_right_headLine">
                        <div className="d-flex align-items-center">
                          <span>
                            <FundingIcon />
                          </span>
                          <p className="body2 ml-16 fw-6">Funding</p>
                        </div>
                        <div className="gd_right_Line"></div>
                      </div>
                      <Funding
                        startupData={startupData}
                        startupExtraData={startupExtraData}
                        formdData={formdData}
                      />
                    </div>
                    {startupData && startupData.pitchdeck && (
                      <div ref={pdRef} className="mt-50" id="9">
                        <div className="gd_right_headLine">
                          <div className="d-flex align-items-center">
                            <span>
                              <PitchdeckIcon />
                            </span>
                            <p className="body2 ml-16 fw-6">Pitch Deck</p>
                          </div>
                          <div className="gd_right_Line"></div>
                        </div>
                        <ProfilePitchdeck
                          deck={startupData.pitchdeck}
                          companyName={startupData.CompanyName}
                          setStep={setStep}
                        />
                      </div>
                    )}
                    {startupExtraData &&
                      startupExtraData.product_data &&
                      startupExtraData.product_data.length > 0 && (
                        <div ref={productRef} className="mt-50" id="12">
                          <div className="d-flex align-items-center justify-content-between">
                            <div className="gd_right_headLine">
                              <div className="d-flex align-items-center">
                                <span>
                                  <ProductsIcon />
                                </span>
                                <p className="body2 ml-16 fw-6">Products</p>
                              </div>
                              <div className="gd_right_Line"></div>
                            </div>
                            <p
                              className="body1 mb-0 pointer min_width_fit ml-16"
                              // onClick={() => setStep(2)}
                              // style={{ padding: "0 5px", margin: "24px 5px 0px" }}
                            >
                              View all
                            </p>
                          </div>
                          <Products
                            productsData={startupExtraData.product_data}
                          />
                        </div>
                      )}
                    {startupData.timelines && startupData.timelines.length > 0 && (
                      <div ref={timelineRef} className="mt-50" id="11">
                        <div className="gd_right_headLine">
                          <div className="d-flex align-items-center">
                            <span>
                              <TimeLineIcon cc={"#000000"} />
                            </span>
                            <p className="body2 ml-16 fw-6">Timeline</p>
                          </div>
                          <div className="gd_right_Line"></div>
                        </div>

                        <Timeline timelines={startupData.timelines} />
                      </div>
                    )}
                    {startupExtraData &&
                      startupExtraData.acquisition &&
                      startupExtraData.acquisition.length > 0 && (
                        <div ref={acquisitionRef} className="mt-50" id="13">
                          <div className="gd_right_headLine">
                            <div className="d-flex align-items-center">
                              <span>
                                <AcquisitionIcon />
                              </span>
                              <p className="body2 ml-16 fw-6">Acquisition</p>
                            </div>
                            <div className="gd_right_Line"></div>
                          </div>
                          <div className="mt-24">
                            <Acquisition
                              acquisitions={startupExtraData.acquisition}
                            />
                          </div>
                        </div>
                      )}
                    {patentData.length > 0 && (
                      <div ref={patentRef} className="mt-50" id="14">
                        <div className="gd_right_headLine">
                          <div className="d-flex align-items-center">
                            <span>
                              <PatentsIcon />
                            </span>
                            <p className="body2 ml-16 fw-6">Patents</p>
                          </div>
                          <div className="gd_right_Line"></div>
                        </div>
                        <div className="mt-24">
                          {isPat1 ? (
                            <Patent2 patentData={patentData} />
                          ) : (
                            <Patents patentData={patentData} />
                          )}
                        </div>
                      </div>
                    )}
                    <div ref={compRef} className="mt-50" id="10">
                      <div className="gd_right_headLine">
                        <div className="d-flex align-items-center">
                          <span>
                            <CompeitorsIcon />
                          </span>
                          <p className="body2 ml-16 fw-6">Competitors</p>
                        </div>
                        <div className="gd_right_Line"></div>
                      </div>

                      <Competitors competitors={competitors} />
                    </div>
                    <div className="mt-50">
                      <div ref={newsRef} id="6">
                        <div className="d-flex align-items-center justify-content-between">
                          <div className="gd_right_headLine">
                            <div className="d-flex align-items-center">
                              <span>
                                <NewsIcon />
                              </span>
                              <p
                                className="body2 ml-16 fw-6 min_width_fit"
                                style={{ width: 116 }}
                              >
                                News and Tweets
                              </p>
                            </div>
                            <div className="gd_right_Line"></div>
                          </div>

                          <p
                            className="body1 aqua mb-0 pointer min_width_fit ml-16"
                            onClick={() => setStep(1)}
                            // style={{ padding: "0 5px", margin: "24px 5px 0px" }}
                          >
                            See all News
                          </p>
                        </div>

                        <NewsBlock
                          newsData={newsData}
                          setnewsData={setnewsData}
                          website={startupData.Website}
                        />
                      </div>
                      {/* <div className="mt-24">
                        <p className="body2">
                          {startupData
                            ? startupData.CompanyName + "'s most recent tweets"
                            : ""}
                        </p>
                        <Tweets
                          companyName={startupData.CompanyName}
                          website={startupData.Website}
                          Twitter={startupData.Twitter}
                        />
                      </div> */}
                    </div>
                    {(startupExtraData &&
                      startupExtraData.org_data &&
                      startupExtraData.org_data.ceo) ||
                    p_table.length > 0 ? (
                      <></>
                    ) : (
                      <div ref={emplRef} className="mt-50" id="5">
                        <div className="d-flex align-items-center justify-content-between">
                          <div className="gd_right_headLine">
                            <div className="d-flex align-items-center">
                              <span>
                                <EmployeeIcon />
                              </span>
                              <p className="body2 ml-16 fw-6">Employees</p>
                            </div>
                            <div className="gd_right_Line"></div>
                          </div>

                          <p
                            className="body1 aqua mb-0 pointer ml-16 min_width_fit"
                            onClick={() => setStep(2)}
                          >
                            See all Employees
                          </p>
                        </div>
                        <div className="row mt-20 mx-0">
                          {employeesData && employeesData.length > 0 ? (
                            <>
                              {employeesData.slice(0, 3).map((emp, i) => (
                                <EmpCard key={i} emp={emp} />
                              ))}
                            </>
                          ) : (
                            <div className="dashboard02_block">
                              <NoDataBlock />
                            </div>
                          )}
                        </div>
                      </div>
                    )}

                    <div ref={keyRef} className="mt-50" id="8">
                      <div className="gd_right_headLine">
                        <div className="d-flex align-items-center">
                          <span>
                            <KeywordsIcon />
                          </span>
                          <p className="body2 ml-16 fw-6">Keywords</p>
                        </div>
                        <div className="gd_right_Line"></div>
                      </div>

                      <Keywords
                        keywords={keywords}
                        setKeywords={setKeywords}
                        website={startupData.Website}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  } else {
    return (
      <div className="v_center">
        <Loader />
      </div>
    );
  }
}