Skip to main content

Resume

The 4-H Resume is a report that provides a summary of the user's 4-H experience. The resume includes information about the user's projects, awards, and leadership roles. The resume is generated based on the data stored in the application and is used to provide a printable version of the user's 4-H experience.

The resume consists of 14 sections, each of which provides information about a different aspect of the user's 4-H experience.

info

Learn more about the resume from the public documentation.

Resume Sections​

To produce the resume PDF, each of the 14 sections has been converted to a page component. Components for each section are defined in the src/app/components/reports/resume directory. These components are then combined to create the full resume. All of these are combined in the PDFFile component, which can be found in the src/app/components/reports/resume/Resume.jsx file.

note

As more PDFs are added, it may be appropriate to rename this file.

Eash section has it's own implementation of the following:

  • styles: The styles for the section
  • TableHeader(): A header which is put at the top of the table and after each page break.
  • addPageBreak(): A function that adds a page break to the table when the table is too long to fit on the current page.

Resume Data​

Each section component receives the user's data as through the tableData prop. This data is then used to populate the resume with the user's information. The data is passed to the resume component from the src/app/components/reports/resume/Resume.jsx file.

Previewing the Resume​

As explained in React-PDF, PDFs can be rendered through a download button or a preview. Below are examples of how use these two fetures for the Full Resume document or for an individual section, as implemented in the My Resume page and section pages.

Full Resume​

import { PDFViewer, PDFDownloadLink } from '@react-pdf/renderer';
import { PDFFile } from 'src/app/components/reports/resume/Resume';

const MyResume = () => (
    // Fetch the resume data from the API
    const [resumeData, setResumeData] = useState({});

    # Render the PDF in a viewer
    <PDFViewer style={{width: '100%', height: '100%'}} >
        <PDFFile resumeData={resumeData} />
    </PDFViewer>

    # Render the PDF in a download button
    <PDFDownloadLink className={styles.pdfBtn} document={<PDFFile resumeData={resumeData} />} fileName={"My 4-H Resume.pdf"}>
        Download Resume
    </PDFDownloadLink>

);

Individual Section​

import { PDFViewer, PDFDownloadLink, Document } from '@react-pdf/renderer';
import { Section1 } from 'src/app/components/reports/resume/Section1';

const SectionDoc(data) {
    return (
        <Document>
            <Section1 tableData={data} />
        </Document>
    )
}

const MySection1 = () => (
    // Fetch the section data from the API
    const [sectionData, setSectionData] = useState({});

    # Render the PDF in a viewer
    <PDFViewer style={{width: '100%', height: '100%'}} >
        <SectionDoc sectionData={sectionData} />
    </PDFViewer>

    # Render the PDF in a download button
    <PDFDownloadLink className={styles.pdfBtn} document={<SectionDoc sectionData={sectionData} />} fileName={"Section 1.pdf"}>
        Download Section 1
    </PDFDownloadLink>
);