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

Feature/1 add projects and about pages #2

Merged
noahspannbauer merged 7 commits from feature/1-add-projects-and-about-pages into main 2025-02-23 15:45:05 -05:00
Conversation 0 Commits 7 Files Changed 95 +14643 -1500
95 changed files with 14643 additions and 1500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
.github/workflows/api_build.yaml vendored Normal file
View File

@@ -0,0 +1,69 @@
name: 'API Build'
on:
workflow_call:
inputs:
environment_name:
required: true
type: string
version_number:
required: true
type: string
jobs:
build:
runs-on: ubuntu-latest
environment: ${{ inputs.environment_name }}
steps:
- name: Checkout
uses: actions/checkout@v4
with:
sparse-checkout: |
api
- uses: pnpm/action-setup@v4
name: Install pnpm
with:
version: 10
run_install: false
- name: Install Nest CLI
run: |
npm install -g @nestjs/cli
- name: 'Setup Node'
uses: actions/setup-node@v4
with:
node-version: ${{ vars.NODE_VERSION }}
- name: Install dependencies
run: |
pnpm install
- name: Build
run: |
pnpm --filter api build
- name: Deploy
if: ${{ github.event_name != 'pull_request' }}
run: |
pnpm --filter api --prod deploy ./.prod/api
- name: Log into Docker Hub
if: ${{ github.event_name != 'pull_request' }}
uses: docker/login-action@v3
with:
username: ${{ vars.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Setup Docker Buildx
if: ${{ github.event_name != 'pull_request' }}
uses: docker/setup-buildx-action@v3
- name: Build and push to registry
if: ${{ github.event_name != 'pull_request' }}
uses: docker/build-push-action@v6
with:
push: true
tags: noahspan/flying-api:${{ inputs.version_number }}
context: .
target: api

70
.github/workflows/app_build.yaml vendored Normal file
View File

@@ -0,0 +1,70 @@
name: 'App Build'
on:
workflow_call:
inputs:
environment_name:
required: true
type: string
version_number:
required: true
type: string
env:
VITE_API_URL: ${{ vars.VITE_API_URL }}
VITE_CLIENT_ID: ${{ vars.VITE_CLIENT_ID }}
VITE_TENANT_ID: ${{ vars.VITE_TENANT_ID }}
VITE_REDIRECT_URL: ${{ vars.VITE_REDIRECT_URL }}
jobs:
build:
runs-on: ubuntu-latest
environment: ${{ inputs.environment_name }}
steps:
- uses: actions/checkout@v4
with:
sparse-checkout: |
app
- uses: pnpm/action-setup@v4
name: Install pnpm
with:
version: 10
run_install: false
- name: 'Setup Node'
uses: actions/setup-node@v4
with:
node-version: ${{ vars.NODE_VERSION }}
- name: Install
run: |
pnpm install
- name: Build
run: |
pnpm --filter app build
- name: Deploy
if: ${{ github.event_name != 'pull_request' }}
run: |
pnpm --filter app --prod deploy ./.prod/app
- name: Setup Docker Buildx
if: ${{ github.event_name != 'pull_request' }}
uses: docker/setup-buildx-action@v3
- name: Log into Docker Hub
if: ${{ github.event_name != 'pull_request' }}
uses: docker/login-action@v3
with:
username: ${{ vars.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Build and push to registry
if: ${{ github.event_name != 'pull_request' }}
uses: docker/build-push-action@v6
with:
push: true
tags: noahspan/flying-app:${{ inputs.version_number }}
context: .
target: app

28
.github/workflows/changes.yaml vendored Normal file
View File

@@ -0,0 +1,28 @@
name: Changes
on:
workflow_call:
outputs:
api:
value: ${{ jobs.changes.outputs.api }}
app:
value: ${{ jobs.changes.outputs.app }}
jobs:
changes:
name: filter
runs-on: ubuntu-latest
outputs:
api: ${{ steps.filter.outputs.api }}
app: ${{ steps.filter.outputs.app }}
steps:
- uses: actions/checkout@v3
- uses: dorny/paths-filter@v3
id: filter
with:
initial-fetch-depth: 2
filters: |
api:
- 'api/**'
app:
- 'app/**'

35
.github/workflows/deploy.yaml vendored Normal file
View File

@@ -0,0 +1,35 @@
name: Deploy
on:
workflow_call:
inputs:
app_name:
required: true
type: string
environment_name:
required: true
type: string
version_number:
required: true
type: string
permissions:
id-token: write
contents: read
jobs:
deploy:
runs-on: ubuntu-latest
environment: ${{ inputs.environment_name }}
steps:
- name: Log in to Azure
uses: azure/login@v2
with:
client-id: ${{ vars.VITE_CLIENT_ID }}
subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
tenant-id: ${{ vars.VITE_TENANT_ID }}
- name: Azure CLI script
uses: azure/cli@v2
with:
azcliversion: latest
inlineScript: |
az containerapp update --name ${{ inputs.app_name }}-${{ inputs.environment_name }} --resource-group noahspan-flying --image docker.io/noahspan/${{ inputs.app_name }}:${{ inputs.version_number }}

55
.github/workflows/main.yaml vendored Normal file
View File

@@ -0,0 +1,55 @@
name: Main
on:
push:
branches:
- main
jobs:
changes:
uses: ./.github/workflows/changes.yaml
build-api:
if: ${{ needs.changes.outputs.api == 'true' }}
name: build-api
needs:
- changes
uses: ./.github/workflows/api_build.yaml
with:
environment_name: test
version_number: ${{ github.run_id }}
secrets: inherit
deploy-api:
name: deploy-api
needs:
- changes
- build-api
uses: ./.github/workflows/deploy.yaml
with:
app_name: flying-api
environment_name: test
version_number: ${{ github.run_id }}
secrets: inherit
build-app:
if: ${{ needs.changes.outputs.app == 'true' }}
name: build-app
needs:
- changes
uses: ./.github/workflows/app_build.yaml
with:
environment_name: test
version_number: ${{ github.run_id }}
secrets: inherit
deploy-app:
name: deploy-app
needs:
- changes
- build-app
uses: ./.github/workflows/deploy.yaml
with:
app_name: flying-app
environment_name: test
version_number: ${{ github.run_id }}
secrets: inherit

30
.github/workflows/pull_request.yaml vendored Normal file
View File

@@ -0,0 +1,30 @@
name: Pull Request
on:
pull_request:
jobs:
changes:
uses: ./.github/workflows/changes.yaml
build-api:
if: ${{ needs.changes.outputs.api == 'true' }}
name: build-api
needs:
- changes
uses: ./.github/workflows/api_build.yaml
with:
environment_name: pull_request
version_number: ${{ github.run_id }}
secrets: inherit
build-app:
if: ${{ needs.changes.outputs.app == 'true' }}
name: build-app
needs:
- changes
uses: ./.github/workflows/app_build.yaml
with:
environment_name: pull_request
version_number: ${{ github.run_id }}
secrets: inherit

44
.github/workflows/tag.yaml vendored Normal file
View File

@@ -0,0 +1,44 @@
name: Tag
on:
push:
tags:
- 'v[0-9]+.[0-9]+.[0-9]+'
jobs:
build-api:
name: build-api
uses: ./.github/workflows/api_build.yaml
with:
environment_name: prod
version_number: ${{ github.ref_name }}
secrets: inherit
deploy-api:
name: deploy-api
needs:
- build-api
uses: ./.github/workflows/deploy.yaml
with:
app_name: flying-api
environment_name: prod
version_number: ${{ github.ref_name }}
secrets: inherit
build-app:
name: build-app
uses: ./.github/workflows/app_build.yaml
with:
environment_name: prod
version_number: ${{ github.ref_name }}
secrets: inherit
deploy-app:
name: deploy-app
needs:
- build-app
uses: ./.github/workflows/deploy.yaml
with:
app_name: flying-app
environment_name: prod
version_number: ${{ github.ref_name }}
secrets: inherit

33
.gitignore vendored
View File

@@ -1,29 +1,8 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
node_modules
**/.env
**/.env.*
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Terraform
**/.terraform/*
*.tfstate
*.tfstate.*
.dapr
**/**/secrets.json
.prod

19
.mattrbld/collections/profile.json
View File

@@ -1,19 +0,0 @@
{
"allowedTypes": null,
"dir": "/data/profile",
"disableComments": false,
"disablePreview": false,
"draftByDefault": false,
"schemas": [
"/.mattrbld/schemas/Profile.json"
],
"linkable": false,
"maxSize": null,
"permissions": {
"everybody": [
"everything"
]
},
"type": "json",
"urlTemplate": ""
}

19
.mattrbld/collections/projects.json
View File

@@ -1,19 +0,0 @@
{
"allowedTypes": null,
"dir": "/data/projects",
"disableComments": false,
"disablePreview": false,
"draftByDefault": false,
"schemas": [
"/.mattrbld/schemas/Projects.json"
],
"linkable": false,
"maxSize": null,
"permissions": {
"everybody": [
"everything"
]
},
"type": "json",
"urlTemplate": ""
}

90
.mattrbld/config.json
View File

@@ -1,90 +0,0 @@
{
"autoquotes": null,
"brandColors": [],
"corsProxy": "http://localhost:9999",
"name": "noahspan-root",
"sidebar": [
{
"label": "The sidebar has not yet been configured for this project"
},
{
"icon": "wrench-and-driver",
"label": "Configure now",
"target": {
"name": "Project.Settings",
"query": {
"tab": "sidebar"
}
},
"onlyPrivileged": true
},
{
"separator": true
},
{
"label": "Dashboard",
"icon": "grid",
"target": {
"name": "Project"
},
"protected": true
},
{
"label": "Media Library",
"icon": "image-stack",
"target": {
"name": "Project.MediaLibrary"
},
"protected": true
},
{
"label": "Settings",
"icon": "settings",
"target": {
"name": "Project.Settings"
},
"onlyPrivileged": true,
"protected": true
},
{
"separator": true
},
{
"icon": "user",
"label": "Profile",
"target": {
"name": "Project.Collection",
"params": {
"path": "/.mattrbld/collections/profile.json"
}
}
},
{
"icon": "repo",
"label": "Projects",
"target": {
"name": "Project.Collection",
"params": {
"path": "/.mattrbld/collections/projects.json"
}
}
}
],
"slugifyOptions": null,
"customRoles": [],
"draftsDir": null,
"previewUrl": null,
"languages": [],
"media": {
"advanced": false,
"customFields": null,
"dir": null,
"maxSize": null,
"outputPath": null,
"permissions": {
"everybody": [
"everything"
]
}
}
}

905
.mattrbld/schemas/Profile.json
View File

@@ -1,905 +0,0 @@
{
"fields": [
{
"type": "rows",
"default": null,
"icon": "rows",
"key": "experiences",
"label": "Experiences",
"options": {
"compact": true,
"allowEditing": true,
"itemLabel": "Row"
},
"tab": "Experiences",
"validation": {
"max": null,
"min": null,
"unit": "rows"
},
"value": [
{
"type": "group",
"displayField": null,
"icon": "group",
"key": "experience",
"label": "Experience",
"tab": "Experiences",
"value": [
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "jobTitle",
"label": "JobTitle",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Experiences",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "company",
"label": "Company",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Experiences",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "location",
"label": "Location",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Experiences",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "startDate",
"label": "StartDate",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Experiences",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "endDate",
"label": "EndDate",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Experiences",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "rich text",
"default": null,
"icon": "text",
"key": "details",
"label": "Details",
"localised": false,
"options": {
"outputFormat": "markdown",
"blockFormats": [
"blockquote",
"heading",
"hr",
"orderedList",
"unorderedList",
"image"
],
"inlineFormats": [
"em",
"strong",
"link"
],
"formatOptions": [
"allowQuoteFooters",
"allowNestedLists",
"allowImageCaptions"
],
"inputRuleOptions": [
"autoquotes",
"dashes",
"ellipsis",
"noDoubleCaps",
"noDoubleSpace"
],
"minHeading": 2,
"maxHeading": 4,
"codeLangs": [
"html",
"css",
"javascript",
"markdown"
],
"allowRaw": false,
"urlTemplate": "",
"urlSuffix": "",
"linkOptions": [
"forceBlankTarget",
"allowExternal",
"allowInternal"
]
},
"tab": "Experiences",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "rows",
"default": null,
"icon": "rows",
"key": "education",
"label": "Education",
"options": {
"compact": true,
"allowEditing": true,
"itemLabel": "Row"
},
"tab": "Education",
"validation": {
"max": null,
"min": null,
"unit": "rows"
},
"value": [
{
"type": "group",
"displayField": null,
"icon": "group",
"key": "Education",
"label": "Education",
"tab": "Education",
"value": [
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "school",
"label": "School",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Education",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "location",
"label": "Location",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Education",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "degree",
"label": "Degree",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Education",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "fieldOfStudy",
"label": "Field of Study",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Education",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "rich text",
"default": null,
"icon": "text",
"key": "details",
"label": "Details",
"localised": false,
"options": {
"outputFormat": "markdown",
"blockFormats": [
"blockquote",
"heading",
"hr",
"orderedList",
"unorderedList",
"image"
],
"inlineFormats": [
"em",
"strong",
"link"
],
"formatOptions": [
"allowQuoteFooters",
"allowNestedLists",
"allowImageCaptions"
],
"inputRuleOptions": [
"autoquotes",
"dashes",
"ellipsis",
"noDoubleCaps",
"noDoubleSpace"
],
"minHeading": 2,
"maxHeading": 4,
"codeLangs": [
"html",
"css",
"javascript",
"markdown"
],
"allowRaw": false,
"urlTemplate": "",
"urlSuffix": "",
"linkOptions": [
"forceBlankTarget",
"allowExternal",
"allowInternal"
]
},
"tab": "About",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "firstName",
"label": "First Name",
"localised": false,
"options": {
"wrapping": false,
"multiline": false
},
"tab": "Intro",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "lastName",
"label": "Last Name",
"localised": false,
"options": {
"wrapping": false,
"multiline": false
},
"tab": "Intro",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "link",
"default": null,
"icon": "link",
"key": "photoUrl",
"label": "Photo URL",
"localised": false,
"options": {
"type": "external",
"byFilePath": false,
"urlSuffix": "/",
"urlTemplate": ""
},
"tab": "Intro",
"validation": {
"required": false
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "title",
"label": "Title",
"localised": false,
"options": {
"wrapping": false,
"multiline": false
},
"tab": "Intro",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "location",
"label": "Location",
"localised": false,
"options": {
"wrapping": false,
"multiline": false
},
"tab": "Intro",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "rows",
"default": null,
"icon": "rows",
"key": "skills",
"label": "Skills",
"options": {
"compact": true,
"allowEditing": true,
"itemLabel": "Row"
},
"tab": "Skills",
"validation": {
"max": null,
"min": null,
"unit": "rows"
},
"value": [
{
"type": "group",
"displayField": null,
"icon": "group",
"key": "skillGroup",
"label": "Skill Group",
"tab": "Skills",
"value": [
{
"type": "select",
"default": null,
"icon": "dropdown",
"key": "category",
"label": "Category",
"options": {
"filterable": false,
"removable": false,
"placeholder": "Select a value…",
"options": [
"Experienced",
"Familiar"
]
},
"tab": "Skills",
"validation": {
"required": false
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "select",
"default": null,
"icon": "dropdown",
"key": "group",
"label": "Group",
"options": {
"filterable": false,
"removable": false,
"placeholder": "Select a value…",
"options": [
"Agile Methodologies",
"Cloud",
"Containerization",
"Continuous Integration and Continuous Delivery",
"Database",
"Front-End Web Development",
"Infrastructure as Code",
"Messaging",
"Programming Languages",
"Test Automation"
]
},
"tab": "Skills",
"validation": {
"required": false
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "rows",
"default": null,
"icon": "rows",
"key": "skills",
"label": "Skill",
"options": {
"compact": true,
"allowEditing": true,
"itemLabel": "Row"
},
"tab": "Skills",
"validation": {
"max": null,
"min": null,
"unit": "rows"
},
"value": [
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "skill",
"label": "Skill",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Skills",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "rich text",
"default": null,
"icon": "text",
"key": "summary",
"label": "Summary",
"localised": false,
"options": {
"outputFormat": "markdown",
"blockFormats": [
"blockquote",
"heading",
"hr",
"orderedList",
"unorderedList",
"image"
],
"inlineFormats": [
"em",
"strong",
"link"
],
"formatOptions": [
"allowQuoteFooters",
"allowNestedLists",
"allowImageCaptions"
],
"inputRuleOptions": [
"autoquotes",
"dashes",
"ellipsis",
"noDoubleCaps",
"noDoubleSpace"
],
"minHeading": 2,
"maxHeading": 4,
"codeLangs": [
"html",
"css",
"javascript",
"markdown"
],
"allowRaw": false,
"urlTemplate": "",
"urlSuffix": "",
"linkOptions": [
"forceBlankTarget",
"allowExternal",
"allowInternal"
]
},
"tab": "About",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"tabs": [
{
"label": "Intro",
"groupAs": "intro"
},
{
"label": "About",
"groupAs": "about"
},
{
"label": "Skills",
"groupAs": null
},
{
"label": "Experiences",
"groupAs": null
},
{
"label": "Education",
"groupAs": null
}
]
}

214
.mattrbld/schemas/Projects.json
View File

@@ -1,214 +0,0 @@
{
"fields": [
{
"type": "rows",
"default": null,
"icon": "rows",
"key": "projects",
"label": "Projects",
"options": {
"compact": true,
"allowEditing": true,
"itemLabel": "Row"
},
"tab": "Untitled Tab",
"validation": {
"max": null,
"min": null,
"unit": "rows"
},
"value": [
{
"type": "group",
"displayField": null,
"icon": "group",
"key": "project",
"label": "Project",
"tab": "Untitled Tab",
"value": [
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "repoName",
"label": "Repo Name",
"localised": false,
"options": {
"wrapping": false,
"multiline": false
},
"tab": "Untitled Tab",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "title",
"label": "Title",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Untitled Tab",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "text",
"default": null,
"icon": "text-input",
"key": "iconName",
"label": "Icon Name",
"localised": false,
"options": {
"wrapping": true,
"multiline": false
},
"tab": "Untitled Tab",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
},
{
"type": "rich text",
"default": null,
"icon": "text",
"key": "summary",
"label": "Summary",
"localised": false,
"options": {
"outputFormat": "markdown",
"blockFormats": [
"blockquote",
"heading",
"hr",
"orderedList",
"unorderedList",
"image"
],
"inlineFormats": [
"em",
"strong",
"link"
],
"formatOptions": [
"allowQuoteFooters",
"allowNestedLists",
"allowImageCaptions"
],
"inputRuleOptions": [
"autoquotes",
"dashes",
"ellipsis",
"noDoubleCaps",
"noDoubleSpace"
],
"minHeading": 2,
"maxHeading": 4,
"codeLangs": [
"html",
"css",
"javascript",
"markdown"
],
"allowRaw": false,
"urlTemplate": "",
"urlSuffix": "",
"linkOptions": [
"forceBlankTarget",
"allowExternal",
"allowInternal"
]
},
"tab": "Untitled Tab",
"validation": {
"enforceMinMax": true,
"max": null,
"min": null,
"regex": null,
"regexError": null,
"required": false,
"unit": "length"
},
"value": null,
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"version": 1,
"visibility": {
"hidden": false,
"showByValue": {
"field": null
}
}
}
],
"tabs": [
{
"label": "Untitled Tab",
"groupAs": null
}
]
}

6
.mattrbld/users/noahspannbauer-icloud-com.json
View File

@@ -1,6 +0,0 @@
{
"email": "noahspannbauer@icloud.com",
"id": "noahspannbauer-icloud-com",
"name": "Noah",
"role": "owner"
}

14
Dockerfile Normal file
View File

@@ -0,0 +1,14 @@
FROM node:18-slim AS base
FROM base AS api
WORKDIR api
COPY ./.prod/api .
EXPOSE 3000
CMD ["node", "dist/main.js"]
FROM base AS app
WORKDIR /app
COPY ./.prod/app .
RUN npm i -g serve
EXPOSE 8080
CMD [ "serve", "-s", "dist", "-p", "8080" ]

25
api/.eslintrc.js Normal file
View File

@@ -0,0 +1,25 @@
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: 'tsconfig.json',
tsconfigRootDir: __dirname,
sourceType: 'module',
},
plugins: ['@typescript-eslint/eslint-plugin'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
root: true,
env: {
node: true,
jest: true,
},
ignorePatterns: ['.eslintrc.js'],
rules: {
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
};

58
api/.gitignore vendored Normal file
View File

@@ -0,0 +1,58 @@
# compiled output
/dist
/node_modules
/build
# Logs
logs
*.log
npm-debug.log*
pnpm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# OS
.DS_Store
# Tests
/coverage
/.nyc_output
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# temp directory
.temp
.tmp
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
local.settings.json

4
api/.prettierrc Normal file
View File

@@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": "all"
}

73
api/README.md Normal file
View File

@@ -0,0 +1,73 @@
<p align="center">
<a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
</p>
[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
[circleci-url]: https://circleci.com/gh/nestjs/nest
<p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
<p align="center">
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
<a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
<a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>
</p>
<!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
[![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
## Description
[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
## Installation
```bash
$ npm install
```
## Running the app
```bash
# development
$ npm run start
# watch mode
$ npm run start:dev
# production mode
$ npm run start:prod
```
## Test
```bash
# unit tests
$ npm run test
# e2e tests
$ npm run test:e2e
# test coverage
$ npm run test:cov
```
## Support
Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
## Stay in touch
- Author - [Kamil Myśliwiec](https://kamilmysliwiec.com)
- Website - [https://nestjs.com](https://nestjs.com/)
- Twitter - [@nestframework](https://twitter.com/nestframework)
## License
Nest is [MIT licensed](LICENSE).

8
api/nest-cli.json Normal file
View File

@@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/nest-cli",
"collection": "@nestjs/schematics",
"sourceRoot": "src",
"compilerOptions": {
"deleteOutDir": true
}
}

79
api/package.json Normal file
View File

@@ -0,0 +1,79 @@
{
"name": "api",
"version": "0.0.1",
"description": "",
"author": "",
"private": true,
"license": "UNLICENSED",
"scripts": {
"build": "nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"@azure/functions": "^1.0.3",
"@nestjs/axios": "^4.0.0",
"@nestjs/azure-func-http": "^0.10.0",
"@nestjs/common": "^10.0.0",
"@nestjs/config": "^4.0.0",
"@nestjs/core": "^10.0.0",
"@nestjs/platform-express": "^10.0.0",
"@noahspan/azure-database": "^3.1.2",
"@noahspan/noahspan-modules": "^0.6.5",
"axios": "^1.7.9",
"reflect-metadata": "^0.1.14",
"rxjs": "^7.8.1",
"uuid": "^11.0.5"
},
"devDependencies": {
"@angular-devkit/schematics": "^19.1.4",
"@nestjs/cli": "^10.0.0",
"@nestjs/schematics": "^10.0.0",
"@nestjs/testing": "^10.0.0",
"@schematics/angular": "^19.1.4",
"@types/express": "^4.17.17",
"@types/jest": "^29.5.2",
"@types/node": "^20.3.1",
"@types/supertest": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.42.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"jest": "^29.5.0",
"prettier": "^3.0.0",
"source-map-support": "^0.5.21",
"supertest": "^6.3.3",
"ts-jest": "^29.1.0",
"ts-loader": "^9.4.3",
"ts-node": "^10.9.1",
"tsconfig-paths": "^4.2.0",
"typescript": "^5.1.3"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}

22
api/src/app.controller.spec.ts Normal file
View File

@@ -0,0 +1,22 @@
import { Test, TestingModule } from '@nestjs/testing';
import { AppController } from './app.controller';
import { AppService } from './app.service';
describe('AppController', () => {
let appController: AppController;
beforeEach(async () => {
const app: TestingModule = await Test.createTestingModule({
controllers: [AppController],
providers: [AppService],
}).compile();
appController = app.get<AppController>(AppController);
});
describe('root', () => {
it('should return "Hello World!"', () => {
expect(appController.getHello()).toBe('Hello World!');
});
});
});

78
api/src/app.controller.ts Normal file
View File

@@ -0,0 +1,78 @@
import {
Controller,
Get,
Headers,
Query,
StreamableFile,
UseGuards
} from '@nestjs/common';
// import { Client as MsGraphClient } from '@microsoft/microsoft-graph-client';
import { MsGraphService } from '@noahspan/noahspan-modules'
@Controller()
export class AppController {
constructor(
private readonly msGraphService: MsGraphService
) {}
@Get('userPhoto')
async getProfilePhoto(@Headers() headers: any): Promise<StreamableFile> {
// try {
// const graphToken: string = await this.msGraphService.getMsGraphAuth(
// headers.authorization.replace('Bearer ', ''),
// ['user.read']
// );
// const client: MsGraphClient =
// await this.msGraphService.getMsGraphClientDelegated(graphToken);
// const blob: Blob = await client.api(`me/photos('48x48')/$value`).get();
// const arrayBuffer: ArrayBuffer = await blob.arrayBuffer();
// const buffer: Buffer = Buffer.from(arrayBuffer);
// return new StreamableFile(buffer, {
// type: 'application/json',
// disposition: `attachment; filename="user_photo.png"`
// });
// } catch (error) {
// return error;
// }
try {
const buffer = await this.msGraphService.getProfilePhoto(
headers.authorization.replace('Bearer ', ''),
['user.read']
)
return new StreamableFile(buffer, {
type: 'application/json',
disposition: `attachment; filename="user_photo.png"`
});
} catch (error) {
return error;
}
}
@Get('userProfile')
async getUserProfile(@Headers() headers: any): Promise<any> {
// try {
// const graphToken: string = await this.msGraphService.getMsGraphAuth(
// headers.authorization.replace('Bearer ', ''),
// ['user.read']
// );
// const client: MsGraphClient =
// await this.msGraphService.getMsGraphClientDelegated(graphToken);
// const userProfile = await client.api(`me`).get();
// return userProfile;
// } catch (error) {
// return error;
// }
try {
const userProfile = await this.msGraphService.getUserProfile(headers.authorization.replace('Bearer ', ''));
return userProfile;
} catch (error) {
return error;
}
}
}

51
api/src/app.module.ts Normal file
View File

@@ -0,0 +1,51 @@
import { Module } from '@nestjs/common';
import { APP_FILTER, APP_GUARD } from '@nestjs/core';
import { HttpExceptionFilter } from './filters/http-exception.filter';
import { ProjectModule } from './project/project.module';
import { AuthGuard, AuthModule, MsGraphModule } from '@noahspan/noahspan-modules'
import { ConfigModule, ConfigService } from '@nestjs/config';
import configuration from './config/configuration';
import { AppController } from './app.controller';
@Module({
imports: [
AuthModule.registerAsync({
inject: [ConfigService],
imports: [ConfigModule],
useFactory: async (configService: ConfigService) => {
return {
clientId: configService.get<string>('clientId'),
clientSecret: configService.get<string>('clientSecret'),
tenantId: configService.get<string>('tenantId')
}
}
}),
ConfigModule.forRoot({
load: [configuration]
}),
MsGraphModule.registerAsync({
inject: [ConfigService],
imports: [ConfigModule],
useFactory: async (configService: ConfigService) => {
return {
clientId: configService.get<string>('clientId'),
clientSecret: configService.get<string>('clientSecret'),
tenantId: configService.get<string>('tenantId')
}
}
}),
ProjectModule
],
controllers: [AppController],
providers: [
{
provide: APP_FILTER,
useClass: HttpExceptionFilter
},
{
provide: APP_GUARD,
useClass: AuthGuard
}
]
})
export class AppModule {}

5
api/src/config/configuration.ts Normal file
View File

@@ -0,0 +1,5 @@
export default () => ({
clientId: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
tenantId: process.env.TENANT_ID
})

25
api/src/filters/http-exception.filter.ts Normal file
View File

@@ -0,0 +1,25 @@
import {
ExceptionFilter,
Catch,
ArgumentsHost,
HttpException
} from '@nestjs/common';
import { Request, Response } from 'express';
@Catch(HttpException)
export class HttpExceptionFilter implements ExceptionFilter {
catch(excpetion: HttpException, host: ArgumentsHost) {
const ctx = host.switchToHttp();
const response = ctx.getResponse<Response>();
const request = ctx.getRequest<Request>();
const status = excpetion.getStatus();
response.status(status).json({
name: excpetion.cause,
message: excpetion.message,
statusCode: status,
timestamp: new Date().toISOString(),
path: request.url
});
}
}

27
api/src/main.ts Normal file
View File

@@ -0,0 +1,27 @@
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { HttpService } from '@nestjs/axios';
import { HttpExceptionFilter } from './filters/http-exception.filter';
import { InternalServerErrorException } from '@nestjs/common';
async function bootstrap() {
const httpService = new HttpService();
const app = await NestFactory.create(AppModule);
app.enableCors();
app.setGlobalPrefix('api');
app.useGlobalFilters(new HttpExceptionFilter());
httpService.axiosRef.interceptors.response.use(
(response) => {
return response;
},
(error) => {
console.error('Internal server error exception', error);
throw new InternalServerErrorException();
}
);
await app.listen(3000);
}
bootstrap();

94
api/src/project/project.controller.ts Normal file
View File

@@ -0,0 +1,94 @@
import {
Body,
Controller,
Delete,
Get,
HttpException,
Param,
Post,
Put,
UseGuards
} from '@nestjs/common';
import { ProjectDto } from './project.dto';
import { Project } from './project.entity';
import { ProjectService } from './project.service';
import { CustomError, Public } from '@noahspan/noahspan-modules';
@Controller('projects')
export class ProjectController {
constructor(private readonly projectService: ProjectService) {}
@Get(':partitionKey/:rowKey')
async find(
@Param('partitionKey') partitionKey: string,
@Param('rowKey') rowKey: string
) {
try {
return await this.projectService.find(partitionKey, rowKey);
} catch (error) {
const customError = error as CustomError;
throw new HttpException(customError.message, customError.statusCode);
}
}
@Public()
@Get()
async findAll() {
try {
return await this.projectService.findAll();
} catch (error) {
const customError = error as CustomError;
throw new HttpException(customError.message, customError.statusCode);
}
}
@Post()
async create(@Body() projectDto: ProjectDto) {
try {
const project = new Project();
Object.assign(project, projectDto);
return await this.projectService.create(project);
} catch (error) {
const customError = error as CustomError;
throw new HttpException(customError.message, customError.statusCode);
}
}
@Put(':partitionKey/:rowKey')
async update(
@Param('partitionKey') partitionKey: string,
@Param('rowKey') rowKey: string,
@Body() projectDto: ProjectDto
) {
try {
const project = new Project();
Object.assign(project, projectDto);
return await this.projectService.update(partitionKey, rowKey, project);
} catch (error) {
const customError = error as CustomError;
throw new HttpException(customError.message, customError.statusCode);
}
}
@Delete(':partitionKey/:rowKey')
async delete(
@Param('partitionKey') partitionKey: string,
@Param('rowKey') rowKey: string
) {
try {
return await this.projectService.delete(partitionKey, rowKey);
} catch (error) {
const customError = error as CustomError;
throw new HttpException(customError.message, customError.statusCode);
}
}
}

6
api/src/project/project.dto.ts Normal file
View File

@@ -0,0 +1,6 @@
export class ProjectDto {
rowKey: string;
displayName: string;
icon: string;
summary: string;
}

7
api/src/project/project.entity.ts Normal file
View File

@@ -0,0 +1,7 @@
export class Project {
partitionKey: string;
rowKey: string;
displayName: string;
icon: string;
summary: string;
}

27
api/src/project/project.module.ts Normal file
View File

@@ -0,0 +1,27 @@
import { Module } from '@nestjs/common';
import { ProjectController } from './project.controller';
import { ProjectService } from './project.service';
import { AzureTableStorageModule } from '@noahspan/azure-database';
import { Project } from './project.entity';
import { ConfigModule, ConfigService } from '@nestjs/config';
@Module({
imports: [
AzureTableStorageModule.forRootAsync({
imports: [ConfigModule],
useFactory: async (configService: ConfigService) => {
return {
connectionString: configService.get<string>('azureStorageConnectionString')
};
},
inject: [ConfigService]
}),
AzureTableStorageModule.forFeature(Project, {
createTableIfNotExists: true,
table: 'projects'
}),
],
controllers: [ProjectController],
providers: [ProjectService]
})
export class ProjectModule {}

38
api/src/project/project.service.ts Normal file
View File

@@ -0,0 +1,38 @@
import { InjectRepository, Repository } from '@noahspan/azure-database';
import { Injectable } from '@nestjs/common';
import { Project } from './project.entity';
import { v4 as uuidv4 } from 'uuid';
@Injectable()
export class ProjectService {
constructor(
@InjectRepository(Project)
private readonly projectRepository: Repository<Project>
) {}
async find(partitionKey: string, rowKey: string): Promise<Project> {
return await this.projectRepository.find(partitionKey, rowKey);
}
async findAll(): Promise<Project[]> {
return await this.projectRepository.findAll();
}
async create(project: Project): Promise<Project> {
project.partitionKey = 'project';
return await this.projectRepository.create(project);
}
async update(
partitionKey: string,
rowKey: string,
project: Project
): Promise<Project> {
return await this.projectRepository.update(partitionKey, rowKey, project);
}
async delete(partitionKey: string, rowKey: string): Promise<void> {
await this.projectRepository.delete(partitionKey, rowKey);
}
}

24
api/test/app.e2e-spec.ts Normal file
View File

@@ -0,0 +1,24 @@
import { Test, TestingModule } from '@nestjs/testing';
import { INestApplication } from '@nestjs/common';
import * as request from 'supertest';
import { AppModule } from './../src/app.module';
describe('AppController (e2e)', () => {
let app: INestApplication;
beforeEach(async () => {
const moduleFixture: TestingModule = await Test.createTestingModule({
imports: [AppModule],
}).compile();
app = moduleFixture.createNestApplication();
await app.init();
});
it('/ (GET)', () => {
return request(app.getHttpServer())
.get('/')
.expect(200)
.expect('Hello World!');
});
});

9
api/test/jest-e2e.json Normal file
View File

@@ -0,0 +1,9 @@
{
"moduleFileExtensions": ["js", "json", "ts"],
"rootDir": ".",
"testEnvironment": "node",
"testRegex": ".e2e-spec.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
}
}

4
api/tsconfig.build.json Normal file
View File

@@ -0,0 +1,4 @@
{
"extends": "./tsconfig.json",
"exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
}

21
api/tsconfig.json Normal file
View File

@@ -0,0 +1,21 @@
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "ES2021",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true,
"skipLibCheck": true,
"strictNullChecks": false,
"noImplicitAny": false,
"strictBindCallApply": false,
"forceConsistentCasingInFileNames": false,
"noFallthroughCasesInSwitch": false
}
}

24
app2/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

50
app2/README.md Normal file
View File

@@ -0,0 +1,50 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
```js
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
```

28
app2/eslint.config.js Normal file
View File

@@ -0,0 +1,28 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)

13
app2/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Noah Spannbauer</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

36
app2/package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "app2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@azure/msal-browser": "^4.2.1",
"@azure/msal-react": "^3.0.4",
"@microsoft/microsoft-graph-types": "^2.40.0",
"@noahspan/noahspan-components": "^1.3.1",
"axios": "^1.7.9",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"react-router-dom": "^7.1.5"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.19.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0",
"typescript": "~5.7.2",
"typescript-eslint": "^8.22.0",
"vite": "^6.1.0"
}
}

BIN
app2/public/noahspan-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

1
app2/public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

25
app2/src/App.tsx Normal file
View File

@@ -0,0 +1,25 @@
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';
interface AppProps {
pca: IPublicClientApplication
}
const App = ({ pca }: AppProps) => {
const appContext = useAppContext();
return (
<MsalProvider instance={pca}>
<SiteNav />
<Routes>
<Route path='/' element={<Projects />} />
</Routes>
</MsalProvider>
)
}
export default App

1
app2/src/assets/react.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

70
app2/src/auth/msalConfig.ts Normal file
View File

@@ -0,0 +1,70 @@
/*
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
*/
import { LogLevel } from '@azure/msal-browser';
/**
* Configuration object to be passed to MSAL instance on creation.
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
*/
export const msalConfig = {
auth: {
clientId: import.meta.env.VITE_CLIENT_ID, // This is the ONLY mandatory field that you need to supply.
authority: `https://login.microsoftonline.com/${import.meta.env.VITE_TENANT_ID}`, // Replace the placeholder with your tenant subdomain
redirectUri: import.meta.env.VITE_REDIRECT_URL, // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/App Registration.
postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
},
cache: {
cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
},
system: {
loggerOptions: {
loggerCallback: (level: any, message: any, containsPii: any) => {
if (containsPii) {
return;
}
switch (level) {
case LogLevel.Error:
console.error(message);
return;
case LogLevel.Info:
console.info(message);
return;
case LogLevel.Verbose:
console.debug(message);
return;
case LogLevel.Warning:
console.warn(message);
return;
default:
return;
}
},
},
},
};
/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit:
* https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
*/
export const loginRequest = {
scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`],
};
/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/
// export const silentRequest = {
// scopes: ["openid", "profile"],
// loginHint: "example@domain.net"
// };

61
app2/src/components/actionMenu/ActionMenu.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { useState } from 'react';
import { ActionMenuProps } from './ActionMenuProps.interface';
import {
Icon,
IconButton,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
} from '@noahspan/noahspan-components';
import { FormMode } from '../../enums/formMode';
const ActionMenu = ({ id, onDelete, onOpenCloseForm }: ActionMenuProps) => {
const [anchorElAction, setAnchorElAction] = useState<null | HTMLElement>(
null
);
const onOpenActionMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElAction(event.currentTarget);
};
const onCloseActionMenu = () => {
setAnchorElAction(null);
};
return (
<div>
<IconButton onClick={onOpenActionMenu}>
<Icon iconName='fa-ellipsis-vertical' size="sm" />
</IconButton>
<Menu
anchorEl={anchorElAction}
keepMounted
open={Boolean(anchorElAction)}
onClose={onCloseActionMenu}
>
<MenuItem onClick={() => onOpenCloseForm(FormMode.EDIT, id)}>
<ListItemIcon>
<Icon iconName='fa-pen' size="lg" />
</ListItemIcon>
<ListItemText>Edit</ListItemText>
</MenuItem>
<MenuItem onClick={() => onOpenCloseForm(FormMode.VIEW, id)}>
<ListItemIcon>
<Icon iconName='fa-eye' size="lg" />
</ListItemIcon>
<ListItemText>View</ListItemText>
</MenuItem>
<hr className="my-3" />
<MenuItem onClick={() => onDelete(id)}>
<ListItemIcon>
<Icon iconName='fa-trash' size="lg" />
</ListItemIcon>
<ListItemText>Delete</ListItemText>
</MenuItem>
</Menu>
</div>
);
};
export default ActionMenu;

7
app2/src/components/actionMenu/ActionMenuProps.interface.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { FormMode } from '../../enums/formMode';
export interface ActionMenuProps {
id: string;
onDelete: (entryId: string) => void;
onOpenCloseForm: (formMode: FormMode, id: string) => void;
}

51
app2/src/components/confirmationDialog/ConfirmationDialog.tsx Normal file
View File

@@ -0,0 +1,51 @@
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Icon,
Spinner
} from '@noahspan/noahspan-components';
import { ConfirmationDialogProps } from './ConfirmationDialogProps.interface';
const ConfirmationDialog = ({
contentText,
isLoading,
isOpen,
onCancel,
onConfirm,
title
}: ConfirmationDialogProps) => {
return (
<Dialog
onClose={onCancel}
open={isOpen}
sx={{
'& .MuiDialog-paper': { width: '2000px' }
}}
>
<DialogTitle>{title}</DialogTitle>
<DialogContent sx={{ textAlign: 'center' }}>
{!isLoading && <DialogContentText>{contentText}</DialogContentText>}
{isLoading && <Spinner />}
</DialogContent>
<DialogActions>
<Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName='fa-xmark' />}>
No
</Button>
<Button
onClick={onConfirm}
variant="contained"
startIcon={<Icon iconName='fa-circle-check'/>}
>
Yes
</Button>
</DialogActions>
</Dialog>
);
};
export default ConfirmationDialog;

8
app2/src/components/confirmationDialog/ConfirmationDialogProps.interface.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface ConfirmationDialogProps {
contentText: string;
isLoading: boolean;
isOpen: boolean;
onCancel: () => void;
onConfirm: () => void;
title: string;
}

108
app2/src/components/profile/Profile.tsx Normal file
View File

@@ -0,0 +1,108 @@
// import {
// Box,
// Container,
// Grid,
// Typography
// } from '@noahspan/noahspan-components';
// import profile from '../../../data/profile/profile.json';
// const getSkills = (category: string) => {
// let skillsString: string = '';
// for (const skill of profile.skills) {
// console.log(skill)
// if (skill.category === category) {
// skillsString += `${skill.group} (`
// console.log(skillsString)
// for (const skillName of skill.skills) {
// skillsString += `${skillName}, `
// }
// skillsString += '), ';
// }
// }
// console.log(skillsString)
// return skillsString
// }
// const Profile = () => {
// return (
// <Container>
// <Box sx={{ margin: '20px' }}>
// <Grid container spacing={1}>
// <Grid size={12}>
// <Typography variant="h5">{`${profile.intro.firstName} ${profile.intro.lastName}`}</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="body1">{profile.intro.title}</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="body1">{profile.intro.location}</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="h5">Summary</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="body1">{profile.about.details}</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="h5">Skills</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="h6">Experienced</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="body1">{getSkills('Experienced')}</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="h6">Familiar</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="body1">{getSkills('Familiar')}</Typography>
// </Grid>
// <Grid size={12}>
// <Typography variant="h5">Experience</Typography>
// </Grid>
// {profile.experiences.length > 0 && profile.experiences.map((experience) => {
// return (
// <>
// <Grid size={6}>
// <Typography variant='h6'>{experience.jobTitle}</Typography>
// </Grid>
// <Grid display='flex' justifyContent='right' size={6}>
// <Typography variant='body1'>{`${experience.startDate}-${experience.endDate}`}</Typography>
// </Grid>
// <Grid size={6}>
// <Typography variant='body1'>{experience.company}</Typography>
// </Grid>
// <Grid display='flex' justifyContent='right' size={6}>
// <Typography variant='body1'>{experience.location}</Typography>
// </Grid>
// </>
// )
// })}
// {profile.experiences.length > 0 && profile.education.map((education) => {
// return (
// <>
// <Grid size={6}>
// <Typography variant='h6'>{education.school}</Typography>
// </Grid>
// <Grid display='flex' justifyContent='right' size={6}>
// <Typography variant='body1'>{education.location}</Typography>
// </Grid>
// <Grid size={6}>
// <Typography variant='body1'>{education.degree}</Typography>
// </Grid>
// <Grid display='flex' justifyContent='right' size={6}>
// <Typography variant='body1'>{education.fieldOfStudy}</Typography>
// </Grid>
// </>
// )
// })}
// </Grid>
// </Box>
// </Container>
// )
// }
// export default Profile;

354
app2/src/components/projectForm/ProjectForm.tsx Normal file
View File

@@ -0,0 +1,354 @@
import { useEffect, useReducer } from 'react';
import {
Alert,
Button,
Drawer,
Grid,
Icon,
IconButton,
IconName,
TextField,
Typography
} from '@noahspan/noahspan-components';
import { useForm, Controller, FormProvider } from 'react-hook-form';
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 { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
const ProjectForm = ({ isDrawerOpen, mode, onOpenClose, projectId }: ProjectFormProps) => {
const [state, dispatch] = useReducer(reducer, initialState);
const httpClient: AxiosInstance = useHttpClient();
const { getAccessToken } = useAccessToken();
const isAuthenticated = useIsAuthenticated();
const defaultValues = {
partitionKey: 'project',
rowKey: '',
title: '',
subTitle: '',
iconName: '',
summary: '',
repoName: '',
siteUrl: '',
order: ''
}
const methods = useForm({
defaultValues: defaultValues
});
const watchRepoName = methods.watch(['repoName'])
const onCancel = () => {
methods.reset(defaultValues);
dispatch({ type: 'SET_IS_DISABLED', payload: false });
onOpenClose(FormMode.CANCEL);
};
const onSubmit = async (data: unknown) => {
console.log(data)
try {
dispatch({ type: 'SET_IS_LOADING', payload: true });
const accessToken: string = await getAccessToken();
if (!projectId) {
await httpClient.post(`api/projects`, data, {
headers: {
Authorization: accessToken
}
});
} else {
await httpClient.put(`api/projects/project/${projectId}`, data, {
headers: {
Authorization: accessToken
}
});
}
methods.reset(defaultValues);
dispatch({ type: 'SET_IS_DISABLED', payload: false });
onOpenClose(FormMode.CANCEL);
} catch (error) {
const axiosError = error as AxiosError;
dispatch({ type: 'SET_ERROR', payload: axiosError.message });
} finally {
dispatch({ type: 'SET_IS_LOADING', payload: false });
}
};
useEffect(() => {
if (watchRepoName.length > 0) {
methods.setValue('rowKey', watchRepoName[0])
}
}, [watchRepoName])
useEffect(() => {
if (mode === FormMode.VIEW) {
dispatch({ type: 'SET_IS_DISABLED', payload: true });
}
}, [mode]);
useEffect(() => {
const getProject = async () => {
try {
dispatch({ type: 'SET_IS_LOADING', payload: true });
const config = isAuthenticated
? { headers: { Authorization: await getAccessToken() } }
: {};
const response: AxiosResponse = await httpClient.get(
`api/projects/project/${projectId}`,
config
);
const entry = response.data;
methods.reset(entry);
} catch (error) {
const axiosError = error as AxiosError;
dispatch({ type: 'SET_ERROR', payload: axiosError.message });
} finally {
dispatch({ type: 'SET_IS_LOADING', payload: false });
}
};
if (projectId && isDrawerOpen) {
getProject();
}
}, [projectId]);
return (
<Drawer
open={isDrawerOpen}
anchor='right'
PaperProps={{
sx: {
padding: '30px',
width: '33%'
}
}}
>
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)}>
<Grid container spacing={2}>
<Grid size={11}>
<Typography variant='h4'>{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Project`}</Typography>
</Grid>
<Grid display="flex" justifyContent="right" size={1}>
<IconButton onClick={onCancel}>
<Icon iconName={IconName.XMARK} />
</IconButton>
</Grid>
{state.error && (
<Grid display="flex" justifyContent="center" size={12}>
<Alert
onClose={() =>
dispatch({ type: 'SET_ERROR', payload: undefined })
}
severity="error"
sx={{ width: '100%' }}
>
{state.error}
</Alert>
</Grid>
)}
<Grid alignItems="center" display="flex" size={4}>
<Typography variant="body1">Order</Typography>
</Grid>
<Grid size={8}>
<Controller
name="order"
control={methods.control}
render={({ field: { onChange, value } }) => (
<TextField
disabled={state.isDisabled}
error={methods.formState.errors.siteUrl ? true : false}
fullWidth
helperText={
methods.formState.errors.siteUrl
? methods.formState.errors.siteUrl.message?.toString()
: undefined
}
onChange={onChange}
value={value}
/>
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Typography variant="body1">Title</Typography>
</Grid>
<Grid size={8}>
<Controller
name="title"
control={methods.control}
render={({ field: { onChange, value } }) => (
<TextField
disabled={state.isDisabled}
error={methods.formState.errors.title ? true : false}
fullWidth
helperText={
methods.formState.errors.title
? methods.formState.errors.title.message?.toString()
: undefined
}
onChange={onChange}
value={value}
/>
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Typography variant="body1">Sub Title</Typography>
</Grid>
<Grid size={8}>
<Controller
name="subTitle"
control={methods.control}
render={({ field: { onChange, value } }) => (
<TextField
disabled={state.isDisabled}
error={methods.formState.errors.siteUrl ? true : false}
fullWidth
helperText={
methods.formState.errors.siteUrl
? methods.formState.errors.siteUrl.message?.toString()
: undefined
}
onChange={onChange}
value={value}
/>
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Typography variant="body1">Icon Name</Typography>
</Grid>
<Grid size={8}>
<Controller
name="iconName"
control={methods.control}
render={({ field: { onChange, value } }) => (
<TextField
disabled={state.isDisabled}
error={methods.formState.errors.iconName ? true : false}
fullWidth
helperText={
methods.formState.errors.iconName
? methods.formState.errors.iconName.message?.toString()
: undefined
}
onChange={onChange}
value={value}
/>
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Typography variant="body1">Repo Name</Typography>
</Grid>
<Grid size={8}>
<Controller
name="repoName"
control={methods.control}
render={({ field: { onChange, value } }) => (
<TextField
disabled={state.isDisabled}
error={methods.formState.errors.repoName ? true : false}
fullWidth
helperText={
methods.formState.errors.repoName
? methods.formState.errors.repoName.message?.toString()
: undefined
}
onChange={onChange}
value={value}
/>
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Typography variant="body1">Site URL</Typography>
</Grid>
<Grid size={8}>
<Controller
name="siteUrl"
control={methods.control}
render={({ field: { onChange, value } }) => (
<TextField
disabled={state.isDisabled}
error={methods.formState.errors.siteUrl ? true : false}
fullWidth
helperText={
methods.formState.errors.siteUrl
? methods.formState.errors.siteUrl.message?.toString()
: undefined
}
onChange={onChange}
value={value}
/>
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Typography variant="body1">Summary</Typography>
</Grid>
<Grid size={8}>
<Controller
name="summary"
control={methods.control}
render={({ field: { onChange, value } }) => (
<TextField
disabled={state.isDisabled}
error={methods.formState.errors.summary ? true : false}
fullWidth
helperText={
methods.formState.errors.summary
? methods.formState.errors.summary.message?.toString()
: undefined
}
multiline
maxRows={5}
onChange={onChange}
value={value}
/>
)}
/>
</Grid>
<Grid display="flex" gap={2} justifyContent="right" size={12}>
<Button
disabled={
state.isDisabled && mode.toString() !== FormMode.VIEW
? state.isDisabled
: false
}
startIcon={<Icon iconName={IconName.XMARK} />}
variant="outlined"
onClick={onCancel}
size="small"
>
{mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
</Button>
{mode.toString() !== FormMode.VIEW && (
<Button
disabled={state.isDisabled}
startIcon={<Icon iconName={IconName.SAVE} />}
size="small"
type="submit"
variant="contained"
>
Save
</Button>
)}
</Grid>
</Grid>
</form>
</FormProvider>
</Drawer>
)
}
export default ProjectForm;

8
app2/src/components/projectForm/ProjectFormProps.interface.ts Normal file
View File

@@ -0,0 +1,8 @@
import { FormMode } from "../../enums/formMode";
export interface ProjectFormProps {
projectId?: string;
isDrawerOpen: boolean;
mode: FormMode;
onOpenClose: (mode: FormMode) => void;
}

5
app2/src/components/projectForm/ProjectFormState.interface.ts Normal file
View File

@@ -0,0 +1,5 @@
export interface ProjectFormState {
error: string | undefined;
isDisabled: boolean;
isLoading: boolean;
}

41
app2/src/components/projectForm/reducer.ts Normal file
View File

@@ -0,0 +1,41 @@
import { ProjectFormState } from "./ProjectFormState.interface"
type Action =
| { type: 'SET_ERROR'; payload: string | undefined }
| { type: 'SET_IS_DISABLED'; payload: boolean }
| { type: 'SET_IS_LOADING'; payload: boolean }
export const initialState: ProjectFormState = {
error: undefined,
isDisabled: false,
isLoading: true,
};
export const reducer = (
state: ProjectFormState,
action: Action
): ProjectFormState => {
switch (action.type) {
case 'SET_ERROR': {
return {
...state,
error: action.payload
};
}
case 'SET_IS_DISABLED': {
return {
...state,
isDisabled: action.payload
};
}
case 'SET_IS_LOADING': {
return {
...state,
isLoading: action.payload
};
}
default: {
return state;
}
}
};

11
app2/src/components/projects/Project.interface.ts Normal file
View File

@@ -0,0 +1,11 @@
export interface Project {
partitionKey: string;
rowKey: string;
iconName: string;
order: string;
repoName: string;
siteUrl: string;
subTitle: string;
summary: string;
title: string;
}

248
app2/src/components/projects/Projects.tsx Normal file
View File

@@ -0,0 +1,248 @@
import { Project } from './Project.interface';
import {
Box,
Button,
Card,
CardActions,
CardContent,
CardHeader,
Container,
Grid,
Icon,
IconName,
Typography
} from '@noahspan/noahspan-components';
import { useIsAuthenticated } from '@azure/msal-react';
import { FormMode } from '../../enums/formMode';
import { useEffect, useReducer } from 'react';
import { initialState, reducer } from './reducer';
import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { useAccessToken } from '../../hooks/accessToken/UseAccessToken';
import ProjectForm from '../projectForm/ProjectForm';
import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
import ActionMenu from '../actionMenu/ActionMenu';
const Projects = () => {
const [state, dispatch] = useReducer(reducer, initialState)
const httpClient: AxiosInstance = useHttpClient();
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');
}
};
const onOpenCloseProjectForm = (mode: FormMode, projectId?: string) => {
switch (mode) {
case FormMode.ADD:
case FormMode.EDIT:
case FormMode.VIEW:
dispatch({
type: 'SET_OPEN_CLOSE_PROJECT_FORM',
payload: {
formMode: mode,
selectedProjectId: projectId,
isFormOpen: true
}
});
break;
case FormMode.CANCEL:
dispatch({
type: 'SET_OPEN_CLOSE_PROJECT_FORM',
payload: {
formMode: mode,
selectedProjectId: undefined,
isFormOpen: false
}
});
break;
}
};
const onDeleteProject = (entryId: string) => {
dispatch({
type: 'SET_DELETE',
payload: { isConfirmationDialogOpen: true, selectedProjectId: entryId }
});
};
const onConfirmationDialogConfirm = async () => {
try {
dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: true });
const token = await getAccessToken();
const config = isAuthenticated
? { headers: { Authorization: `${token}` } }
: {};
// await httpClient.delete(`api/logs/log/${state.selectedEntryId}`, config);
dispatch({
type: 'SET_DELETE',
payload: { isConfirmationDialogOpen: false, selectedProjectId: undefined }
});
// 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}`
});
} finally {
dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: false });
}
};
const onConfirmationDialogCancel = () => {
dispatch({
type: 'SET_DELETE',
payload: { isConfirmationDialogOpen: false, selectedProjectId: undefined }
});
};
useEffect(() => {
const loadProjects = async () => {
try {
const projects = await getProjects();
dispatch({ type: 'SET_PROJECTS', payload: projects })
} catch (error) {
console.log(error);
}
}
loadProjects()
}, []);
return (
<Container>
<Box sx={{ margin: '20px' }}>
<Grid container spacing={2}>
<Grid size={10}>
<Typography variant="h4">Projects</Typography>
</Grid>
<Grid display='flex' justifyContent='right' size={2}>
{isAuthenticated &&
<Button
onClick={() => onOpenCloseProjectForm(FormMode.ADD)}
startIcon={<Icon iconName='fa-plus' />}
variant='contained'
>
Add Project
</Button>
}
</Grid>
{state.projects.length > 0 && state.projects.map((project: Project) => {
return (
<Grid display='flex' justifyContent='center' size={12}>
<Card
sx={{
width: '100%'
}}
>
<CardHeader
action={isAuthenticated ? <ActionMenu id={project.rowKey} onDelete={onDeleteProject} onOpenCloseForm={onOpenCloseProjectForm} /> : null}
avatar={<Icon iconName={IconName[findIconByName(project.iconName)]} size='2x' />}
subheader={project.subTitle}
title={project.title}
slotProps={{
subheader: {
fontSize: '16px'
},
title: {
fontSize: '24px',
}
}}
/>
<CardContent>
<Typography variant='body1'>{project.summary}</Typography>
</CardContent>
<CardActions>
<Grid container direction='row' size={12}>
<Grid container direction='row' justifyContent='center' alignItems='center' size={project.siteUrl === '' ? 12 : 6}>
{project.repoName !== '' &&
<Button
component='a'
href={`https://github.com/noahspannbauer/${project.repoName}`}
startIcon={<Icon iconName={IconName.GITHUB} />}
target='_blank'
>
Code
</Button>
}
</Grid>
<Grid container direction='row' justifyContent='center' alignItems='center' size={6}>
{project.siteUrl !== '' &&
<Button
href={project.siteUrl}
startIcon={<Icon iconName={IconName.ARROW_UP_RIGHT_FROM_SQUARE} />}
>
Visit
</Button>
}
</Grid>
</Grid>
</CardActions>
</Card>
</Grid>
)
})}
</Grid>
{state.isFormOpen &&
<ProjectForm
isDrawerOpen={state.isFormOpen}
mode={state.formMode}
onOpenClose={(mode) => onOpenCloseProjectForm(mode)}
projectId={state.selectedProjectId}
/>
}
{state.isConfirmDialogOpen && (
<ConfirmationDialog
contentText="Are you sure you want to delete the project?"
isLoading={state.isConfirmDialogLoading}
isOpen={state.isConfirmDialogOpen}
onCancel={onConfirmationDialogCancel}
onConfirm={onConfirmationDialogConfirm}
title="Confirm Delete"
/>
)}
</Box>
</Container>
)
}
export default Projects;

13
app2/src/components/projects/ProjectsState.interface.ts Normal file
View File

@@ -0,0 +1,13 @@
import { FormMode } from '../../enums/formMode';
import { Project } from './Project.interface';
export interface ProjectsState {
projects: Project[];
formMode: FormMode;
error: string | undefined;
isConfirmDialogLoading: boolean;
isConfirmDialogOpen: boolean;
isFormOpen: boolean;
isLoading: boolean;
selectedProjectId: string | undefined;
}

92
app2/src/components/projects/reducer.ts Normal file
View File

@@ -0,0 +1,92 @@
import { FormMode } from '../../enums/formMode';
import { ProjectsState } from './ProjectsState.interface'
import { Project } from './Project.interface';
type Action =
| {
type: 'SET_DELETE';
payload: {
isConfirmationDialogOpen: boolean;
selectedProjectId: string | undefined;
};
}
| { type: 'SET_PROJECTS'; payload: Project[] }
| { type: 'SET_ERROR'; payload: string | undefined }
| { type: 'SET_FORM_MODE'; payload: FormMode }
| { type: 'SET_IS_CONFIRMATION_DIALOG_LOADING'; payload: boolean }
| { type: 'SET_IS_LOADING'; payload: boolean }
| {
type: 'SET_OPEN_CLOSE_PROJECT_FORM';
payload: {
formMode: FormMode;
selectedProjectId: string | undefined;
isFormOpen: boolean;
};
};
export const initialState: ProjectsState = {
projects: [],
error: undefined,
formMode: FormMode.CANCEL,
isConfirmDialogLoading: false,
isConfirmDialogOpen: false,
isFormOpen: false,
isLoading: false,
selectedProjectId: undefined
};
export const reducer = (
state: ProjectsState,
action: Action
): ProjectsState => {
switch (action.type) {
case 'SET_DELETE': {
return {
...state,
isConfirmDialogOpen: action.payload.isConfirmationDialogOpen,
selectedProjectId: action.payload.selectedProjectId
};
}
case 'SET_PROJECTS': {
return {
...state,
projects: action.payload
};
}
case 'SET_ERROR': {
return {
...state,
error: action.payload
};
}
case 'SET_FORM_MODE': {
return {
...state,
formMode: action.payload
};
}
case 'SET_IS_CONFIRMATION_DIALOG_LOADING': {
return {
...state,
isConfirmDialogLoading: action.payload
};
}
case 'SET_IS_LOADING': {
return {
...state,
isLoading: action.payload
};
}
case 'SET_OPEN_CLOSE_PROJECT_FORM': {
return {
...state,
formMode: action.payload.formMode,
isFormOpen: action.payload.isFormOpen,
selectedProjectId: action.payload.selectedProjectId
};
}
default: {
return state;
}
}
};

130
app2/src/components/siteNav/SiteNav.tsx Normal file
View File

@@ -0,0 +1,130 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAppContext } from '../../hooks/appContext/UseAppContext';
import {
Icon,
MenuItem,
Navbar,
Spinner,
Typography
} from '@noahspan/noahspan-components';
import { useIsAuthenticated, useMsal } from '@azure/msal-react';
import { useAccessToken } from '../../hooks/accessToken/UseAccessToken';
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 [userPhoto, setUserPhoto] = useState<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 handleSignIn = () => {
instance.loginRedirect({
scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
});
};
const handleSignOut = () => {
instance.logoutRedirect();
};
const getUserProfile = async (accessToken: string): Promise<User> => {
try {
const response: AxiosResponse = await httpClient.get(`api/userProfile`, {
headers: {
Authorization: accessToken
}
});
const userProfile: User = response.data;
return userProfile;
} catch (error) {
throw new Error();
}
};
const getUserPhoto = async (accessToken: string): Promise<string> => {
try {
const response: AxiosResponse = await httpClient.get(`api/userPhoto`, {
headers: {
Authorization: accessToken
},
responseType: 'arraybuffer'
});
const arrayBufferView = new Uint8Array(response.data);
const blob = new Blob([arrayBufferView], { type: 'image/png' });
const imageUrl = window.URL.createObjectURL(blob);
return imageUrl;
} catch (error) {
console.log(error);
throw new Error();
}
};
const handlePageClick = (url: string) => {
navigate(url);
};
const Settings = () => {
return (
<MenuItem onClick={handleSignOut}>
<Icon iconName='fa-sign-out' />
<Typography sx={{ marginLeft: '10px', textAlign: 'center' }}>
Sign Out
</Typography>
</MenuItem>
);
};
useEffect(() => {
const setUserProfile = async () => {
try {
setLoading(true);
const accessToken: string = await getAccessToken();
const userProfile = await getUserProfile(accessToken);
const userPhoto = await getUserPhoto(accessToken);
setUserPhoto(userPhoto);
appContext.dispatch({
type: 'SET_USER_PROFILE',
payload: userProfile
});
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
};
if (
isAuthenticated &&
Object.keys(appContext.state.userProfile).length === 0
) {
setUserProfile();
}
}, [isAuthenticated]);
return (
<Navbar
handlePageClick={handlePageClick}
handleSignIn={handleSignIn}
isAuthenticated={isAuthenticated}
logo={<Icon iconName='fa-user-tie' size="2x" />}
pages={pages}
settings={<Settings />}
userPhoto={userPhoto}
/>
);
};
export default SiteNav;

5
app2/src/context/appContext/AppContext.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { Context, createContext } from 'react';
import { AppContextProps } from './AppContextProps.interface';
export const AppContext: Context<AppContextProps> =
createContext<AppContextProps>({} as AppContextProps);

7
app2/src/context/appContext/AppContextProps.interface.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Action } from './reducer';
import { AppContextState } from './AppContextState.interface';
export interface AppContextProps {
state: AppContextState;
dispatch: React.Dispatch<Action>;
}

30
app2/src/context/appContext/AppContextProvider.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { useMemo, useReducer } from 'react';
import { AppContext } from './AppContext';
import { AppContextProviderProps } from './AppContextProviderProps.interface';
import { AppContextProps } from './AppContextProps.interface';
import { AppContextState } from './AppContextState.interface';
import { reducer } from './reducer';
const AppContextProvider = (
props: AppContextProviderProps
) => {
const intialState: AppContextState = {
featureFlags: [],
userProfile: {}
};
const [state, dispatch] = useReducer(reducer, intialState);
const contextValue: AppContextProps = useMemo(() => {
return {
state,
dispatch
};
}, [state, dispatch]);
return (
<AppContext.Provider value={contextValue}>
{props.children}
</AppContext.Provider>
);
};
export default AppContextProvider;

3
app2/src/context/appContext/AppContextProviderProps.interface.ts Normal file
View File

@@ -0,0 +1,3 @@
export interface AppContextProviderProps {
children: React.ReactNode;
}

6
app2/src/context/appContext/AppContextState.interface.ts Normal file
View File

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

22
app2/src/context/appContext/reducer.ts Normal file
View File

@@ -0,0 +1,22 @@
import { User } from '@microsoft/microsoft-graph-types';
import { AppContextState } from './AppContextState.interface';
export type Action =
| { type: 'SET_USER_PROFILE'; payload: User };
export const reducer = (
state: AppContextState,
action: Action
): AppContextState => {
switch (action.type) {
case 'SET_USER_PROFILE': {
return {
...state,
userProfile: action.payload
};
}
default: {
return state;
}
}
};

6
app2/src/enums/formMode.ts Normal file
View File

@@ -0,0 +1,6 @@
export enum FormMode {
ADD = 'ADD',
EDIT = 'EDIT',
VIEW = 'VIEW',
CANCEL = 'CANCEL'
}

32
app2/src/hooks/accessToken/UseAccessToken.tsx Normal file
View File

@@ -0,0 +1,32 @@
import {
AuthenticationResult,
InteractionRequiredAuthError
} from '@azure/msal-browser';
import { useMsal } from '@azure/msal-react';
export const useAccessToken = () => {
const { accounts, instance } = useMsal();
const getAccessToken = async () => {
const tokenRequest = {
account: accounts[0],
scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
};
try {
const response: AuthenticationResult =
await instance.acquireTokenSilent(tokenRequest);
return `Bearer ${response.accessToken}`;
} catch (error) {
if (error instanceof InteractionRequiredAuthError) {
await instance.acquireTokenRedirect(tokenRequest);
}
throw error;
}
};
return {
getAccessToken
};
};

11
app2/src/hooks/appContext/UseAppContext.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { useContext } from 'react';
import { AppContext } from '../../context/appContext/AppContext';
export const useAppContext = () => {
const { state, dispatch } = useContext(AppContext);
return {
state,
dispatch
};
};

29
app2/src/hooks/httpClient/UseHttpClient.tsx Normal file
View File

@@ -0,0 +1,29 @@
import axios, { AxiosInstance, CreateAxiosDefaults } from 'axios';
export const useHttpClient = () => {
let config: CreateAxiosDefaults<any> = {
baseURL: import.meta.env.VITE_API_URL,
headers: {
'Content-Type': 'application/json'
}
};
// if (import.meta.env.DEV) {
// config = {
// baseURL: import.meta.env.VITE_API_URL,
// headers: {
// 'Content-Type': 'application/json'
// }
// };
// } else {
// config = {
// headers: {
// 'Content-Type': 'application/json'
// }
// };
// }
const httpClient: AxiosInstance = axios.create(config);
return httpClient;
};

0
app2/src/index.css Normal file
View File

39
app2/src/main.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter } from 'react-router-dom';
import { AuthenticationResult, EventMessage, EventType, PublicClientApplication } from '@azure/msal-browser';
import { msalConfig } from './auth/msalConfig.ts';
import AppContextProvider from './context/appContext/AppContextProvider.tsx';
const msalInstance: PublicClientApplication = new PublicClientApplication(msalConfig);
msalInstance.initialize().then(() => {
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
msalInstance.setActiveAccount(accounts[0]);
}
msalInstance.addEventCallback((event: EventMessage) => {
if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
const payload = event.payload as AuthenticationResult;
const account = payload.account;
msalInstance.setActiveAccount(account)
}
})
createRoot(document.getElementById('root')!).render(
<StrictMode>
<AppContextProvider>
<BrowserRouter>
<App pca={msalInstance} />
</BrowserRouter>
</AppContextProvider>
</StrictMode>
)
})

12
app2/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,12 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_URL: string;
readonly VITE_CLIENT_ID: string;
readonly VITE_TENANT_ID: string;
readonly VITE_REDIRECT_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}

26
app2/tsconfig.app.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

7
app2/tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

24
app2/tsconfig.node.json Normal file
View File

@@ -0,0 +1,24 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

16
app2/vite.config.ts Normal file
View File

@@ -0,0 +1,16 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
preview: {
port: 8080,
strictPort: true
},
server: {
port: 8080,
strictPort: true,
host: '0.0.0.0'
}
});

11
docker-compose.yaml Normal file
View File

@@ -0,0 +1,11 @@
version: '3.8'
services:
azurite:
container_name: azurite
image: mcr.microsoft.com/azure-storage/azurite:3.33.0
ports:
- '10000:10000'
- '10001:10001'
- '10002:10002'
command: 'azurite --blobHost 0.0.0.0 --queueHost 0.0.0.0 --tableHost 0.0.0.0 --loose'

4
infrastructure/.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
# Terraform
.terraform/*
*.tfstate
*.tfstate.*

47
infrastructure/app_config.tf
View File

@@ -1,47 +0,0 @@
data "azurerm_client_config" "current" {}
data "azurerm_user_assigned_identity" "user_assigned_identity" {
name = "noahspanflyingdevuser"
resource_group_name = azurerm_resource_group.resource_group.name
}
resource "azurerm_app_configuration" "app_configuration" {
name = "noahspan-appconfig"
resource_group_name = azurerm_resource_group.resource_group.name
location = azurerm_resource_group.resource_group.location
identity {
type = "UserAssigned"
identity_ids = [
data.azurerm_user_assigned_identity.user_assigned_identity.id
]
}
}
resource "azurerm_role_assignment" "role_assignment" {
scope = azurerm_app_configuration.app_configuration.id
role_definition_name = "App Configuration Data Owner"
principal_id = data.azurerm_client_config.current.object_id
}
# resource "azurerm_app_configuration_feature" "flying-pilots" {
# configuration_store_id = azurerm_app_configuration.app_configuration.id
# description = "Feature flag for pilots page in flying app"
# name = "flying-pilots"
# label = "flying-pilots-label"
# enabled = false
# depends_on = [ azurerm_role_assignment.role_assignment ]
# }
# resource "azurerm_app_configuration_feature" "flying-logbook" {
# configuration_store_id = azurerm_app_configuration.app_configuration.id
# description = "Feature flag for logbook page in flying app"
# name = "flying-logbook"
# label = "flying-logbook-label"
# enabled = false
# depends_on = [ azurerm_role_assignment.role_assignment ]
# }

4
infrastructure/config.tf Normal file
View File

@@ -0,0 +1,4 @@
module "environment" {
source = "./config"
environment = var.WORKSPACE
}

61
infrastructure/config/main.tf Normal file
View File

@@ -0,0 +1,61 @@
locals {
container_app_app_name = {
test = "root-app-test"
prod = "root-app-prod"
}
container_app_app_container_image = {
test = "noahspan/root-app:v0.0.1"
prod = "noahspan/root-app:v0.0.1"
}
container_app_app_container_name = {
test = "root-app-test"
prod = "root-app-prod"
}
container_app_api_name = {
test = "root-api-test"
prod = "root-api-prod"
}
container_app_api_container_image = {
test = "noahspan/root-api:v0.0.1"
prod = "noahspan/root-api:v0.0.1"
}
container_app_api_container_name = {
test = "root-api-test"
prod = "root-api-prod"
}
container_app_api_dapr_app_id = {
test = "rootapitest"
prod = "rootpapiprod"
}
container_app_environment_name = {
test = "root-test"
prod = "root-prod"
}
custom_domain_count = {
test = 0
prod = 1
}
log_analytics_workspace_name = {
test = "root-log-analytics-workspace-test"
prod = "root-log-analytics-workspace-prod"
}
storage_account_name = {
test = "noahspanroottest"
prod = "noahspanrootprod"
}
storage_tables = {
test = ["projects"]
prod = ["projects"]
}
}

47
infrastructure/config/outputs.tf Normal file
View File

@@ -0,0 +1,47 @@
output "container_app_app_name" {
value = local.container_app_app_name[var.environment]
}
output "container_app_app_container_image" {
value = local.container_app_app_container_image[var.environment]
}
output "container_app_app_container_name" {
value = local.container_app_app_container_name[var.environment]
}
output "container_app_api_name" {
value = local.container_app_api_name[var.environment]
}
output "container_app_api_container_image" {
value = local.container_app_api_container_image[var.environment]
}
output "container_app_api_container_name" {
value = local.container_app_api_container_name[var.environment]
}
output "container_app_api_dapr_app_id" {
value = local.container_app_api_dapr_app_id[var.environment]
}
output "container_app_environment_name" {
value = local.container_app_environment_name[var.environment]
}
output "custom_domain_count" {
value = local.custom_domain_count[var.environment]
}
output "log_analytics_workspace_name" {
value = local.log_analytics_workspace_name[var.environment]
}
output "storage_account_name" {
value = local.storage_account_name[var.environment]
}
output "storage_tables" {
value = local.storage_tables[var.environment]
}

1
infrastructure/config/variables.tf Normal file
View File

@@ -0,0 +1 @@
variable "environment" {}

49
infrastructure/dns.tf
View File

@@ -1,49 +0,0 @@
# resource "azurerm_static_web_app_custom_domain" "static_web_app_custom_domain_txt" {
# static_web_app_id = module.static_web_app.id
# domain_name = var.DOMAIN_NAME
# validation_type = "dns-txt-token"
# }
resource "azurerm_dns_zone" "dns_zone" {
name = var.DOMAIN_NAME
resource_group_name = azurerm_resource_group.resource_group.name
}
resource "azurerm_dns_txt_record" "dns_txt_record" {
name = var.WEBSITE_NAME == var.DOMAIN_NAME ? "@" : split(".", var.WEBSITE_NAME)[0]
zone_name = azurerm_dns_zone.dns_zone.name
resource_group_name = azurerm_resource_group.resource_group.name
ttl = 14400
record {
value = azurerm_static_web_app_custom_domain.static_web_app_custom_domain.validation_token == "" ? "validated" : azurerm_static_web_app_custom_domain.static_web_app_custom_domain.validation_token
}
# email
record {
value = var.EMAIL_TXT_VALUE == "" ? "validated" : var.EMAIL_TXT_VALUE
}
record {
value = var.EMAIL_SPF_VALUE == "" ? "validated" : var.EMAIL_SPF_VALUE
}
}
# email
resource "azurerm_dns_mx_record" "dns_mx_record" {
name = "@"
zone_name = azurerm_dns_zone.dns_zone.name
resource_group_name = azurerm_resource_group.resource_group.name
ttl = 14400
record {
preference = 10
exchange = "mx01.mail.icloud.com."
}
record {
preference = 10
exchange = "mx02.mail.icloud.com."
}
}

66
infrastructure/main.tf
View File

@@ -1,45 +1,23 @@
# module "static_web_app" {
# source = "./modules/static_web_app"
# region = var.REGION
# resource_group_name = azurerm_resource_group.resource_group.name
# static_web_app_name = var.STATIC_WEB_APP_NAME
# custom_domain_name_count = var.CUSTOM_DOMAIN_NAME_COUNT
# domain_name = var.DOMAIN_NAME
# subdomain_name = var.SUBDOMAIN_NAME
# }
resource "azurerm_static_web_app" "static_web_app" {
name = var.STATIC_WEB_APP_NAME
resource_group_name = azurerm_resource_group.resource_group.name
location = var.REGION
}
resource "azurerm_static_web_app_custom_domain" "static_web_app_custom_domain" {
static_web_app_id = azurerm_static_web_app.static_web_app.id
domain_name = var.WEBSITE_NAME
validation_type = "dns-txt-token"
}
resource "azurerm_dns_a_record" "dns_a_record" {
name = var.WEBSITE_NAME == var.DOMAIN_NAME ? "@" : split(".", var.WEBSITE_NAME)[0]
zone_name = azurerm_dns_zone.dns_zone.name
resource_group_name = azurerm_resource_group.resource_group.name
ttl = 14400
target_resource_id = azurerm_static_web_app.static_web_app.id
}
resource "azurerm_dns_cname_record" "dns_cname_record" {
name = "www"
zone_name = azurerm_dns_zone.dns_zone.name
resource_group_name = azurerm_resource_group.resource_group.name
ttl = 14400
record = azurerm_static_web_app.static_web_app.default_host_name
}
resource "azurerm_static_web_app_custom_domain" "static_web_app_custom_domain_www" {
static_web_app_id = azurerm_static_web_app.static_web_app.id
domain_name = "www.${var.DOMAIN_NAME}"
validation_type = "cname-delegation"
depends_on = [ azurerm_dns_cname_record.dns_cname_record ]
module "container_app" {
source = "github.com/noahspannbauer/noahspan-terraform/modules/container_app"
app_subdomain_name = var.APP_SUBDOMAIN_NAME
client_id = var.CLIENT_ID
client_secret = var.CLIENT_SECRET
container_app_app_name = module.environment.container_app_app_name
container_app_app_container_image = module.environment.container_app_api_container_image
container_app_app_container_name = module.environment.container_app_api_container_name
container_app_api_name = module.environment.container_app_api_name
container_app_api_container_image = module.environment.container_app_api_container_image
container_app_api_container_name = module.environment.container_app_api_container_name
container_app_environment_name = module.environment.container_app_environment_name
custom_domain_count = module.environment.custom_domain_count
dns_zone_resource_group = var.DNS_ZONE_RESOURCE_GROUP
docker_io_password = var.DOCKER_IO_PASSWORD
docker_io_username = var.DOCKER_IO_USERNAME
domain_name = var.DOMAIN_NAME
log_analytics_workspace_name = module.environment.log_analytics_workspace_name
resource_group_name = var.RESOURCE_GROUP_NAME
storage_account_name = module.environment.storage_account_name
storage_tables = module.environment.storage_tables
tenant_id = var.TENANT_ID
}

12
infrastructure/modules/static_web_app/main.tf
View File

@@ -1,12 +0,0 @@
# resource "azurerm_static_web_app" "static_web_app" {
# name = var.static_web_app_name
# resource_group_name = var.resource_group_name
# location = var.region
# }
# resource "azurerm_static_web_app_custom_domain" "static_web_app_custom_domain" {
# count = var.custom_domain_name_count
# static_web_app_id = azurerm_static_web_app.static_web_app.id
# domain_name = "${var.subdomain_name}.${var.domain_name}"
# validation_type = "cname-delegation"
# }

11
infrastructure/modules/static_web_app/outputs.tf
View File

@@ -1,11 +0,0 @@
output "id" {
value = azurerm_static_web_app.static_web_app.id
}
output "api_key" {
value = azurerm_static_web_app.static_web_app.api_key
}
output "default_host_name" {
value = azurerm_static_web_app.static_web_app.default_host_name
}

24
infrastructure/modules/static_web_app/variables.tf
View File

@@ -1,24 +0,0 @@
variable "region" {
}
variable "resource_group_name" {
}
variable "static_web_app_name" {
}
variable "custom_domain_name_count" {
}
variable "domain_name" {
}
variable "subdomain_name" {
}

17
infrastructure/outputs.tf
View File

@@ -1,17 +0,0 @@
output "api_key" {
value = azurerm_static_web_app.static_web_app.api_key
sensitive = true
}
# output "default_host_name" {
# value = azurerm_static_web_app.static_web_app.default_host_name
# }
# output "validation_token" {
# value = azurerm_static_web_app_custom_domain.static_web_app_custom_domain_txt.validation_token
# sensitive = false
# }
output "name_servers" {
value = azurerm_dns_zone.dns_zone.name_servers
}

4
infrastructure/resource_group.tf
View File

@@ -1,4 +0,0 @@
resource "azurerm_resource_group" "resource_group" {
name = var.RESOURCE_GROUP_NAME
location = var.REGION
}

35
infrastructure/variables.tf
View File

@@ -1,12 +1,30 @@
variable "EMAIL_TXT_VALUE" {
variable "APP_SUBDOMAIN_NAME" {
type = string
}
variable "EMAIL_SPF_VALUE" {
variable "CLIENT_ID" {
type = string
}
variable "REGION" {
variable "CLIENT_SECRET" {
type = string
sensitive = true
}
variable "DNS_ZONE_RESOURCE_GROUP" {
type = string
}
variable "DOCKER_IO_PASSWORD" {
type = string
sensitive = true
}
variable "DOCKER_IO_USERNAME" {
type = string
}
variable "DOMAIN_NAME" {
type = string
}
@@ -14,18 +32,11 @@ variable "RESOURCE_GROUP_NAME" {
type = string
}
variable "STATIC_WEB_APP_NAME" {
variable "TENANT_ID" {
type = string
}
variable "CUSTOM_DOMAIN_NAME_COUNT" {
type = number
}
variable "DOMAIN_NAME" {
variable "WORKSPACE" {
type = string
}
variable "WEBSITE_NAME" {
type = string
}

11
package.json Normal file
View File

@@ -0,0 +1,11 @@
{
"name": "noahspan-root",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

11759
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
pnpm-workspace.yaml Normal file
View File

@@ -0,0 +1,4 @@
packages:
- 'api'
- 'app'
- 'app2'