Merge pull request #1632 from houdiniproject/work-on-sidenav

Componentize Sidenav
houdiniproject · Aug 26, 2023 · b2c957d · b2c957d
2 parents 8833609 + 4e2c279
commit b2c957d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 29 deletions.
diff --git a/app/javascript/components/common/SideNav/AdminMenu.tsx b/app/javascript/components/common/SideNav/AdminMenu.tsx
@@ -13,6 +13,8 @@ import {
 } from '../../../routes';
 
 import Nonprofit from '../../../legacy/app_data/Nonprofit';
+import Section from './Section';
+import Link from './Link';
 
 
 export interface AdminMenuProps {
@@ -21,43 +23,43 @@ export interface AdminMenuProps {
 
 export default function AdminMenu(props: AdminMenuProps): JSX.Element {
 	return (
-		<section className='sideNav-section'>
-			<a className='sideNav-link' href={nonprofitPath(props.administeredNonprofit)}>
+		<Section>
+			<Link href={nonprofitPath(props.administeredNonprofit)}>
 				<img src={props.administeredNonprofit.logo.small} className={"sideNav-profile"} alt={props.administeredNonprofit.name} />
 
 				<span className='sideNav-text'>{props.administeredNonprofit.name}</span>
-			</a>
+			</Link>
 
-			<a className='sideNav-link' href={dashboardNonprofitPath(props.administeredNonprofit)}>
+			<Link href={dashboardNonprofitPath(props.administeredNonprofit)}>
 				<i className='sideNav-icon icon-camera-graph-2'></i>
 				<span className='sideNav-text'>Dashboard</span>
-			</a>
+			</Link>
 
 
-			<a className='sideNav-link' href={nonprofitsSupportersPath(props.administeredNonprofit)}>
+			<Link href={nonprofitsSupportersPath(props.administeredNonprofit)}>
 				<i className='sideNav-icon icon-contacts-3'></i>
 				<span className='sideNav-text'>Supporters</span>
-			</a>
+			</Link>
 
-			<a className='sideNav-link' href={nonprofitsPaymentsPath(props.administeredNonprofit)}>
+			<Link href={nonprofitsPaymentsPath(props.administeredNonprofit)}>
 				<i className='sideNav-icon icon-piggy-bank'></i>
 				<span className='sideNav-text'>Payments</span>
-			</a>
+			</Link>
 
-			<a className='sideNav-link' href={nonprofitEventsPath(props.administeredNonprofit)}>
+			<Link href={nonprofitEventsPath(props.administeredNonprofit)}>
 				<i className='sideNav-icon icon-ticket-2'></i>
 				<span className='sideNav-text'>Events</span>
-			</a>
+			</Link>
 
-			<a className='sideNav-link' href={nonprofitCampaignsPath(props.administeredNonprofit)}>
+			<Link href={nonprofitCampaignsPath(props.administeredNonprofit)}>
 				<i className='sideNav-icon icon-thermometer-medium'></i>
 				<span className='sideNav-text'>Campaigns</span>
-			</a>
+			</Link>
 
-			<a className='sideNav-link' href={nonprofitsButtonBasicPath(props.administeredNonprofit)}>
+			<Link href={nonprofitsButtonBasicPath(props.administeredNonprofit)}>
 				<i className='sideNav-icon icon-credit-card'></i>
 				<span className='sideNav-text'>Donate Button</span>
-			</a>
+			</Link>
 
-		</section>);
+		</Section>);
 }
diff --git a/app/javascript/components/common/SideNav/Link.tsx b/app/javascript/components/common/SideNav/Link.tsx
@@ -0,0 +1,10 @@
+// License: LGPL-3.0-or-later
+// from app/views/layouts/_user_menu.html.erb
+
+import classNames from 'classnames';
+import React from 'react';
+
+
+export default function Link({ className = '', ...props}: React.ComponentPropsWithoutRef<"a">): JSX.Element {
+	return (<a {...props} className={classNames(...className, 'sideNav-link')}/>);
+}
diff --git a/app/javascript/components/common/SideNav/Section.tsx b/app/javascript/components/common/SideNav/Section.tsx
@@ -0,0 +1,11 @@
+// License: LGPL-3.0-or-later
+import React from 'react';
+
+export default function Section(props: React.PropsWithChildren<unknown>): JSX.Element {
+	return (
+		<section className='sideNav-section'>
+			{props.children}
+		</section>
+	);
+}
+
diff --git a/app/javascript/components/common/SideNav/UserMenu.tsx b/app/javascript/components/common/SideNav/UserMenu.tsx
@@ -9,16 +9,17 @@ import {
 } from '../../../routes';
 
 import UserWithProfileAsChild from '../../../legacy/app_data/UserWithProfileAsChild';
-
+import Section from './Section';
+import Link from './Link';
 export interface UserMenuProps {
 	currentUser: UserWithProfileAsChild;
 }
 
 export default function UserMenu(props: UserMenuProps): JSX.Element {
 	return (<>
 
-		<section className='sideNav-section'>
-			<a className='sideNav-link' href={(props.currentUser.profile && profilePath(props.currentUser.profile)) || "#"}>
+		<Section>
+			<Link href={(props.currentUser.profile && profilePath(props.currentUser.profile)) || "#"}>
 				{
 					props.currentUser.profile?.pic_tiny ?
 						<img
@@ -27,20 +28,20 @@ export default function UserMenu(props: UserMenuProps): JSX.Element {
 				}
 				<span className='sideNav-text'>{(props.currentUser?.profile?.name || '').length > 0 ? props.currentUser?.profile?.name : "Your Profile"}
 				</span>
-			</a>
-		</section>
+			</Link>
+		</Section>
 
-		<section className='sideNav-section'>
-			<a className='sideNav-link' href={settingsPath()}>
+		<Section>
+			<Link href={settingsPath()}>
 				<i className='sideNav-icon icon-setting-gear'></i>
 				<span className='sideNav-text'>Settings</span>
-			</a>
+			</Link>
 
-			<a className='sideNav-link' href={destroyUserSessionPath()}>
+			<Link href={destroyUserSessionPath()}>
 				<i className='sideNav-icon icon-log-out-1'></i>
 				<span className='sideNav-text'>Logout</span>
-			</a>
-		</section>
+			</Link>
+		</Section>
 
 
 

diff --git a/app/javascript/components/common/SideNav/index.tsx b/app/javascript/components/common/SideNav/index.tsx
@@ -8,6 +8,7 @@ import UserMenu from './UserMenu';
 import Nonprofit from '../../../legacy/app_data/Nonprofit';
 import UserWithProfileAsChild from '../../../legacy/app_data/UserWithProfileAsChild';
 import classnames from 'classnames';
+import Section from './Section';
 
 
 export interface SideNavInput {
@@ -61,11 +62,11 @@ export default function SideNav(props: SideNavInput): JSX.Element {
 		<nav className={sideNavClasses} >
 			{
 				!userisNonprofitUser(props.currentUser, props.administeredNonprofit) ? (
-					<section className='sideNav-section'>
+					<Section>
 						<a className='sideNav-commitchangeLogo' href='<%= root_path %>' title='Go To Home Page'>
 							<Logo {...props.logo} />
 						</a>
-					</section>) : ''
+					</Section>) : ''
 			}