diff --git a/package.json b/package.json index 95f6dc66..0efb5e0b 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "fs-extra": "^10.0.0", "klaw": "^3.0.0", "lottie-react": "^2.4.0", + "papaparse": "^5.4.1", "sirv-cli": "^1.0.14", "vite": "^3.0.5" }, @@ -92,6 +93,7 @@ "@types/lodash.defaultsdeep": "^4.6.6", "@types/lodash.isequal": "^4.5.5", "@types/node": "^15.14.9", + "@types/papaparse": "^5.3.14", "@types/preact-i18n": "^2.3.0", "@types/prismjs": "^1.26.0", "@types/react-beautiful-dnd": "^13", diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx index e61439f9..71beec49 100644 --- a/src/components/navigation/left/HomeSidebar.tsx +++ b/src/components/navigation/left/HomeSidebar.tsx @@ -24,6 +24,7 @@ import placeholderSVG from "../items/placeholder.svg"; import { useClient } from "../../../controllers/client/ClientController"; import { modalController } from "../../../controllers/modals/ModalController"; +import CompoundBay from "../../../pages/compoundbay/CompoundBay"; import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase"; import ButtonItem, { ChannelButton } from "../items/ButtonItem"; import ConnectionStatus from "../items/ConnectionStatus"; @@ -85,6 +86,14 @@ export default observer(() => { + + + + + + + + {!isTouchscreenDevice && ( <> { + {import.meta.env.DEV && ( diff --git a/src/data/vendors.csv b/src/data/vendors.csv new file mode 100644 index 00000000..0356cabc --- /dev/null +++ b/src/data/vendors.csv @@ -0,0 +1,51 @@ +id,name,description,compound,dose,measurement,format,quantity,priceUSD,shipping,testing,guarantees,vendorRating +1,Compound Vendor A,High-quality chemical compounds,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.5 +2,Compound Vendor B,Specialized in organic compounds,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.0 +3,Compound Vendor C,Leading supplier of rare compounds,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.2 +4,Compound Vendor D,Trusted by researchers globally,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.1 +5,Compound Vendor E,Innovative solutions for compounds,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.3 +6,Compound Vendor F,Quality compounds at competitive prices,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.0 +7,Compound Vendor G,Your partner in chemical research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.4 +8,Compound Vendor H,Excellence in compound distribution,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.2 +9,Compound Vendor I,Global leader in compound supply,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.6 +10,Compound Vendor J,Trusted by top laboratories,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.1 +11,Compound Vendor K,Innovative compound solutions,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.3 +12,Compound Vendor L,Quality compounds for research,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.0 +13,Compound Vendor M,Leading supplier of chemical compounds,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.5 +14,Compound Vendor N,Trusted by researchers worldwide,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.2 +15,Compound Vendor O,Innovative solutions for chemical research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.4 +16,Compound Vendor P,Quality compounds at affordable prices,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.1 +17,Compound Vendor Q,Your partner in compound research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.3 +18,Compound Vendor R,Excellence in compound supply,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.0 +19,Compound Vendor S,Global leader in chemical distribution,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.5 +20,Compound Vendor T,Trusted by top research labs,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.2 +21,Compound Vendor U,Innovative compound solutions for research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.4 +22,Compound Vendor V,Quality compounds for scientific research,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.1 +23,Compound Vendor W,Leading supplier of research compounds,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.3 +24,Compound Vendor X,Trusted by researchers globally,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.0 +25,Compound Vendor Y,Innovative solutions for compound research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.5 +26,Compound Vendor Z,Quality compounds at competitive prices,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.2 +27,Compound Vendor AA,Your partner in chemical research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.4 +28,Compound Vendor AB,Excellence in compound distribution,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.1 +29,Compound Vendor AC,Global leader in compound supply,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.6 +30,Compound Vendor AD,Trusted by top laboratories,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.1 +31,Compound Vendor AE,Innovative compound solutions,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.3 +32,Compound Vendor AF,Quality compounds for research,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.0 +33,Compound Vendor AG,Leading supplier of chemical compounds,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.5 +34,Compound Vendor AH,Trusted by researchers worldwide,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.2 +35,Compound Vendor AI,Innovative solutions for chemical research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.4 +36,Compound Vendor AJ,Quality compounds at affordable prices,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.1 +37,Compound Vendor AK,Your partner in compound research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.3 +38,Compound Vendor AL,Excellence in compound supply,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.0 +39,Compound Vendor AM,Global leader in chemical distribution,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.5 +40,Compound Vendor AN,Trusted by top research labs,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.2 +41,Compound Vendor AO,Innovative compound solutions for research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.4 +42,Compound Vendor AP,Quality compounds for scientific research,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.1 +43,Compound Vendor AQ,Leading supplier of research compounds,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.3 +44,Compound Vendor AR,Trusted by researchers globally,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.0 +45,Compound Vendor AS,Innovative solutions for compound research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.5 +46,Compound Vendor AT,Quality compounds at competitive prices,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.2 +47,Compound Vendor AU,Your partner in chemical research,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity",4.4 +48,Compound Vendor AV,Excellence in compound distribution,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity, Reshipping",4.1 +49,Compound Vendor AW,Global leader in compound supply,Semaglutide,10,mg,vial,10,95,Worldwide,"Purity, Stability","Purity, Quantity, Reshipping",4.6 +50,Compound Vendor AX,Trusted by top laboratories,Semaglutide,10,mg,vial,10,95,Domestic,"Purity","Purity",4.1 diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index ca4b2f22..760483e2 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -14,6 +14,7 @@ import RightSidebar from "../components/navigation/RightSidebar"; import { useSystemAlert } from "../updateWorker"; import Open from "./Open"; import Channel from "./channels/Channel"; +import CompoundBay from "./compoundbay/CompoundBay"; import Developer from "./developer/Developer"; import Discover from "./discover/Discover"; import Friends from "./friends/Friends"; @@ -216,6 +217,10 @@ export default function App() { + diff --git a/src/pages/compoundbay/CompoundBay.tsx b/src/pages/compoundbay/CompoundBay.tsx new file mode 100644 index 00000000..4851615d --- /dev/null +++ b/src/pages/compoundbay/CompoundBay.tsx @@ -0,0 +1,201 @@ +import { observer } from "mobx-react-lite"; +import Papa from "papaparse"; +import { useState, useEffect } from "react"; +import styled from "styled-components/macro"; + +const Container = styled.div` + width: 100%; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + background-color: #f0f0f0; + font-family: "Roboto", sans-serif; +`; + +const Banner = styled.h1` + font-size: 2.5em; + margin-bottom: 20px; + color: #1a237e; + font-weight: 500; +`; + +const SearchBar = styled.input` + width: 50%; + padding: 12px; + margin-bottom: 20px; + border: 1px solid #bdbdbd; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-size: 1em; + font-family: "Roboto", sans-serif; +`; + +const Content = styled.div` + display: flex; + width: 100%; + max-width: 1200px; +`; + +const Filters = styled.div` + flex: 1; + padding: 20px; + background-color: #ffffff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin-right: 20px; +`; + +const Results = styled.div` + flex: 3; + padding: 20px; + background-color: #ffffff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow-y: auto; + height: 600px; /* Set a fixed height for scrolling */ +`; + +const FilterTitle = styled.h3` + margin-bottom: 10px; + color: #1a237e; + font-size: 1.2em; + font-weight: 500; +`; + +const FilterOption = styled.div` + margin-bottom: 10px; + color: #424242; + cursor: pointer; + font-size: 1em; + &:hover { + color: #1a237e; + } +`; + +const ResultCard = styled.div` + margin-bottom: 20px; + padding: 20px; + border: 1px solid #e0e0e0; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + background-color: #ffffff; +`; + +const VendorName = styled.h3` + color: #1a237e; + font-size: 1.5em; + font-weight: 500; + margin-bottom: 10px; +`; + +const VendorDescription = styled.p` + color: #616161; + font-size: 1em; + margin-bottom: 10px; +`; + +const VendorDetail = styled.p` + color: #424242; + font-size: 0.9em; + margin-bottom: 5px; +`; + +const CompoundBay = observer(() => { + const [searchTerm, setSearchTerm] = useState(""); + const [vendors, setVendors] = useState([]); + const [visibleVendors, setVisibleVendors] = useState([]); + const [loadCount, setLoadCount] = useState(10); + + useEffect(() => { + // Load and parse the CSV file + Papa.parse("/src/data/vendors.csv", { + download: true, + header: true, + complete: (results) => { + setVendors(results.data); + setVisibleVendors(results.data.slice(0, loadCount)); + }, + }); + }, []); + + const loadMoreVendors = () => { + setLoadCount((prevCount) => prevCount + 10); + setVisibleVendors(vendors.slice(0, loadCount + 10)); + }; + + const handleScroll = (e) => { + const bottom = + e.target.scrollHeight - e.target.scrollTop === + e.target.clientHeight; + if (bottom) { + loadMoreVendors(); + } + }; + + return ( + + CompoundBay + setSearchTerm(e.target.value)} + /> + + + Sort By + Relevance + Rating + Categories + Organic + Inorganic + Available On + Online + In-store + + + {visibleVendors.map((vendor) => ( + + {vendor.name} + + {vendor.description} + + + Compound: {vendor.compound} + + + Dose: {vendor.dose}{" "} + {vendor.measurement} + + + Format: {vendor.format} + + + Quantity: {vendor.quantity} + + + Price USD: ${vendor.priceUSD} + + + Shipping: {vendor.shipping} + + + Testing: {vendor.testing} + + + Guarantees: {vendor.guarantees} + + + Vendor Rating:{" "} + {vendor.vendorRating} / 5 + + + ))} + + + + ); +}); + +export default CompoundBay;