PiggyBank Audit

This documentation is an overall summary on the PiggyBank code audit for the client project. Overall, the code is written and organized well with some minor hiccups.

The Audit is layed out as such:

Main Components
- Header
- User Dashboard (and included components)
- Footer
Other Notes Around the Code
ESLint Summary
NPM Audit Summary

Header - Navigation links

Links are not active in header. Cant seem to navigate properly. Links are pulled into the Header from a Menu Items object in piggyback-client/src/utils/constants.ts that looks like:

export const MenuItems: IMenuItems[] = [
{ name: 'Home', url: '/', dropdown: false, subItems: [], accessAllowed: false },
{
	name: 'Dashboard'
	url: '/user',
	dropdown: false,
	subItems: [
		{ name: 'Locations', url: '/addLocation' },
		{ name: 'Routes', url: '/routes' },
		{ name: 'Offers', url: '/scheduled-route/offer' },
		{ name: 'Requests', url: '/scheduled-route/request' },
		{ name: 'Matches', url: '/match' },
		{ name: 'Send Rides', url: '/rides/send' },
		{ name: 'Approve Rides', url: '/rides/approve' },
		{ name: 'Schedule Summary', url: '/summary' },
	],
	accessAllowed: false,
},
// { name: 'Household', url: '#', dropdown: false, subItems: [], accessAllowed: false },
{ name: 'Groups', url: '#', dropdown: false, subItems: [], accessAllowed: false },
{
	name: 'Pricing Calculator',
	url: '/pricing-calculator',
	dropdown: false,
	subItems: [],
	accessAllowed: false,
},
{
	name: 'About Us',
	url: '#',
	dropdown: true,
	subItems: [
		{ name: 'FAQ', url: '/' },
		{ name: 'T&C', url: '/' },
		{ name: 'Media', url: '/' },
		{ name: 'Founder Intros', url: '/' },
		{ name: 'Parents Stories', url: '/' },
	],
	accessAllowed: true,
}];

Many link objects have a url property of url: '#' or url: '/' and they should be removed or commented out until functionality is included

Home Page piggyback-client/src/pages/index.tsx

<Button variant="contained" sx={{ color: 'white' }}>
	Get Started
</Button>

Button with no active link is shown in the very beginning of the home page with no proper functionality . It should be removed

Dashboard piggyback-client/src/pages/user/index.tsx

Great separation of components (details of each to follow)
Great usage of Tab components

Component 1: Locations piggyback-client/src/components/UserPages/locations.tsx

Populated by API and follows LocationDocument interface (piggyback-client/src/api/models/location/location-document.ts)
Button linking to /addLocation should be renamed (but does link correctly)

<Button
color="primary"
variant="contained"
sx={{ color: 'white' }}
onClick={() => router.push(AppRoutes.locations)}
>
	Go to Locations
</Button>

Component 2: RoutesUser piggyback-client/src/components/UserPages/routes-user.tsx

Populated by API and follows RouteListDocument interface (piggyback-client/src/api/models/route/route-document.ts)
Button linking to /routes should be renamed to be clear on where we are going (but does link correctly)

Component 3: Matches piggyback-client/src/components/UserPages/matches.tsx

Using Hardcoded data (Component is incomplete)
Button linking to /match should be renamed to be clear on where we are going (but does link correctly)

Component 4: Households piggyback-client/src/components/UserPages/households.tsx

Populated by Data set in Auth code and follows Household interface (piggyback-client/src/utils/models.ts)
Button links back to home though it is name "Go to Households"

<Button
color="primary"
variant="contained"
sx={{ color: 'white' }}
onClick={() => router.push(AppRoutes.home)}
>
	Go to Households
</Button>

Component 5: Groups piggyback-client/src/components/UserPages/groups.tsx

Using Hardcoded data (Component is incomplete)
Button links back to home though it is name "Go to Groups"

<Button
color="primary"
variant="contained"
sx={{ color: 'white' }}
onClick={() => router.push(AppRoutes.home)}
>
	Go to Groups
</Button>

Component 6: Messages piggyback-client/src/components/UserPages/messages.tsx

Using Hardcoded data (Component is incomplete)
Button links back to home though it is name "Go to Messages"

<Button
color="primary"
variant="contained"
sx={{ color: 'white' }}
onClick={() => router.push(AppRoutes.home)}
>
	Go to Messages
</Button>

Footer piggyback-client/src/components/Layout/Footer/index.tsx

Links are not active in the footer. Can't seem to navigate properly. Links are pulled into the Footer from a Routes Items object in piggyback-client/src/utils/constants.ts that looks like:

export  const  Routes: Route[] = [
	{ name:  'Home', url:  '/' },
	{ name:  'Dashboard', url:  '/user' },
	{ name:  'Household', url:  '#' },
	{ name:  'Groups', url:  '#' },
	{ name:  'Pricing Calculator', url:  '#' },
	{ name:  'About Us', url:  '#' },
];

