import Link from "next/link"; import styles from "../styles/recommendations.module.scss" import { FiPackage, FiPlus, FiGlobe, FiHome, FiChevronRight, FiCrosshair, FiUserPlus, FiZap, FiMusic, FiCode, FiStar, FiBookOpen } from "react-icons/fi"; import { useEffect, useContext, useState, useRef } from "react"; import PackAppsList from "./PackAppsList"; import AppIcon from "./AppIcon"; import SelectedContext from "../ctx/SelectedContext"; import PackPreview from "./PackPreview"; const Recommendations = ({ packs }) => { return ( <div className="homeBlock"> <div className="box"> <h2 className="blockHeader">Featured Packs</h2> <Link href="/packs"> <a className="button small"> <FiPackage /> View All </a> </Link> </div> <h3 className="blockSubtitle"> Just got a new Windows device? Start with our favourites. Click the + sign to include an app on your install script. </h3> <div className={styles.recommendations}> <PackList id="A6JzO22Y1" title="Work From Home" packs={packs}> <FiHome /> </PackList> <PackList id="z3zuf1vVD" title="Web Browsers" packs={packs}> <FiGlobe /> </PackList> <PackList id="ur23Tk6Sf" title="Essential Tools" packs={packs}> <FiStar /> </PackList> <PackList id="qO_m22F6k" title="Entertainment" packs={packs}> <FiMusic /> </PackList> <PackList id="Jtght2FO5" title="Gaming" packs={packs}> <FiCrosshair /> </PackList> <PackList id="3glB-CGXA" title="Developers" packs={packs}> <FiCode /> </PackList> <PackList id="NYWPVq9ct" title="Social Media" packs={packs}> <FiUserPlus /> </PackList> <PackList id="yphy7XItI" title="School" packs={packs}> <FiBookOpen /> </PackList> </div> </div> ); }; const PackList = ({ children, title, id, packs}) => { const [packApps, setPackApps] = useState([]); const [pack, setPack] = useState(); const headerRef = useRef(null); useEffect(() => { if (!packs) return; const pack = packs.find(p => p._id === id); if(!pack) return; setPackApps(pack.apps.slice(0, 5)); setPack(pack); }, []); if(!pack) return <></>; return ( <div className={styles.recommendation}> <Link href="/packs/[id]" as={`/packs/${pack._id}`} prefetch={false}> <a id={pack.accent} className={styles.packHeader} ref={headerRef}> {children} <h3>{title}</h3> <p>{pack.desc}</p> </a> </Link> <div className={styles.packListContainer}> {packApps && packApps.map((app) => <App key={app._id} data={app} />)} <Link href="/packs/[id]" as={`/packs/${pack._id}`} prefetch={false}> <a className={`button subtle ${styles.viewPack}`}> View Pack <FiChevronRight /> </a> </Link> </div> </div> ); }; const App = ({ data }) => { const [selected, setSelected] = useState(false); const { selectedApps, setSelectedApps } = useContext(SelectedContext); useEffect(() => { let found = selectedApps.find((a) => a._id === data._id); setSelected(found); }, [ data, selectedApps ]) let handleAppSelect = () => { let found = selectedApps.findIndex((a) => a._id === data._id); if (found !== -1) { let updatedSelectedApps = selectedApps.filter( (a, index) => index !== found ); setSelectedApps(updatedSelectedApps); setSelected(false); } else if(data) { setSelected(true); setSelectedApps([...selectedApps, data]); } }; return ( <div className={`${styles.appContainer} ${selected ? styles.selected : null}`}> <Link href="/apps/[id]" as={`/apps/${data._id}`} prefetch={false}> <a> <AppIcon name={data.name} icon={data.icon} id={data._id}/> <h4>{data.name}</h4> </a> </Link> <button className={styles.selectApp} onClick={handleAppSelect} aria-label={selected ? "Unselect app" : "Select app"} > <FiPlus/> </button> </div> ) } export default Recommendations;