Issue #19 🎫: Refactor to migrate es6 FC to es5 FC - and - Fix 'LikeButton' UI FC non-persistend liked style

package.json

@@ -57,7 +57,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "gh-pages": "^5.0.0",
+    "gh-pages": "^6.1.1",
     "sass": "^1.66.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^21.0.0",

src/components/UI/ContactForm.tsx

@@ -10,7 +10,7 @@ import '../../styles/UI/ContactForm.scss';
 
 const successButtonIcon = 'https://camo.githubusercontent.com/b55970b1d4c6e5d8d09a07556bce08ff3cfec080b680ad6b5be3ed46546e6f77/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6b52654b6366727331596f546d74324151742f67697068792e676966';
 
-const ContactForm: React.FC = () => {
+function ContactForm(): React.ReactElement {
   const [formContent, setFormContent] = useState(
     JSON.parse(sessionStorage.getItem('formContent')!) || null,
     // * ! = non-null assertion operator to tell TS that
@@ -313,6 +313,6 @@ const ContactForm: React.FC = () => {
       )}
     </form>
   );
-};
+}
 
 export default ContactForm;

src/components/UI/ExpertiseLinks.tsx

@@ -3,39 +3,41 @@ import { Link } from 'react-router-dom';
 
 import '../../styles/UI/ExpertiseLinks.scss';
 
-const ExpertiseLinks: React.FC = () => (
-  <div className="expertise-links">
-    <Link
-      to="/homepage/expertise"
-      className="text-hue-rotate"
-      aria-label="navigate to expertise section"
-    >
-      languages
-    </Link>
-    <Link
-      to="/homepage/expertise"
-      className="text-hue-rotate"
-      aria-label="navigate to expertise section"
-    >
-      frameworks
-    </Link>
-    <Link
-      to="/homepage/expertise"
-      className="text-hue-rotate"
-      aria-label="navigate to expertise section"
-    >
-      skills
-    </Link>
-    <a
-      href="https://docs.google.com/document/d/1vfOALwpILAh8Jn29zV6aO6jwuGZQwLyYjRb3_YKZfQ0/edit?usp=sharing"
-      className="text-hue-rotate"
-      aria-label="navigate to Arthur's resume which is hosted on Google Docs"
-      target="_blank"
-      rel="noreferrer noopener"
-    >
-      resume
-    </a>
-  </div>
-);
+function ExpertiseLinks(): React.ReactElement {
+  return (
+    <div className="expertise-links">
+      <Link
+        to="/homepage/expertise"
+        className="text-hue-rotate"
+        aria-label="navigate to expertise section"
+      >
+        languages
+      </Link>
+      <Link
+        to="/homepage/expertise"
+        className="text-hue-rotate"
+        aria-label="navigate to expertise section"
+      >
+        frameworks
+      </Link>
+      <Link
+        to="/homepage/expertise"
+        className="text-hue-rotate"
+        aria-label="navigate to expertise section"
+      >
+        skills
+      </Link>
+      <a
+        href="https://docs.google.com/document/d/1vfOALwpILAh8Jn29zV6aO6jwuGZQwLyYjRb3_YKZfQ0/edit?usp=sharing"
+        className="text-hue-rotate"
+        aria-label="navigate to Arthur's resume which is hosted on Google Docs"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        resume
+      </a>
+    </div>
+  );
+}
 
 export default ExpertiseLinks;

src/components/UI/FileTabsNavbar.tsx

@@ -5,7 +5,7 @@ import { FaReact } from 'react-icons/fa';
 
 import '../../styles/UI/FileTabsNavbar.scss';
 
-const FileTabsNavbar: React.FC = () => {
+function FileTabsNavbar(): React.ReactElement {
   const iconSize = 26;
 
   const { pathname } = useLocation();
@@ -74,6 +74,6 @@ const FileTabsNavbar: React.FC = () => {
       </ul>
     </nav>
   );
-};
+}
 
 export default FileTabsNavbar;

src/components/UI/LikeButton.tsx

@@ -25,7 +25,9 @@ interface LikeButtonProps {
   projectsLikes: Like[];
 }
 
-const LikeButton: React.FC<LikeButtonProps> = ({ itemId, projectsLikes }) => {
+function LikeButton(props: LikeButtonProps): React.ReactElement {
+  const { itemId, projectsLikes } = props;
+
   const [wasLiked, setWasLiked] = useState(false);
   const [likeCount, setLikeCount] = useState(0);
   const [error, setError] = useState(false);
@@ -36,7 +38,7 @@ const LikeButton: React.FC<LikeButtonProps> = ({ itemId, projectsLikes }) => {
 
   const styleButton = useCallback(() => {
     if (wasLiked) {
-      likeBtn.current?.classList.toggle('liked');
+      likeBtn.current?.classList.add('liked');
     }
   }, [wasLiked]);
 
@@ -98,13 +100,15 @@ const LikeButton: React.FC<LikeButtonProps> = ({ itemId, projectsLikes }) => {
   const handleLikeSubmit = async () => {
     // ? Since 'wasLiked' was false, now it will be set to true. This is to
     // ? trigger the function 'styleButton' to add the 'liked' class to the button.
-    setWasLiked((wasLiked) => !wasLiked);
+    setWasLiked(true);
 
     // * shows an instant update of the like count.
     if (!wasLiked) {
       setLikeCount((count) => count + 1);
       // * set 'wasLiked' to false, so that the user can like the project again.
-      setWasLiked((wasLiked) => !wasLiked);
+      setTimeout(() => {
+        setWasLiked(false);
+      }, 1000);
     }
 
     if (projectsLikes[0].error || error) {
@@ -164,6 +168,6 @@ const LikeButton: React.FC<LikeButtonProps> = ({ itemId, projectsLikes }) => {
       )}
     </button>
   );
-};
+}
 
 export default LikeButton;

src/components/UI/LineCount.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-const LineCount: React.FC = () => {
+function LineCount(): React.ReactElement {
   const [windowHeight, setWindowHeight] = useState(window.innerHeight);
   const spanHeight = 24; // ? 24px.
 
@@ -29,6 +29,6 @@ const LineCount: React.FC = () => {
       ))}
     </div>
   );
-};
+}
 
 export default LineCount;