Merge pull request #6 from uwcbc/cl-21-member-profile-component

hydrofluorich · web-flow · commit 2e323bf566f2 · 2023-09-08T11:04:20.000-04:00
Feature: CL-21: Member profile table and individual view
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-*.pyc
+*.pyc
+*env
diff --git a/backend/__init__.py b/backend/__init__.py
@@ -0,0 +1,3 @@
+import pymysql
+
+pymysql.install_as_MySQLdb()
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,21 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<meta
+			name="description"
+			content="Web site created using create-react-app"
+		/>
+		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+		<!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+		<!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +23,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+		<title>Celesta by UWCBC</title>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+		<!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +38,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+	</body>
 </html>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,20 +1,8 @@
 import { AppShell, Navbar, Header } from '@mantine/core'
 import Heading from './components/Heading'
 import MemberTable from './components/MemberTable'
-import axios from 'axios'
-import { useEffect, useState } from 'react'
 
 function App() {
-	const [post, setPost] = useState(null);
-
-	useEffect(() => {
-		axios.get('http://localhost:8000/api/students/').then((response) => {
-		setPost(response.data);
-		});
-	}, []);
-
-	if (!post) return null;
-
 	return (
 		<AppShell
 			padding='md'
@@ -29,7 +17,7 @@ function App() {
 				</Header>
 			}
 		>
-			<MemberTable member_list={post}/>
+			<MemberTable />
 		</AppShell>
 	)
 }
diff --git a/frontend/src/components/MemberEntry.tsx b/frontend/src/components/MemberEntry.tsx
@@ -6,7 +6,7 @@ interface MemberEntryProps {
 	image?: string
 }
 
