Skip to content
Snippets Groups Projects
Commit 3555251c authored by hannahl8's avatar hannahl8
Browse files

completed LabsPage.tsx and corresponding components

parent 43a7d713
No related branches found
No related tags found
No related merge requests found
Pipeline #10691 passed
import {ResearchLabProps} from "../types.ts";
import {NavLink} from "react-router-dom";
import {labsPagePath} from "../utils.ts";
export default function FilterLabsLinks(props: ResearchLabProps) {
const collegeLinks = props.researchLabs.map((lab) => {
// const icon = category.name in icons ? icons[category.name] : '';
return (
<li key={lab.id}>
<NavLink to={`${labsPagePath}/${lab.college}`}>{lab.college}</NavLink>
</li>
);
});
return <ul>{collegeLinks}</ul>;
}
\ No newline at end of file
#lab-boxes {
display: flex;
justify-content: left;
flex-wrap: wrap;
padding: 1em;
gap: 1em;
}
import './LabsList.css';
import {ResearchLabProps} from "../types.ts";
import LabsListItem from "./LabsListItem.tsx";
export default function LabsList(props: ResearchLabProps) {
const labsList = props.researchLabs.map((researchLab) => (
<LabsListItem researchLabItem={researchLab}/>
));
return <section className="labs-list">
<ul id="lab-boxes">{labsList}</ul>
</section>;
}
.lab-box {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding: 0.5em;
gap: 0.1em;
border: solid 1px var(--default-text-color);
border-radius: 0.25em;
width: 300px;
}
.lab-name {
font-weight: bolder;
text-decoration: underline;
}
.lab-college {
font-weight: lighter;
}
.lab-pi {
font-style: italic;
}
.lab-description {
height: 80px;
overflow: hidden;
text-overflow: ellipsis;
}
.lab-description:hover {
cursor: default;
}
h1, h2, h3, h4 {
padding: 5px;
margin: 0;
}
\ No newline at end of file
import {ResearchLabItem} from "../types.ts";
import './LabsListItem.css';
import {Link} from "react-router-dom";
export default function LabsListItem(props: { researchLabItem: ResearchLabItem }) {
return (
<li key={props.researchLabItem.id} className="lab-box">
<Link to={`${props.researchLabItem.url}`}><h1 className="lab-name"
title={props.researchLabItem.name}>{props.researchLabItem.name}</h1>
</Link>
<h2 className="lab-college">{props.researchLabItem.college}</h2>
<h3 className="lab-pi">Dr. John Wick</h3>
<h4 className="lab-description"
title={props.researchLabItem.description}>{props.researchLabItem.description}</h4>
</li>
);
}
\ No newline at end of file
.labs-page {
display: flex;
flex-direction: row;
/*align-items: center;*/
padding: 1em;
}
.labs-nav {
padding: 1em;
text-wrap: nowrap;
border: double 5px var(--tertiary-color);
}
.labs-nav ul {
display: flex;
flex-direction: column;
}
.labs-nav ul li {
padding: 1em 0;
}
.labs-content {
display: flex;
flex-direction: column;
//holder them to left of the column
justify-content: left;
padding: 1em;
}
.labs-title {
text-align: left;
}
\ No newline at end of file
......@@ -4,9 +4,11 @@ import './LabsPage.css';
import {labsAPI, loginPagePath} from "../utils.ts";
import {useNavigate} from "react-router-dom";
import {ResearchLabItem} from "../types.ts";
import LabsList from "../components/LabsList.tsx";
import FilterLabsLinks from "../components/FilterLabsLinks.tsx";
export default function LabsPage() {
const [researchLabItem, setResearchLabItem] = useState<ResearchLabItem[]>([]);
const [researchLabs, setResearchLabs] = useState<ResearchLabItem[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const navigate = useNavigate();
......@@ -27,7 +29,7 @@ export default function LabsPage() {
}
})
.then(response => {
setResearchLabItem(response.data);
setResearchLabs(response.data);
setLoading(false);
})
.catch(error => {
......@@ -46,12 +48,14 @@ export default function LabsPage() {
return (
<div className='labs-page center-content'>
<h1>Data from Endpoint</h1>
<ul>
{researchLabItem.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
<div className='labs-nav'>
<h2 className='labs-nav-title'>Filter Options</h2>
<FilterLabsLinks researchLabs={researchLabs}/>
</div>
<div className='labs-content'>
<h1 className='labs-title'>Research Labs</h1>
<LabsList researchLabs={researchLabs}/>
</div>
</div>
);
}
\ No newline at end of file
export interface ResearchLabItem {
id: number;
name: string;
// Add other fields as needed
url: string;
pi: string;
college: string;
description: string;
}
export interface WelcomeProps {
......@@ -15,4 +18,8 @@ export interface AppHeaderProps {
export interface LoginProps {
onLogin: (token: string) => void;
}
export interface ResearchLabProps {
researchLabs: ResearchLabItem[];
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment