noah/noahspan-root
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

initial launch

Browse Source
This commit is contained in:
Noah Spannbauer
2025-02-23 19:35:44 -06:00
parent ce334cb7fd
commit 12101ce409
18 changed files with 159 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/App.tsx
View File

@@ -1,7 +1,6 @@
import { Route, Routes } from 'react-router-dom';
import Projects from './components/projects/Projects';
import SiteNav from './components/siteNav/SiteNav';
import { useAppContext } from './hooks/appContext/UseAppContext';
import { IPublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
@@ -10,8 +9,6 @@ interface AppProps {
}
const App = ({ pca }: AppProps) => {
const appContext = useAppContext();
return (
<MsalProvider instance={pca}>
<SiteNav />

9
app/src/components/actionMenu/ActionMenu.tsx
View File

@@ -3,6 +3,7 @@ import { ActionMenuProps } from './ActionMenuProps.interface';
import {
Icon,
IconButton,
IconName,
ListItemIcon,
ListItemText,
Menu,
@@ -26,7 +27,7 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: ActionMenuProps) => {
return (
<div>
<IconButton onClick={onOpenActionMenu}>
<Icon iconName='fa-ellipsis-vertical' size="sm" />
<Icon iconName={IconName.ELLIPSIS_VERTICAL} size="sm" />
</IconButton>
<Menu
anchorEl={anchorElAction}
@@ -36,20 +37,20 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: ActionMenuProps) => {
>
<MenuItem onClick={() => onOpenCloseForm(FormMode.EDIT, id)}>
<ListItemIcon>
<Icon iconName='fa-pen' size="lg" />
<Icon iconName={IconName.PEN} size="lg" />
</ListItemIcon>
<ListItemText>Edit</ListItemText>
</MenuItem>
<MenuItem onClick={() => onOpenCloseForm(FormMode.VIEW, id)}>
<ListItemIcon>
<Icon iconName='fa-eye' size="lg" />
<Icon iconName={IconName.EYE} size="lg" />
</ListItemIcon>
<ListItemText>View</ListItemText>
</MenuItem>
<hr className="my-3" />
<MenuItem onClick={() => onDelete(id)}>
<ListItemIcon>
<Icon iconName='fa-trash' size="lg" />
<Icon iconName={IconName.TRASH} size="lg" />
</ListItemIcon>
<ListItemText>Delete</ListItemText>
</MenuItem>

6
app/src/components/confirmationDialog/ConfirmationDialog.tsx
View File

@@ -1,5 +1,4 @@
import {
Box,
Button,
Dialog,
DialogActions,
@@ -7,6 +6,7 @@ import {
DialogContentText,
DialogTitle,
Icon,
IconName,
Spinner
} from '@noahspan/noahspan-components';
import { ConfirmationDialogProps } from './ConfirmationDialogProps.interface';
@@ -33,13 +33,13 @@ const ConfirmationDialog = ({
{isLoading && <Spinner />}
</DialogContent>
<DialogActions>
<Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName='fa-xmark' />}>
<Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName={IconName.XMARK} />}>
No
</Button>
<Button
onClick={onConfirm}
variant="contained"
startIcon={<Icon iconName='fa-circle-check'/>}
startIcon={<Icon iconName={IconName.CIRCLE_CHECK}/>}
>
Yes
</Button>

2
app/src/components/projectForm/ProjectForm.tsx
View File

@@ -15,7 +15,7 @@ import { initialState, reducer } from './reducer';
import { ProjectFormProps } from './ProjectFormProps.interface';
import { FormMode } from '../../enums/formMode';
import { useIsAuthenticated } from '@azure/msal-react';
import { useAccessToken } from '../../hooks/accessToken/UseAccessToken';
import { useAccessToken } from '../../hooks/accessToken/UseAccessToken'
import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';

72
app/src/components/projects/Projects.tsx
View File

@@ -1,5 +1,6 @@
import { Project } from './Project.interface';
import {
Alert,
Box,
Button,
Card,
@@ -10,6 +11,7 @@ import {
Grid,
Icon,
IconName,
Spinner,
Typography
} from '@noahspan/noahspan-components';
import { useIsAuthenticated } from '@azure/msal-react';
@@ -29,33 +31,15 @@ const Projects = () => {
const isAuthenticated = useIsAuthenticated();
const { getAccessToken } = useAccessToken();
const findIconByName: IconName = (name: string) => {
const keys = Object.keys(IconName);
for (const key of keys) {
if (IconName[key] === name) {
return key
}
}
return undefined;
}
const getProjects = async (): Promise<Project[]> => {
try {
// const config = isAuthenticated
// ? { headers: { Authorization: await getAccessToken() } }
// : {};
const response: AxiosResponse = await httpClient.get(
`api/projects`,
// config
);
const projects: Project[] = response.data;
projects.sort((a, b) => Number(a.order) - Number(b.order))
console.log(projects)
return projects;
} catch (error) {
throw new Error('broken');
@@ -107,19 +91,19 @@ const Projects = () => {
? { headers: { Authorization: `${token}` } }
: {};
// await httpClient.delete(`api/logs/log/${state.selectedEntryId}`, config);
await httpClient.delete(`api/projects/project/${state.selectedProjectId}`, config);
dispatch({
type: 'SET_DELETE',
payload: { isConfirmationDialogOpen: false, selectedProjectId: undefined }
});
// await getProjects();
await getProjects();
} catch (error) {
const axiosError = error as AxiosError;
dispatch({
type: 'SET_ERROR',
payload: `Loading of logbook entries failed with the following message: ${axiosError.message}`
type: 'SET_ALERT',
payload: { severity: 'error', message: `Loading of projects failed with the following message: ${axiosError.message}` }
});
} finally {
dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: false });
@@ -136,16 +120,24 @@ const Projects = () => {
useEffect(() => {
const loadProjects = async () => {
try {
dispatch({ type: 'SET_IS_LOADING', payload: true })
const projects = await getProjects();
dispatch({ type: 'SET_PROJECTS', payload: projects })
} catch (error) {
console.log(error);
dispatch({
type: 'SET_ALERT',
payload: { severity: 'error', message: `Loading of projects failed with the following message: ${error}` }
});
} finally {
dispatch({ type: 'SET_IS_LOADING', payload: false })
}
}
loadProjects()
}, []);
if (!state.isFormOpen || !state.isConfirmDialogOpen) {
loadProjects();
}
}, [state.isFormOpen, state.isConfirmDialogOpen]);
return (
<Container>
@@ -158,14 +150,27 @@ const Projects = () => {
{isAuthenticated &&
<Button
onClick={() => onOpenCloseProjectForm(FormMode.ADD)}
startIcon={<Icon iconName='fa-plus' />}
startIcon={<Icon iconName={IconName.PLUS}/>}
variant='contained'
>
Add Project
</Button>
}
</Grid>
{state.projects.length > 0 && state.projects.map((project: Project) => {
{!state.isLoading && state.alert && (
<Grid display="flex" justifyContent="center" size={12}>
<Alert
onClose={() =>
dispatch({ type: 'SET_ALERT', payload: undefined })
}
severity={state.alert.severity}
sx={{ width: '100%' }}
>
{state.alert.message}
</Alert>
</Grid>
)}
{!state.isLoading && state.projects.length > 0 && state.projects.map((project: Project) => {
return (
<Grid display='flex' justifyContent='center' size={12}>
<Card
@@ -175,7 +180,7 @@ const Projects = () => {
>
<CardHeader
action={isAuthenticated ? <ActionMenu id={project.rowKey} onDelete={onDeleteProject} onOpenCloseForm={onOpenCloseProjectForm} /> : null}
avatar={<Icon iconName={IconName[findIconByName(project.iconName)]} size='2x' />}
avatar={<Icon iconName={project.iconName as IconName} size='2x' />}
subheader={project.subTitle}
title={project.title}
slotProps={{
@@ -198,7 +203,6 @@ const Projects = () => {
component='a'
href={`https://github.com/noahspannbauer/${project.repoName}`}
startIcon={<Icon iconName={IconName.GITHUB} />}
target='_blank'
>
Code
</Button>
@@ -221,6 +225,16 @@ const Projects = () => {
</Grid>
)
})}
{state.isLoading && (
<>
<Grid display="flex" justifyContent="center" size={12}>
<Spinner />
</Grid>
<Grid display="flex" justifyContent="center" size={12}>
Loading...
</Grid>
</>
)}
</Grid>
{state.isFormOpen &&
<ProjectForm

3
app/src/components/projects/ProjectsState.interface.ts
View File

@@ -1,10 +1,11 @@
import { FormMode } from '../../enums/formMode';
import { Alert } from '../../interfaces';
import { Project } from './Project.interface';
export interface ProjectsState {
alert: Alert | undefined;
projects: Project[];
formMode: FormMode;
error: string | undefined;
isConfirmDialogLoading: boolean;
isConfirmDialogOpen: boolean;
isFormOpen: boolean;

11
app/src/components/projects/reducer.ts
View File

@@ -1,6 +1,7 @@
import { FormMode } from '../../enums/formMode';
import { ProjectsState } from './ProjectsState.interface'
import { Project } from './Project.interface';
import { Alert } from '../../interfaces';
type Action =
| {
@@ -11,7 +12,7 @@ type Action =
};
}
| { type: 'SET_PROJECTS'; payload: Project[] }
| { type: 'SET_ERROR'; payload: string | undefined }
| { type: 'SET_ALERT'; payload: Alert | undefined }
| { type: 'SET_FORM_MODE'; payload: FormMode }
| { type: 'SET_IS_CONFIRMATION_DIALOG_LOADING'; payload: boolean }
| { type: 'SET_IS_LOADING'; payload: boolean }
@@ -25,13 +26,13 @@ type Action =
};
export const initialState: ProjectsState = {
projects: [],
error: undefined,
alert: undefined,
formMode: FormMode.CANCEL,
isConfirmDialogLoading: false,
isConfirmDialogOpen: false,
isFormOpen: false,
isLoading: false,
projects: [],
selectedProjectId: undefined
};
@@ -53,10 +54,10 @@ export const reducer = (
projects: action.payload
};
}
case 'SET_ERROR': {
case 'SET_ALERT': {
return {
...state,
error: action.payload
alert: action.payload
};
}
case 'SET_FORM_MODE': {

40
app/src/components/siteNav/SiteNav.tsx
View File

@@ -3,9 +3,9 @@ import { useNavigate } from 'react-router-dom';
import { useAppContext } from '../../hooks/appContext/UseAppContext';
import {
Icon,
IconName,
MenuItem,
Navbar,
Spinner,
Typography
} from '@noahspan/noahspan-components';
import { useIsAuthenticated, useMsal } from '@azure/msal-react';
@@ -14,21 +14,25 @@ import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { AxiosInstance, AxiosResponse } from 'axios';
import { User } from '@microsoft/microsoft-graph-types';
const SiteNav = () => {
const [loading, setLoading] = useState<boolean>(false);
const SiteNav: React.FC<unknown> = () => {
const [userPhoto, setUserPhoto] = useState<string>();
const [pages, setPages] = useState<{ name: string; url: string; }[]>([]);
const httpClient: AxiosInstance = useHttpClient();
const appContext = useAppContext();
const isAuthenticated = useIsAuthenticated();
const { getAccessToken } = useAccessToken();
const { instance } = useMsal();
const navigate = useNavigate();
const pages = [
{
name: 'Projects',
url: '/'
}
];
const getPages = () => {
const pages = [
{
name: 'Projects',
url: '/'
}
];
setPages(pages)
};
const handleSignIn = () => {
instance.loginRedirect({
scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
@@ -39,7 +43,7 @@ const SiteNav = () => {
};
const getUserProfile = async (accessToken: string): Promise<User> => {
try {
const response: AxiosResponse = await httpClient.get(`api/userProfile`, {
const response: AxiosResponse = await httpClient.get(`api/user/profile`, {
headers: {
Authorization: accessToken
}
@@ -53,7 +57,7 @@ const SiteNav = () => {
};
const getUserPhoto = async (accessToken: string): Promise<string> => {
try {
const response: AxiosResponse = await httpClient.get(`api/userPhoto`, {
const response: AxiosResponse = await httpClient.get(`api/user/photo`, {
headers: {
Authorization: accessToken
},
@@ -76,7 +80,7 @@ const SiteNav = () => {
const Settings = () => {
return (
<MenuItem onClick={handleSignOut}>
<Icon iconName='fa-sign-out' />
<Icon iconName={IconName.SIGN_OUT} />
<Typography sx={{ marginLeft: '10px', textAlign: 'center' }}>
Sign Out
</Typography>
@@ -87,11 +91,10 @@ const SiteNav = () => {
useEffect(() => {
const setUserProfile = async () => {
try {
setLoading(true);
const accessToken: string = await getAccessToken();
const userProfile = await getUserProfile(accessToken);
const userPhoto = await getUserPhoto(accessToken);
console.log(userPhoto)
setUserPhoto(userPhoto);
@@ -101,8 +104,6 @@ const SiteNav = () => {
});
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
};
@@ -111,15 +112,20 @@ const SiteNav = () => {
Object.keys(appContext.state.userProfile).length === 0
) {
setUserProfile();
getPages();
}
}, [isAuthenticated]);
useEffect(() => {
getPages();
}, [])
return (
<Navbar
handlePageClick={handlePageClick}
handleSignIn={handleSignIn}
isAuthenticated={isAuthenticated}
logo={<Icon iconName='fa-user-tie' size="2x" />}
logo={<Icon iconName={IconName.USER_TIE} size='2xl' />}
pages={pages}
settings={<Settings />}
userPhoto={userPhoto}

1
app/src/context/appContext/AppContextProvider.tsx
View File

@@ -9,7 +9,6 @@ const AppContextProvider = (
props: AppContextProviderProps
) => {
const intialState: AppContextState = {
featureFlags: [],
userProfile: {}
};
const [state, dispatch] = useReducer(reducer, intialState);

1
app/src/context/appContext/AppContextState.interface.ts
View File

@@ -1,6 +1,5 @@
import { User } from '@microsoft/microsoft-graph-types';
export interface AppContextState {
featureFlags: { key: string; enabled: boolean }[];
userProfile: User;
}

4
app/src/interfaces.ts Normal file
View File

@@ -0,0 +1,4 @@
export interface Alert {
severity: 'success' | 'error' | 'info' | 'warning';
message: string;
}