-// TODO: link member.mainInstrument to instrument assets, and add created time
+// TODO: link member.mainInstrument to instrument assets, and add created time (CL-42)
 const MemberEntry = ({ member, image }: MemberEntryProps) => {
 	return (
 		<Group miw={300}>
diff --git a/frontend/src/components/MemberProfile.tsx b/frontend/src/components/MemberProfile.tsx
@@ -18,52 +18,19 @@ interface MemberProfileProps {
 	member: Member
 }
 
-const types = [
-	{ value: 'undergraduate', label: 'Undergraduate' },
-	{ value: 'graduate', label: 'Graduate' },
-	{ value: 'alumni', label: 'Alumni' },
-	{ value: 'other', label: 'Other' }
-]
+const types = ['Undergraduate', 'Graduate', 'Alumni', 'Other']
 
 const faculties = [
-	{ value: 'arts', label: 'Arts' },
-	{ value: 'engineering', label: 'Engineering' },
-	{ value: 'environment', label: 'Environment' },
-	{ value: 'health', label: 'Health' },
-	{ value: 'math', label: 'Math' },
-	{ value: 'science', label: 'Science' }
+	'Arts',
+	'Engineering',
+	'Environment',
+	'Health',
+	'Math',
+	'Science'
 ]
 
-const instruments = [
-	{
-		value: 'Crimson',
-		label: 'Woodcock, american'
-	},
-	{
-		value: 'Green',
-		label: 'Goanna lizard'
-	},
-	{
-		value: 'Aquamarine',
-		label: 'Common wombat'
-	},
-	{
-		value: 'Indigo',
-		label: 'Ocelot'
-	},
-	{
-		value: 'Pink',
-		label: 'Banded mongoose'
-	},
-	{
-		value: 'Orange',
-		label: "Squirrel, smith's bush"
-	},
-	{
-		value: 'Yellow',
-		label: 'Lizard, collared'
-	}
-]
+// TODO: fill with proper instruments (CL-42)
+const instruments: string[] = []
 
 const sizes = [
 	{ value: 'xs', label: 'XS' },
@@ -77,27 +44,29 @@ const MemberProfile = ({ opened, onClose, member }: MemberProfileProps) => {
 	const [firstName, setFirstName] = useState<string>('')
 	const [lastName, setLastName] = useState<string>('')
 	const [email, setEmail] = useState<string>('')
-	const [type, setType] = useState<string | null>()
+	const [type, setType] = useState<string | null>('')
 	const [mainInstrument, setMainInstrument] = useState<string | null>()
 	const [instrument, setInstrument] = useState<string[]>([]) // TODO: disable "main instrument" option in secondary instrument list
 
 	useEffect(() => {
 		setFirstName(member.first_name)
 		setLastName(member.last_name)
 		setEmail(member.email)
-		setType(member.type)
+		setType(types[member.member_type - 1])
 	}, [member])
 
 	const UWStudentProfile = () => {
-		const [faculty, setFaculty] = useState<string | null>()
+		const [faculty, setFaculty] = useState<string | null>('')
 		const [studentNumber, setStudentNumber] = useState<number>()
 		const [watIAM, setWatIAM] = useState<string>()
 
 		useEffect(() => {
-			setFaculty(member.faculty)
+			if (member.faculty !== undefined && typeof member.faculty === 'number')
+				setFaculty(faculties[member.faculty - 1])
 			setStudentNumber(member.studentNumber ?? undefined)
 			setWatIAM(member.watIAM ?? undefined)
 		}, [])
+
 		return (
 			<>
 				<Select
@@ -158,9 +127,9 @@ const MemberProfile = ({ opened, onClose, member }: MemberProfileProps) => {
 					data={types}
 					withAsterisk
 					value={type}
-					onChange={setType}
+					onChange={(value) => setType(value || null)}
 				/>
-				{(type === 'undergraduate' || type === 'graduate') && (
+				{(type === 'Undergraduate' || type === 'Graduate') && (
 					<UWStudentProfile />
 				)}
 				<Select
diff --git a/frontend/src/components/MemberTable.tsx b/frontend/src/components/MemberTable.tsx
@@ -1,138 +1,30 @@
-import { useState } from 'react'
 import { Box, Flex, Title } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import MemberProfile from './MemberProfile'
 import { Member } from 'types'
+import axios from 'axios'
+import { useEffect, useState } from 'react'
 import MemberEntry from './MemberEntry'
 
-const data = [
-	{
-		id: '8',
-		first_name: 'Nester',
-		last_name: 'Preddle',
-		email: 'npreddle0@nih.gov',
-		type: 'undergraduate',
-		studentNumber: 21783203,
-		watIAM: 'Awaradam',
-		mainInstrument: '',
-		shirt_size: 'MW'
-	},
-	{
-		id: '4',
-		first_name: 'Edward',
-		last_name: 'Duchenne',
-		email: 'educhenne1@marriott.com',
-		type: 'undergraduate',
-		studentNumber: 28213544,
-		watIAM: 'Bentota',
-		mainInstrument: '',
-		shirt_size: 'RQ'
-	},
-	{
-		id: '263',
-		first_name: 'Cynthia',
-		last_name: 'Cornthwaite',
-		email: 'ccornthwaite2@prweb.com',
-		type: 'undergraduate',
-		studentNumber: 25405594,
-		watIAM: 'Malmö',
-		mainInstrument: '',
-		shirt_size: 'UI'
-	},
-	{
-		id: '21097',
-		first_name: 'Bernita',
-		last_name: 'Markwelley',
-		email: 'bmarkwelley3@un.org',
-		type: 'undergraduate',
-		studentNumber: 27762875,
-		watIAM: 'Liangping',
-		mainInstrument: '',
-		shirt_size: 'EA'
-	},
-	{
-		id: '19',
-		first_name: 'Rebecca',
-		last_name: 'McNally',
-		email: 'rmcnally4@webnode.com',
-		type: 'graduate',
-		studentNumber: 25796776,
-		watIAM: 'Kekaha',
-		mainInstrument: '',
-		shirt_size: 'QE'
-	},
-	{
-		id: '22',
-		first_name: 'Ada',
-		last_name: 'Lafflina',
-		email: 'alafflina5@goo.ne.jp',
-		type: 'graduate',
-		studentNumber: 28382715,
-		watIAM: 'Lehu',
-		mainInstrument: '',
-		shirt_size: 'KL'
-	},
-	{
-		id: '29',
-		first_name: 'Maxi',
-		last_name: 'Shiel',
-		email: 'mshiel6@xinhuanet.com',
-		type: 'alumni',
-		studentNumber: 23363880,
-		watIAM: 'Ashley',
-		mainInstrument: '',
-		shirt_size: 'QE'
-	},
-	{
-		id: '6',
-		first_name: 'Buddie',
-		last_name: 'Jewell',
-		email: 'bjewell7@aboutads.info',
-		type: 'alumni',
-		studentNumber: 29634676,
-		watIAM: 'Georgetown',
-		mainInstrument: '',
-		shirt_size: 'CS'
-	},
-	{
-		id: '1',
-		first_name: 'Caroljean',
-		last_name: 'Menzies',
-		email: 'cmenzies8@amazonaws.com',
-		type: 'other',
-		studentNumber: 23355570,
-		watIAM: 'Terapo Mission',
-		mainInstrument: '',
-		shirt_size: 'KC'
-	},
-	{
-		id: '203',
-		first_name: 'Callida',
-		last_name: 'Gabbot',
-		email: 'cgabbot9@ucsd.edu',
-		type: 'other',
-		studentNumber: 20895476,
-		watIAM: 'Ratanakiri',
-		mainInstrument: '',
-		shirt_size: 'HE'
-	}
-]
-
-interface MemberListProps {
-	member_list : []
-}
-
-const MemberTable = ({member_list}: MemberListProps) => {
+const MemberTable = () => {
 	const [opened, { open, close }] = useDisclosure(false)
 	const [openMember, setOpenMember] = useState<Member | null>(null)
 
+	const [memberList, setMemberList] = useState([])
+
+	useEffect(() => {
+		axios.get('http://localhost:8000/api/students/').then((response) => {
+			setMemberList(response.data)
+		})
+	}, [])
+
 	return (
 		<>
 			<Title order={3} mb={10}>
 				Members
 			</Title>
 			<Flex justify='flex-start' gap='xs' wrap='wrap' direction='row'>
-				{member_list.map((member: Member) => (
+				{memberList.map((member: Member) => (
 					<Box
 						key={member.id}
 						onClick={() => {
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -1,14 +1,14 @@
 export interface Member {
-  id: string
-  first_name: string
-  last_name: string
-  email: string
-  type: string
-  faculty?: string
-  studentNumber?: number
-  watIAM?: string | null
-  mainInstrument: string
-  otherInstruments?: string
-  shirt_size?: string
-  other?: string
-}
+	id: string
+	first_name: string
+	last_name: string
+	email: string
+	member_type: number
+	faculty?: string
+	studentNumber?: number
+	watIAM?: string
+	mainInstrument: string
+	otherInstruments?: string
+	shirt_size?: string
+	other?: string
+}

-Original file line number
+Diff line change
 node_modules
 -*.pyc
 +*.pyc
 +*env
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import pymysql`
	`2`	`+`
	`3`	`+pymysql.install_as_MySQLdb()`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ interface MemberEntryProps {`
`6`	`6`	`image?: string`
`7`	`7`	`}`
`8`	`8`
`9`		`-// TODO: link member.mainInstrument to instrument assets, and add created time`
	`9`	`+// TODO: link member.mainInstrument to instrument assets, and add created time (CL-42)`
`10`	`10`	`const MemberEntry = ({ member, image }: MemberEntryProps) => {`
`11`	`11`	`return (`
`12`	`12`	`<Group miw={300}>`