Refactor jobs into separate files

This commit is contained in:
Dejvino 2023-05-27 16:06:43 +02:00
parent c881021532
commit 9ec851c19d
8 changed files with 89 additions and 27 deletions

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { usePersonContext } from '../hooks/PersonContext'; import { usePersonContext } from '../hooks/PersonContext';
import JobHistory from './JobHistory'; import JobHistory from './job/JobsHistory';
export default function WorkExperience() { export default function WorkExperience() {
const person = usePersonContext() const person = usePersonContext()

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { usePersonContext } from '../hooks/PersonContext'; import { usePersonContext } from '../hooks/PersonContext';
import JobHistory from './JobHistory'; import JobHistory from './job/JobsHistory';
export default function WorkExperience() { export default function WorkExperience() {
const person = usePersonContext() const person = usePersonContext()

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import Card from 'react-bootstrap/Card'; import Card from 'react-bootstrap/Card';
import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement'; import { useAutoFocus, useFocusedElement } from '../../hooks/FocusedElement';
export type Props = { export type Props = {
heading?: string, heading?: string,

View File

@ -4,16 +4,12 @@ import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col'; import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row'; import Row from 'react-bootstrap/Row';
import JobCard from './JobCard'; import JobCard from './JobCard';
import { partition } from '../utils'; import { partition } from '../../utils';
import { Job, Jobs } from '@/PersonalDataTypes'; import { Job, Jobs } from '@/PersonalDataTypes';
import useSize from '../hooks/Size'; import useSize from '../../hooks/Size';
import { Accordion } from 'react-bootstrap'; import { Accordion } from 'react-bootstrap';
import { JobListProps } from './types';
type JobListProps = {
jobs: Jobs,
entriesPerRow?: number,
currentHeading?: string,
}
export type Props = { export type Props = {
heading: string, heading: string,
@ -49,7 +45,7 @@ function FullList(props: JobListProps) {
) )
} }
function SmallList(props: JobListProps) { export default function JobsAccordion(props: JobListProps) {
const {jobs} = props const {jobs} = props
const config = {...defaultProps, ...props} const config = {...defaultProps, ...props}
function jobTitle(job: Job) { function jobTitle(job: Job) {
@ -76,19 +72,3 @@ function SmallList(props: JobListProps) {
</Accordion> </Accordion>
) )
} }
export default function JobHistory(props: Props) {
const {SizeWrapper, size} = useSize()
const jobs = props.jobs
const jobsList = size.width < 600 ? <SmallList {...props} /> : <FullList {...props} />
return (
<Container>
<h2>{props.heading}</h2>
<SizeWrapper>
{jobsList}
</SizeWrapper>
</Container>
)
}

View File

@ -0,0 +1,42 @@
import React from 'react';
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import JobCard from './JobCard';
import { partition } from '../../utils';
import { JobListProps } from './types';
export type Props = {
heading: string,
} & JobListProps
const defaultProps = {
entriesPerRow: 2,
currentHeading: 'Currently',
}
export default function JobsCards(props: JobListProps) {
const {jobs} = props
const config = {...defaultProps, ...props}
return (
<Container>
{jobs.current && (
<Row>
<Col>
<JobCard heading={config.currentHeading} {...jobs.current} />
</Col>
</Row>
)}
{partition(jobs.previous, config.entriesPerRow).map((jobs, index) => (
<Row key={index}>
{(jobs.map((job, subindex) => (
<Col key={index + '_' + subindex}>
<JobCard {...job} />
</Col>
)))}
</Row>
))}
</Container>
)
}

View File

@ -0,0 +1,31 @@
import React from 'react';
import Container from 'react-bootstrap/Container';
import useSize from '../../hooks/Size';
import { JobListProps } from './types';
import JobsAccordion from './JobsAccordion';
import JobsCards from './JobsCards';
export type Props = {
heading: string,
} & JobListProps
const defaultProps = {
entriesPerRow: 2,
currentHeading: 'Currently',
}
export default function JobHistory(props: Props) {
const {SizeWrapper, size} = useSize()
const jobsList = size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />
return (
<Container>
<h2>{props.heading}</h2>
<SizeWrapper>
{jobsList}
</SizeWrapper>
</Container>
)
}

View File

@ -0,0 +1,7 @@
import { Jobs } from "@/PersonalDataTypes";
export type JobListProps = {
jobs: Jobs,
entriesPerRow?: number,
currentHeading?: string,
}

View File

@ -13,9 +13,11 @@ body {
} }
.footer { .footer {
margin-top: 2rem; margin-top: 2rem;
filter: opacity(75%)
} }
.tiny { .tiny {
font-size: 75%; font-size: 75%;
filter: opacity(75%)
} }
.container > h2, h3, h4 { .container > h2, h3, h4 {