None of these items seem to link to any proper page. I am wondering why we are not using an object similar to the MenuItems object above in the constants.ts file

Other Notes

All models and interfaces should live in the same place. Many are mentioned above but they dont seem to all live in the same folder
Links/Buttons with no functionality should be commented out. Many components include code that is not functional
MUI is leveraged but not in the best ways but that can be explored with new designs
Repeated Code in /match, /addLocation and /routes use a similar code snippet. This should be a component:

<Box
sx={{ width: 1, height: 190, border: '1px solid #C9C9C9', borderRadius: 5, boxShadow: 1 }}
display="flex"
justifyContent="space-between"
alignItems="center"
>
	<Box
	sx={{ color: 'primary.main', margin: 3 }}
	display="flex"
	justifyContent="center"
	alignItems="center"
	flexDirection="column"
	>
		<EmojiPeopleIcon sx={{ color: '#303030', width: 90, height: 80 }} />
		<Typography variant="h4" sx={{ fontWeight: '600', color: 'primary.main' }}>
			Matched Routes
		</Typography>
	</Box>
	<Box
	sx={{ margin: 3 }}
	display="flex"
	justifyContent="center"
	alignItems="center"
	flexDirection="column"
	>
		<Box
		component="span"
		sx={{ color: '#303030', textAlign: 'center', fontStyle: 'italic' }}
		display="flex"
		justifyContent="center"
		alignItems="center"
		>
			<Typography variant="h5" sx={{ fontWeight: '600' }}>
				PiggyBack Point Balance
			</Typography>
			<Typography variant="h4" sx={{ fontWeight: '600', color: 'primary.main' }}>
				{pointsNumber}
			</Typography>
		</Box>
		<Button variant="contained" color="secondary" sx={{ color: 'white' }}>
			Purchase More Points!
		</Button>
	</Box>
</Box>

Code above also uses a 'Purchase More Points' button that has NO functionality (this is repeated in various components)

Incomplete Pages

(Will I need to create these?)

Groups
About Us
FAQ
T & C
Media
Founder Intros
Parents Stories

ESLint

ESLint found only warnings that should addressed for the cleanest code possible.

./src/pages/pricing-calculator.tsx

83:6 Warning: React Hook useEffect has a missing dependency: 'household'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/pages/scheduled-route/[type].tsx

124:6 Warning: React Hook useEffect has missing dependencies: 'householdUsers.length' and 'setValue'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

132:6 Warning: React Hook useEffect has missing dependencies: 'setValue' and 'userData?.sub'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

./src/components/Layout/Header/index.tsx

175:13 Warning: passHref is missing. See: https://nextjs.org/docs/messages/link-passhref @next/next/link-passhref

./src/components/Map/index.tsx

59:6 Warning: React Hook useEffect has a missing dependency: 'directionsRenderer'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

130:3 Warning: React Hook useEffect has a missing dependency: 'callback'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/components/Matches/OfferTable.tsx

38:6 Warning: React Hook useEffect has a missing dependency: 'household'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/components/Matches/RequestTable.tsx

39:6 Warning: React Hook useEffect has a missing dependency: 'household'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/components/ResumeTrips/CollapseTable.tsx

55:6 Warning: React Hook useEffect has a missing dependency: 'type'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/components/UserPages/locations.tsx

54:6 Warning: React Hook useEffect has a missing dependency: 'household'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

./src/components/UserPages/routes-user.tsx

43:6 Warning: React Hook useEffect has a missing dependency: 'household'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

NPM Audit

NPM audit found many issues at different levels pertaining to the node modules the project is dependent on. They can be found in the node_modules folder. This may seem like gibberish but just notes for the developers

async 2.0.0 - 2.6.3 Severity: high

Prototype Pollution in async - https://github.com/advisories/GHSA-fwr7-v2mv-hh25

fix available via npm audit fix

hermes-engine <=0.9.0 Severity: critical

Access of Resource Using Incompatible Type in Hermes - https://github.com/advisories/GHSA-7mhc-prgv-r3q4

fix available via npm audit fix

react-native <=0.0.0-ffdfbbec0 || 0.61.0-rc.0 - 0.68.2

Depends on vulnerable versions of @react-native-community/cli

Depends on vulnerable versions of @react-native-community/cli-platform-android

Depends on vulnerable versions of @react-native-community/cli-platform-ios

Depends on vulnerable versions of hermes-engine

shell-quote <=1.7.2 Severity: critical

Improper Neutralization of Special Elements used in a Command in Shell-quote - https://github.com/advisories/GHSA-g4rg-993r-mgx7

fix available via npm audit fix

@react-native-community/cli-tools 4.8.0 - 5.0.0-alpha.0 || 5.0.1-alpha.0 - 6.2.0

Depends on vulnerable versions of shell-quote

@react-native-community/cli 4.8.0 - 7.0.3

Depends on vulnerable versions of @react-native-community/cli-hermes

Depends on vulnerable versions of @react-native-community/cli-plugin-metro

Depends on vulnerable versions of @react-native-community/cli-server-api