Refactor jobs into separate files
This commit is contained in:
parent
c881021532
commit
9ec851c19d
@ -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()
|
||||||
|
@ -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()
|
||||||
|
@ -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,
|
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
42
src/app/components/job/JobsCards.tsx
Normal file
42
src/app/components/job/JobsCards.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
31
src/app/components/job/JobsHistory.tsx
Normal file
31
src/app/components/job/JobsHistory.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
7
src/app/components/job/types.tsx
Normal file
7
src/app/components/job/types.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { Jobs } from "@/PersonalDataTypes";
|
||||||
|
|
||||||
|
export type JobListProps = {
|
||||||
|
jobs: Jobs,
|
||||||
|
entriesPerRow?: number,
|
||||||
|
currentHeading?: string,
|
||||||
|
}
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user