fix: Reliability issue

LeleDallas · Nov 17, 2023 · 9a3ea18 · 9a3ea18
1 parent bd307aa
commit 9a3ea18
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/src/screens/About.tsx b/src/screens/About.tsx
@@ -8,6 +8,11 @@ const About = ({ active }: ScreenProps) => {
     const [visible, setVisible] = useState(false)
     const [data, setData] = useState<DataModel>(technologiesItems[0])
 
+    const onClick = (technology: DataModel) => {
+        setVisible(true)
+        setData(technology)
+    }
+
     return (
         <article
             style={{ padding: "30px" }}
@@ -49,10 +54,8 @@ const About = ({ active }: ScreenProps) => {
                 <ul className="testimonials-list has-scrollbar">
                     {technologiesItems.map(technology =>
                         <li key={technology.title}
-                            onClick={() => {
-                                setVisible(true)
-                                setData(technology)
-                            }}
+                            onKeyDown={() => onClick(technology)}
+                            onClick={() => onClick(technology)}
                             className="testimonials-item"
                         >
                             <div className="content-card">

diff --git a/src/screens/Modal.tsx b/src/screens/Modal.tsx
@@ -3,14 +3,14 @@ import { ModalProps } from "../types"
 
 const Modal = ({ visible, setVisible, data }: ModalProps) =>
     <div className={visible ? "modal-container active" : "modal-container"}  >
-        <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)}></div>
+        <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)} onKeyDown={() => setVisible(false)}></div>
         <section className="testimonials-modal">
             <button className="modal-close-btn" onClick={() => setVisible(false)}>
                 <IconFont name="close1" color={"white"} size={10} />
             </button>
             <div className="modal-img-wrapper">
                 <figure className="modal-avatar-box">
-                    <img style={{ padding: 10}} src={data.image} alt={data.title} width="80" />
+                    <img style={{ padding: 10 }} src={data.image} alt={data.title} width="80" />
                 </figure>
                 <img src="./assets/icon-quote.svg" alt="quote icon" />
             </div>

diff --git a/src/screens/ModalProjects.tsx b/src/screens/ModalProjects.tsx
@@ -8,7 +8,7 @@ const ModalProjects = ({ visible, setVisible, data }: ModalProjectProps) => {
     const [overIos, setOverIos] = useState(false)
     return (
         <div className={visible ? "modal-container active" : "modal-container"}  >
-            <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)} />
+            <div className={visible ? "overlay active" : "overlay"} onKeyDown={() => setVisible(false)} onClick={() => setVisible(false)} />
             <section style={{ width: 1050 }} className="testimonials-modal">
                 <button className="modal-close-btn" onClick={() => setVisible(false)}>
                     <IconFont name="close1" color={"white"} size={10} />

diff --git a/src/screens/Projects.tsx b/src/screens/Projects.tsx
@@ -16,6 +16,10 @@ const Projects = ({ active }: ScreenProps) => {
 
     const items = ["All", "Mobile", "Software", "Web"]
 
+    const onClick = (project: DataProjectModel) => {
+        setData(project)
+        setVisible(true)
+    }
     return (
         <article
             style={{ padding: "30px" }}
@@ -51,10 +55,8 @@ const Projects = ({ active }: ScreenProps) => {
                 <ul className="project-list">
                     {projects.filter(project => selectedCategory === "All" ? true : project.type.includes(selectedCategory)).map(project =>
                         <li
-                            onClick={() => {
-                                setData(project)
-                                setVisible(true)
-                            }}
+                            onKeyDown={() => onClick(project)}
+                            onClick={() => onClick(project)}
                             key={project.title} className="project-item  active">
                             <a href="#">
                                 <figure className="project-img">

diff --git a/src/screens/Resume.tsx b/src/screens/Resume.tsx
@@ -59,13 +59,15 @@ const Resume = ({ active }: ScreenProps) => {
                     <div className="service-content-box">
                         <a href="#">
                             <h4 onClick={() => setVisible(true)}
+                                onKeyDown={() => setVisible(true)}
                                 className="h4 service-item-title"
                                 style={{ textAlign: "center" }}>
                                 Check full resume
                             </h4>
                         </a>
                         <a href="#">
                             <p onClick={downloadPdfResume}
+                                onKeyDown={downloadPdfResume}
                                 className="service-item-text"
                                 style={{ textAlign: "center" }}>
                                 Download resume
@@ -75,7 +77,10 @@ const Resume = ({ active }: ScreenProps) => {
                 </div>
             </section>
             <div className={visible ? "modal-container active" : "modal-container"}  >
-                <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)} />
+                <div className={visible ? "overlay active" : "overlay"}
+                    onKeyDown={() => setVisible(false)}
+                    onClick={() => setVisible(false)}
+                />
                 <section style={{ width: 1050, height: 680, }} className="testimonials-modal">
                     <button className="modal-close-btn" onClick={() => setVisible(false)}>
                         <IconFont name="close1" color={"white"} size={10} />