Cleanup: Unused React in the website#124
Cleanup: Unused React in the website#124saurabh007007 wants to merge 1 commit intoaboutcode-org:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR aims to clean up leftover React-era code in the Docusaurus website by removing unused React imports/references and normalizing formatting in several page/component files.
Changes:
- Removed
import React from ...where it’s no longer needed and standardized imports/quoting. - Reformatted JSX in homepage/page components for consistent indentation and style.
- Updated several archived
ProjectGridvariants and the activeProjectGridTemplatecomponent.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 21 comments.
Show a summary per file
| File | Description |
|---|---|
website/src/pages/index.js |
Formatting-only changes to the homepage route component. |
website/src/components/archive/ProjectGrid/index.js |
Removes default React import; formatting + import normalization. |
website/src/components/archive/ProjectGrid/index-saved.js |
Removes default React import; formatting + import normalization. |
website/src/components/archive/ProjectGrid/index-new.js |
Removes default React import; formatting + import normalization. |
website/src/components/ProjectGridTemplate/index.js |
Formatting, string normalization, and modal/tooltip-related code restructuring. |
website/src/components/HomepageHeader/index.js |
Removes unused React import and compresses JSX formatting. |
website/src/components/HomepageContent/index.js |
Removes unused React import and reformats JSX. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Close modal on Escape key | ||
| useEffect(() => { | ||
| function handleKeyDown(event) { | ||
| if (event.key === "Escape") { | ||
| setSelectedProject(null); | ||
| setIsModalOpen(false); | ||
| } | ||
| } | ||
| if (selectedProject) { | ||
| window.addEventListener("keydown", handleKeyDown); | ||
| } | ||
| return () => { | ||
| window.removeEventListener("keydown", handleKeyDown); | ||
| }; | ||
|
|
||
| // Close modal on Escape key | ||
| useEffect(() => { | ||
| function handleKeyDown(event) { | ||
| if (event.key === 'Escape') { | ||
| setSelectedProject(null); | ||
| } | ||
| } | ||
| if (selectedProject) { | ||
| window.addEventListener('keydown', handleKeyDown); | ||
| } | ||
| return () => { | ||
| window.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }, [selectedProject]); | ||
|
|
||
| // Add tooltip to card and modal. | ||
| function DescriptionWithTooltip({ text }) { | ||
| const descRef = React.useRef(null); | ||
| const [showTooltip, setShowTooltip] = React.useState(false); | ||
|
|
||
| React.useEffect(() => { | ||
| const el = descRef.current; | ||
| if (el) { | ||
| // check if content is overflowing its container | ||
| setShowTooltip( | ||
| el.scrollHeight > el.clientHeight || | ||
| el.scrollWidth > el.clientWidth, | ||
| ); | ||
| } | ||
| }, [text]); | ||
|
|
||
| return ( | ||
| <div className={styles.projectDescriptionWrapper}> | ||
| <div | ||
| ref={descRef} | ||
| className={`${styles.projectDescription} ${styles.multiline}`} | ||
| > | ||
| {text} | ||
| </div> | ||
| {showTooltip && <div className={styles.tooltip}>{text}</div>} | ||
| </div> | ||
| }, [selectedProject]); |
There was a problem hiding this comment.
The Escape key handler closes the modal by clearing selectedProject, but it does not reset isModalOpen to false. This can leave isModalOpen stuck true, which affects the shared popup-message gating and any other modal-related logic; reuse closeModal() here or also call setIsModalOpen(false).
| <div> | ||
| <div className={styles.projectDescriptionWrapper}> | ||
| <DescriptionWithTooltip | ||
| text={project.description.map((para, idx) => ( | ||
| <p key={idx}>{para}</p> | ||
| ))} | ||
| /> |
There was a problem hiding this comment.
DescriptionWithTooltip’s effect depends on text, but callers pass a newly-created array of <p> elements (project.description.map(...)) each render. That makes the effect run on every render and can cause extra layout reads (scrollHeight/clientHeight) and state updates. Prefer passing a stable value (e.g., the raw string/array of strings) and rendering inside the component, or memoize the mapped nodes.
| // Monitor open modal -- state prevents display of main-page alert | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
| const openModal = (project) => { | ||
| setSelectedProject(project); // sets modal content | ||
| }; |
There was a problem hiding this comment.
isModalOpen is intended to suppress the main-page alert while the modal is open, but it is never updated (and setIsModalOpen is unused). As a result, the popup message can still render while the modal is shown. Either remove isModalOpen entirely and key off selectedProject, or set it to true/false in openModal/closeModal (and in the Escape handler).
| // import projects from '@site/src/data/projects-v02.json'; | ||
| import projects_library from '@site/src/data/projects-library.json'; | ||
| import projects_main from '@site/src/data/projects-main.json'; | ||
| import projects_library from "@site/src/data/projects-library.json"; | ||
| import projects_main from "@site/src/data/projects-main.json"; | ||
|
|
||
| export default function ProjectGrid() { | ||
| const [message, setMessage] = useState(null); | ||
| const [selectedProject, setSelectedProject] = useState(null); | ||
| const [activeTab, setActiveTab] = useState('overview'); | ||
| // Monitor open modal -- state prevents display of main-page alert | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
| const openModal = (project) => { | ||
| setSelectedProject(project); // sets modal content | ||
| }; | ||
| // Use a separate state for the modal alert | ||
| const [modalMessage, setModalMessage] = useState(null); | ||
|
|
||
| // Close modal on Escape key | ||
| useEffect(() => { | ||
| function handleKeyDown(event) { | ||
| if (event.key === 'Escape') { | ||
| setSelectedProject(null); | ||
| setActiveTab('overview'); | ||
| } | ||
| } | ||
| if (selectedProject) { | ||
| window.addEventListener('keydown', handleKeyDown); | ||
| } | ||
| return () => { | ||
| window.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }, [selectedProject]); | ||
| const [message, setMessage] = useState(null); | ||
| const [selectedProject, setSelectedProject] = useState(null); | ||
| const [activeTab, setActiveTab] = useState("overview"); | ||
| // Monitor open modal -- state prevents display of main-page alert | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
| const openModal = (project) => { | ||
| setSelectedProject(project); // sets modal content | ||
| }; | ||
| // Use a separate state for the modal alert | ||
| const [modalMessage, setModalMessage] = useState(null); | ||
|
|
||
| const closeModal = () => { | ||
| // Close modal on Escape key | ||
| useEffect(() => { | ||
| function handleKeyDown(event) { | ||
| if (event.key === "Escape") { | ||
| setSelectedProject(null); | ||
| setActiveTab('overview'); | ||
| setActiveTab("overview"); | ||
| } | ||
| } | ||
| if (selectedProject) { | ||
| window.addEventListener("keydown", handleKeyDown); | ||
| } | ||
| return () => { | ||
| window.removeEventListener("keydown", handleKeyDown); | ||
| }; | ||
| }, [selectedProject]); | ||
|
|
||
| return ( | ||
| <div className={styles.projectGridWrapper}> | ||
| <div className={styles.projectGridContainer}> | ||
| <div className={styles.projectGrid}> | ||
| {projects.map((project, idx) => ( | ||
| <div | ||
| key={idx} | ||
| className={styles.projectCard} | ||
| onClick={() => openModal(project)} | ||
| > | ||
| <div> | ||
| <div className={styles.topRow}> | ||
| <h4 className={styles.projectName}> | ||
| {project.repository_url ? ( | ||
| <a | ||
| href={project.repository_url} | ||
| target={ | ||
| project.repository_url.startsWith( | ||
| 'http' | ||
| ) | ||
| ? '_blank' | ||
| : '_self' | ||
| } | ||
| rel='noopener noreferrer' | ||
| className={ | ||
| styles.modalLinkUrl_break_word | ||
| } | ||
| onClick={(e) => | ||
| e.stopPropagation() | ||
| } | ||
| > | ||
| {project.name} | ||
| </a> | ||
| ) : ( | ||
| project.name | ||
| )} | ||
| </h4> | ||
| </div> | ||
| </div> | ||
| const closeModal = () => { | ||
| setSelectedProject(null); | ||
| setActiveTab("overview"); | ||
| }; | ||
|
|
||
| <div> | ||
| <div | ||
| className={styles.projectDescriptionWrapper} | ||
| > | ||
| {project.description} | ||
| </div> | ||
| </div> | ||
| return ( | ||
| <div className={styles.projectGridWrapper}> | ||
| <div className={styles.projectGridContainer}> | ||
| <div className={styles.projectGrid}> | ||
| {projects.map((project, idx) => ( | ||
| <div |
There was a problem hiding this comment.
projects is used in the render (projects.map(...)) but is never defined/imported (the import is commented out). This file will throw at runtime if it’s ever imported; either restore the projects import or update the code to iterate over projects_library/projects_main instead.
| <p> | ||
| {selectedProject.description.map((para, idx) => ( | ||
| <p key={idx}>{para}</p> | ||
| ))} | ||
| </p> |
There was a problem hiding this comment.
The modal description renders a <p> that contains multiple <p> elements from the map. Nested paragraph tags are invalid HTML and can break layout and screen-reader semantics; render the mapped paragraphs inside a container like a <div>/<section>/fragment instead of wrapping them in a <p>.
| <p> | |
| {selectedProject.description.map((para, idx) => ( | |
| <p key={idx}>{para}</p> | |
| ))} | |
| </p> | |
| <div> | |
| {selectedProject.description.map((para, idx) => ( | |
| <p key={idx}>{para}</p> | |
| ))} | |
| </div> |
| setSelectedProject(project); // sets modal content | ||
| }; | ||
| // Use a separate state for the modal alert | ||
| const [modalMessage, setModalMessage] = useState(null); |
There was a problem hiding this comment.
Unused variable setModalMessage.
| const [modalMessage, setModalMessage] = useState(null); |
| }; | ||
| // Use a separate state for the modal alert | ||
| const [modalMessage, setModalMessage] = useState(null); | ||
| const [message, setMessage] = useState(null); |
There was a problem hiding this comment.
Unused variable setMessage.
| const [message, setMessage] = useState(null); | |
| const [message] = useState(null); |
| setSelectedProject(project); // sets modal content | ||
| }; | ||
| // Use a separate state for the modal alert | ||
| const [modalMessage, setModalMessage] = useState(null); |
There was a problem hiding this comment.
Unused variable setModalMessage.
| const [modalMessage, setModalMessage] = useState(null); |
| const closeModal = () => { | ||
| const [selectedProject, setSelectedProject] = useState(null); | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
| const [message, setMessage] = useState(""); |
There was a problem hiding this comment.
Unused variable setMessage.
| const [message, setMessage] = useState(""); | |
| const [message] = useState(""); |
| const [selectedProject, setSelectedProject] = useState(null); | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
| const [message, setMessage] = useState(""); | ||
| const [modalMessage, setModalMessage] = useState(""); |
There was a problem hiding this comment.
Unused variable setModalMessage.
| const [modalMessage, setModalMessage] = useState(""); | |
| const [modalMessage] = useState(""); |
|
@saurabh007007 Before you (I mean, Copilot) did all this, did you take the time to read the README and how we view the use of Copilot? https://github.com/aboutcode-org/www.aboutcode.org |
2 participants
This PR removes unused React-related code and dependencies that were part of the older version of the website.
In the previous implementation, React was used, but the current version no longer relies on it. Some leftover React imports, configs, and references were still present, which were unnecessary.