Wire containers to context and convert to function components

Experience, Education, and SectionTitle converted from class to
function components. All containers now consume CVContext and filter
data through processData before rendering. SectionTitle accepts
children for inline toggle controls.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: mrtysn

Mert_Yasin_CV.pdf

@@ -1,21 +1,20 @@
 import React from "react";
 import { Divider, Header } from "semantic-ui-react";
 
-class SectionTitle extends React.Component {
-  render() {
-    return (
-      <div>
-        <Header
-          as="h2"
-          style={{ marginTop: "1em", marginBottom: 0 }}
-          className={"fontSectionHeader colorSectionItem"}
-        >
-          {this.props.title}
-        </Header>
-        <Divider style={{ marginTop: 0, marginBottom: 0 }} />
-      </div>
-    );
-  }
-}
+const SectionTitle = ({ title, children }) => {
+  return (
+    <div>
+      <Header
+        as="h2"
+        style={{ marginTop: "1em", marginBottom: 0 }}
+        className={"fontSectionHeader colorSectionItem"}
+      >
+        {title}
+        {children}
+      </Header>
+      <Divider style={{ marginTop: 0, marginBottom: 0 }} />
+    </div>
+  );
+};
 
 export default SectionTitle;

src/components/SectionTitle.js

@@ -1,18 +1,17 @@
 import React from "react";
 import { List } from "semantic-ui-react";
 import SectionTitle from "../components/SectionTitle";
+import { useCVContext } from "../context/CVContext";
+import { processData } from "../utils/filterData";
 import achievementsData from "../data/achievements.json";
 
 const renderContent = (item) => {
   if (!item.links) {
-    // Simple content, just parse HTML tags
     return <span dangerouslySetInnerHTML={{ __html: item.content }} />;
   }
 
-  // Handle content with links
   let content = item.content;
-  
-  // Replace {linkText} placeholders with actual links
+
   Object.entries(item.links).forEach(([linkText, linkData]) => {
     const classNameAttr = linkData.className && linkData.className.trim() ? ` class="${linkData.className}"` : '';
     const linkElement = `<a href="${linkData.url}" target="_blank" rel="noopener noreferrer"${classNameAttr}>${linkText}</a>`;
@@ -23,12 +22,15 @@ const renderContent = (item) => {
 };
 
 const Achievements = () => {
-  if (achievementsData && achievementsData.length > 0) {
+  const { state } = useCVContext();
+  const data = processData(achievementsData, state);
+
+  if (data && data.length > 0) {
     return (
       <div>
         <SectionTitle title={"EXTRACURRICULAR"} />
         <List bulleted>
-          {achievementsData.map((item, ix) => {
+          {data.map((item, ix) => {
             return (
               <List.Item key={ix} className={"px12"}>
                 {renderContent(item)}

src/containers/Achievements.js

@@ -1,31 +1,38 @@
 import React from "react";
 import SectionItem from "../components/SectionItem";
 import SectionTitle from "../components/SectionTitle";
+import SectionToggle from "../components/SectionToggle";
+import { TAGS } from "../constants/tags";
+import { useCVContext } from "../context/CVContext";
 import educationData from "../data/education.json";
+import { processEducationData } from "../utils/filterData";
 import { renderInstitutionTitle, renderEducationItems, renderJobTitle } from "../utils/educationRenderer";
 
-class Education extends React.Component {
-  render() {
-    return (
-      <div>
-        <SectionTitle title={"EDUCATION"} />
-        {educationData.map((education, index) => {
-          return (
-            <SectionItem
-              key={index}
-              companyTitle={renderInstitutionTitle(education.institution, education.program)}
-              location={education.location}
-              jobTitle={renderJobTitle(education)}
-              startDate={education.startDate}
-              endDate={education.endDate}
-              items={renderEducationItems(education)}
-              relevantItems={education.relevantCourses}
-            />
-          );
-        })}
-      </div>
-    );
-  }
+function Education() {
+  const { state } = useCVContext();
+  const data = processEducationData(educationData, state);
+
+  return (
+    <div>
+      <SectionTitle title={"EDUCATION"}>
+        <SectionToggle tag={TAGS.COURSEWORK} label="courses" />
+      </SectionTitle>
+      {data.map((education, index) => {
+        return (
+          <SectionItem
+            key={index}
+            companyTitle={renderInstitutionTitle(education.institution, education.program)}
+            location={education.location}
+            jobTitle={renderJobTitle(education)}
+            startDate={education.startDate}
+            endDate={education.endDate}
+            items={renderEducationItems(education)}
+            relevantItems={education.relevantCourses}
+          />
+        );
+      })}
+    </div>
+  );
 }
 
-export default Education;
+export default Education;

src/containers/Education.js

@@ -1,34 +1,37 @@
 import React from "react";
 import SectionItem from "../components/SectionItem";
 import SectionTitle from "../components/SectionTitle";
+import { useCVContext } from "../context/CVContext";
 import experienceData from "../data/experience.json";
+import { processData } from "../utils/filterData";
 import { renderCompanyTitle, renderResponsibility } from "../utils/experienceRenderer";
 
-class Experience extends React.Component {
-  render() {
-    return (
-      <div>
-        <SectionTitle title={"EXPERIENCE"} />
-        {experienceData.map((experience, index) => {
-          const items = experience.responsibilities.map((responsibility, idx) =>
-            renderResponsibility(responsibility, experience.links || {})
-          );
+function Experience() {
+  const { state } = useCVContext();
+  const data = processData(experienceData, state);
 
-          return (
-            <SectionItem
-              key={index}
-              companyTitle={renderCompanyTitle(experience.company)}
-              location={experience.location}
-              jobTitle={experience.position}
-              startDate={experience.startDate}
-              endDate={experience.endDate}
-              items={items}
-            />
-          );
-        })}
-      </div>
-    );
-  }
+  return (
+    <div>
+      <SectionTitle title={"EXPERIENCE"} />
+      {data.map((experience, index) => {
+        const items = experience.responsibilities.map((responsibility, idx) =>
+          renderResponsibility(responsibility, experience.links || {})
+        );
+
+        return (
+          <SectionItem
+            key={index}
+            companyTitle={renderCompanyTitle(experience.company)}
+            location={experience.location}
+            jobTitle={experience.position}
+            startDate={experience.startDate}
+            endDate={experience.endDate}
+            items={items}
+          />
+        );
+      })}
+    </div>
+  );
 }
 
 export default Experience;

src/containers/Experience.js

@@ -2,15 +2,19 @@ import React from "react";
 import { Grid } from "semantic-ui-react";
 import SectionTitle from "../components/SectionTitle";
 import { SkillRow } from "../components/SkillRow";
+import { useCVContext } from "../context/CVContext";
 import useWindowSize from "../utils/useWindowSize";
+import { processData } from "../utils/filterData";
 import skillsData from "../data/skills.json";
 
 function Skills() {
+  const { state } = useCVContext();
+  const data = processData(skillsData, state);
   const isNarrow = useWindowSize().width < 450;
   const titleColumnWidth = 3;
   const dataColumnWidth = 13;
   const className = "px12";
-  
+
   return (
     <div>
       <SectionTitle title={"SKILLS"} />
@@ -20,7 +24,7 @@ function Skills() {
         className={className}
         stackable={isNarrow}
       >
-        {skillsData.map((skillCategory, index) => (
+        {data.map((skillCategory, index) => (
           <SkillRow
             key={index}
             titleColumnWidth={titleColumnWidth}