refactor: Cleanup code and add integration to backend themes

Author: tjtanjin

.gitignore

@@ -9,7 +9,7 @@
 /coverage
 
 # env
-.env
+.env*
 
 # production
 /build

src/components/NavigationBar/NavigationBar.tsx

@@ -1,13 +1,22 @@
-import { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { useAuth } from '../../context/AuthContext'
-import logo from '../../assets/images/logo.png'
-import { handleLogin } from '../../services/authService'
-import { SiteConfig } from '../../constants/SiteConfig'
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
+import { handleLogin } from '../../services/authService';
+import { useAuth } from '../../context/AuthContext';
+import { SiteConfig } from '../../constants/SiteConfig';
+import logo from '../../assets/images/logo.png';
+
+/**
+ * Navigation bar for users to navigate between pages.
+ */
 const NavigationBar = () => {
-	const navigate = useNavigate()
+	// context for handling user data
 	const { isLoggedIn, setIsLoggedIn, setUserData } = useAuth()
+
+	// handles page navigation
+	const navigate = useNavigate()
+
+	// menu used for mobile view
 	const [menuOpen, setMenuOpen] = useState(false)
 
 	const toggleMenu = () => {
@@ -17,7 +26,7 @@ const NavigationBar = () => {
 	return (
 		<nav
 			className="fixed top-0 w-full z-50 opacity-80 bg-black
-        text-white py-2 px-6 flex justify-between items-center"
+				text-white py-2 px-6 flex justify-between items-center"
 			style={{ height: '8vh' }}
 		>
 			<Link to="/" className="flex items-center">
@@ -53,15 +62,15 @@ const NavigationBar = () => {
 				{menuOpen && (
 					<div 
 						className="absolute right-0 mt-2 bg-gray-800 border
-              border-gray-600 rounded-md shadow-lg py-1 w-48 z-10"
+							border-gray-600 rounded-md shadow-lg py-1 w-48 z-10"
 					>
 						<ul className="px-2">
 							{/* needs improvement */}
 							{/* <li className="my-1">
-                <Link to="/about" className="block px-4 py-2 hover:bg-gray-700">
-                  About
-                </Link>
-              </li> */}
+								<Link to="/about" className="block px-4 py-2 hover:bg-gray-700">
+									About
+								</Link>
+							</li> */}
 							<li className="my-1">
 								<Link
 									to="/plugins"
@@ -106,13 +115,13 @@ const NavigationBar = () => {
 							</li>
 							{/* needs improvement */}
 							{/* <li className="my-1">
-                <Link
-                  to="/terms-of-service"
-                  className="block px-4 py-2 hover:bg-gray-700"
-                >
-                  Terms of Service
-                </Link>
-              </li> */}
+								<Link
+									to="/terms-of-service"
+									className="block px-4 py-2 hover:bg-gray-700"
+								>
+									Terms of Service
+								</Link>
+							</li> */}
 							{isLoggedIn ? (
 								<>
 									<li className="my-1">
@@ -150,10 +159,10 @@ const NavigationBar = () => {
 			<ul className="hidden md:flex pr-20">
 				{/* needs improvement */}
 				{/* <li className="mr-8">
-          <Link to="/about" className="hover:text-blue-500">
-            About
-          </Link>
-        </li> */}
+					<Link to="/about" className="hover:text-blue-500">
+						About
+					</Link>
+				</li> */}
 				<li className="mr-8">
 					<Link to="/plugins" className="hover:text-blue-500">
 						Plugins
@@ -189,10 +198,10 @@ const NavigationBar = () => {
 				</li>
 				{/* needs improvement */}
 				{/* <li className="mr-8">
-          <Link to="/terms-of-service" className="hover:text-blue-500">
-            Terms of Service
-          </Link>
-        </li> */}
+					<Link to="/terms-of-service" className="hover:text-blue-500">
+						Terms of Service
+					</Link>
+				</li> */}
 				{isLoggedIn ? (
 					<>
 						<li className="mr-8">

src/components/SearchBar/SearchBar.tsx

@@ -1,12 +1,18 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
 type Props = {
-  onSearch: (query: string) => void
+	onSearch: (query: string) => void
 }
 
+/**
+ * Searchbar for users to input their search query.
+ */
 const SearchBar: React.FC<Props> = ({ onSearch }) => {
+	// tracks current user search query
 	const [query, setQuery] = useState('')
 
+	// todo: perhaps only search when enter is pressed while search is focused
+	// to reduce the api calls to backend incurred from every change
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const { value } = e.target
 		setQuery(value)

src/components/Themes/ThemeCard.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react'
-import { Link } from 'react-router-dom'
+import React, { useState } from 'react';
 
-import ThemeModal from './ThemeModal'
-import { Theme } from '../../interfaces/Theme'
-import FavIcon from '../../assets/images/icon_favorite.svg'
-import GitHubIcon from '../../assets/images/icon_github_white.svg'
+import { Link } from 'react-router-dom';
+
+import ThemeModal from './ThemeModal';
+import { Theme } from '../../interfaces/Theme';
+import FavIcon from '../../assets/images/icon_favorite.svg';
+import GitHubIcon from '../../assets/images/icon_github_white.svg';
 
 import '../../styles/theme_card.css'
 
@@ -14,6 +15,9 @@ type Props = {
   onPreview: (name: string) => void
 }
 
+/**
+ * Theme card component to hold the details of each theme in the themes page.
+ */
 const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview }) => {
 	const [isFav, setIsFav] = useState(false)
 	const [viewDetails, setViewDetails] = useState(false)

src/components/Themes/ThemeGallery.tsx

@@ -1,14 +1,19 @@
-import React, { useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
-import { Theme } from '../../interfaces/Theme'
-import { downloadThemeContent } from '../../utils'
+import React, { useEffect, useRef } from 'react';
+
+import ReactDOM from 'react-dom';
+
+import { downloadThemeContent } from '../../utils';
+import { Theme } from '../../interfaces/Theme';
 
 type ThemeModalProps = {
   isOpen: boolean
   onClose: () => void
   theme: Theme
 }
 
+/**
+ * Modal to popup for showing theme details.
+ */
 const ThemeModal: React.FC<ThemeModalProps> = ({ isOpen, onClose, theme }) => {
 	const modalRef = useRef<HTMLDivElement>(null)
 

src/components/Themes/ThemeModal.tsx

@@ -0,0 +1,7 @@
+// endpoints for making requests
+export const Endpoints = {
+	fetchApiThemes: `${import.meta.env.VITE_GALLERY_API_URL}/api/v1/themes`,
+  fetchUserData: `${import.meta.env.VITE_GALLERY_API_URL}/api/v1/auth/login/process`,
+  fetchCacheThemes: import.meta.env.VITE_GITHUB_THEMES_CACHE_URL,
+  gitHubLoginUrl: "https://github.com/login/oauth/authorize"
+}

src/constants/Endpoints.ts

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from "react";
+
+import { ApiTheme } from "../interfaces/ApiTheme";
+import { getGitHubThemeData } from "../services/themeService";
+import { Theme } from "../interfaces/Theme";
+
+/**
+ * Fetches themes from the backend api.
+ *
+ * @param url url to fetch themes from
+ * @param pageSize number of themes to fetch each page
+ * @param pageNum page number to fetch for
+ * @param searchQuery search query for filtering themes
+ */
+const useFetchThemes = (
+	url: string,
+	pageSize: number,
+	pageNum: number,
+	searchQuery?: string
+) => {
+	const [themes, setThemes] = useState<Theme[]>([]);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [error, setError] = useState<Error | null>(null);
+	const fetchInitiated = useRef<boolean>(false);
+
+	useEffect(() => {
+		// prevents duplicate fetching
+		if (fetchInitiated.current) {
+			return;
+		}
+
+		const fetchData = async () => {
+			try {
+				let finalUrl = `${url}?pageSize=${pageSize}&pageNum=${pageNum}`;
+				if (searchQuery) {
+					finalUrl += `&searchQuery=${encodeURIComponent(searchQuery)}`;
+				}
+
+				const response = await fetch(finalUrl);
+				const result = await response.json();
+				const themes = await fetchThemesFromGitHub(result);
+				setThemes(themes);
+			} catch (err: unknown) {
+				setError(err as Error);
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchData();
+		fetchInitiated.current = true;
+	}, [url, pageSize, pageNum, searchQuery]);
+
+	return { themes, loading, error };
+};
+
+/**
+ * Fetches themes information from github (or more accurately, jsdelivr cache).
+ */
+const fetchThemesFromGitHub = async (apiThemes: ApiTheme[]): Promise<Theme[]> => {
+	// todo: good to cache themes already fetched to reduce calls to cdn
+	return await Promise.all(apiThemes.map(apiTheme => getGitHubThemeData(apiTheme)));
+}
+
+export default useFetchThemes;