Skip to content

refactored components to functional components using hooks #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+505 −556
Open

refactored components to functional components using hooks #25

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b74575
refactored components to functional components using hooks
Feb 11, 2022
cd0a505
updated App.js into a functional component using hooks
Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 71 additions & 97 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React, { useState, useEffect } from "react";
import $ from "jquery";
import "./App.scss";
import Header from "./components/Header";
@@ -8,135 +8,109 @@ import Experience from "./components/Experience";
import Projects from "./components/Projects";
import Skills from "./components/Skills";

class App extends Component {
function App(props) {
const [resumeData, setResumeData] = useState({});
const [sharedData, setSharedData] = useState({});
const [selectedLanguage, setSelectedLanguage] = useState(
window.$primaryLanguage
);
document.title = sharedData.basic_info?.name;

constructor(props) {
super();
this.state = {
foo: "bar",
resumeData: {},
sharedData: {},
};
}

applyPickedLanguage(pickedLanguage, oppositeLangIconId) {
this.swapCurrentlyActiveLanguage(oppositeLangIconId);
function applyPickedLanguage(pickedLanguage) {
setSelectedLanguage(pickedLanguage);
document.documentElement.lang = pickedLanguage;
var resumePath =
document.documentElement.lang === window.$primaryLanguage
? `res_primaryLanguage.json`
: `res_secondaryLanguage.json`;
this.loadResumeFromPath(resumePath);
loadResumeFromPath(resumePath);
}

swapCurrentlyActiveLanguage(oppositeLangIconId) {
var pickedLangIconId =
oppositeLangIconId === window.$primaryLanguageIconId
? window.$secondaryLanguageIconId
: window.$primaryLanguageIconId;
document
.getElementById(oppositeLangIconId)
.removeAttribute("filter", "brightness(40%)");
document
.getElementById(pickedLangIconId)
.setAttribute("filter", "brightness(40%)");
}

componentDidMount() {
this.loadSharedData();
this.applyPickedLanguage(
window.$primaryLanguage,
window.$secondaryLanguageIconId
);
}
useEffect(() => {
loadSharedData();
applyPickedLanguage(window.$primaryLanguage);
}, []);

loadResumeFromPath(path) {
function loadResumeFromPath(path) {
$.ajax({
url: path,
dataType: "json",
cache: false,
success: function (data) {
this.setState({ resumeData: data });
}.bind(this),
setResumeData(data);
},
error: function (xhr, status, err) {
alert(err);
},
});
}

loadSharedData() {
function loadSharedData() {
$.ajax({
url: `portfolio_shared_data.json`,
dataType: "json",
cache: false,
success: function (data) {
this.setState({ sharedData: data });
document.title = `${this.state.sharedData.basic_info.name}`;
}.bind(this),
setSharedData(data);
},
error: function (xhr, status, err) {
alert(err);
},
});
}

render() {
return (
<div>
<Header sharedData={this.state.sharedData.basic_info} />
<div className="col-md-12 mx-auto text-center language">
<div
onClick={() =>
this.applyPickedLanguage(
window.$primaryLanguage,
window.$secondaryLanguageIconId
)
}
style={{ display: "inline" }}
>
<span
className="iconify language-icon mr-5"
data-icon="twemoji-flag-for-flag-united-kingdom"
data-inline="false"
id={window.$primaryLanguageIconId}
></span>
</div>
<div
onClick={() =>
this.applyPickedLanguage(
window.$secondaryLanguage,
window.$primaryLanguageIconId
)
}
style={{ display: "inline" }}
>
<span
className="iconify language-icon"
data-icon="twemoji-flag-for-flag-poland"
data-inline="false"
id={window.$secondaryLanguageIconId}
></span>
</div>
return (
<div>
<Header sharedData={sharedData.basic_info} />
<div className="col-md-12 mx-auto text-center language">
<div
onClick={() => applyPickedLanguage(window.$primaryLanguage)}
style={
selectedLanguage === window.$primaryLanguage
? { display: "inline", filter: "brightness(40%)" }
: { display: "inline" }
}
>
<span
className="iconify language-icon mr-5"
data-icon="twemoji-flag-for-flag-united-kingdom"
data-inline="false"
></span>
</div>
<div
onClick={() => applyPickedLanguage(window.$secondaryLanguage)}
style={
selectedLanguage === window.$secondaryLanguage
? { display: "inline", filter: "brightness(40%)" }
: { display: "inline" }
}
>
<span
className="iconify language-icon"
data-icon="twemoji-flag-for-flag-poland"
data-inline="false"
></span>
</div>
<About
resumeBasicInfo={this.state.resumeData.basic_info}
sharedBasicInfo={this.state.sharedData.basic_info}
/>
<Projects
resumeProjects={this.state.resumeData.projects}
resumeBasicInfo={this.state.resumeData.basic_info}
/>
<Skills
sharedSkills={this.state.sharedData.skills}
resumeBasicInfo={this.state.resumeData.basic_info}
/>
<Experience
resumeExperience={this.state.resumeData.experience}
resumeBasicInfo={this.state.resumeData.basic_info}
/>
<Footer sharedBasicInfo={this.state.sharedData.basic_info} />
</div>
);
}
<About
resumeBasicInfo={resumeData.basic_info}
sharedBasicInfo={sharedData.basic_info}
/>
<Projects
resumeProjects={resumeData.projects}
resumeBasicInfo={resumeData.basic_info}
/>
<Skills
sharedSkills={sharedData.skills}
resumeBasicInfo={resumeData.basic_info}
/>
<Experience
resumeExperience={resumeData.experience}
resumeBasicInfo={resumeData.basic_info}
/>
<Footer sharedBasicInfo={sharedData.basic_info} />
</div>
);
}

export default App;
148 changes: 69 additions & 79 deletions src/components/About.js
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,85 @@
import React, { Component } from "react";
import React from "react";
import { Icon } from "@iconify/react";
import angularIcon from "@iconify/icons-logos/angular-icon";
import reactIcon from "@iconify/icons-logos/react";
import vueIcon from "@iconify/icons-logos/vue";

class About extends Component {
render() {
if (this.props.sharedBasicInfo) {
var profilepic = "images/" + this.props.sharedBasicInfo.image;
}
if (this.props.resumeBasicInfo) {
var sectionName = this.props.resumeBasicInfo.section_name.about;
var hello = this.props.resumeBasicInfo.description_header;
var about = this.props.resumeBasicInfo.description;
}
function About(props) {
const profilepic = "images/" + props?.sharedBasicInfo?.image;
const sectionName = props?.resumeBasicInfo?.section_name.about;
const hello = props?.resumeBasicInfo?.description_header;
const about = props?.resumeBasicInfo?.description;

return (
<section id="about">
<div className="col-md-12">
<h1 style={{ color: "black" }}>
<span>{sectionName}</span>
</h1>
<div className="row center mx-auto mb-5">
<div className="col-md-4 mb-5 center">
<div className="polaroid">
<span style={{ cursor: "auto" }}>
<img
height="250px"
src={profilepic}
alt="Avatar placeholder"
/>
<Icon
icon={angularIcon}
style={{ fontSize: "400%", margin: "9% 5% 0 5%" }}
/>
<Icon
icon={reactIcon}
style={{ fontSize: "400%", margin: "9% 5% 0 5%" }}
/>
<Icon
icon={vueIcon}
style={{ fontSize: "400%", margin: "9% 5% 0 5%" }}
/>
</span>
</div>
return (
<section id="about">
<div className="col-md-12">
<h1 style={{ color: "black" }}>
<span>{sectionName}</span>
</h1>
<div className="row center mx-auto mb-5">
<div className="col-md-4 mb-5 center">
<div className="polaroid">
<span style={{ cursor: "auto" }}>
<img height="250px" src={profilepic} alt="Avatar placeholder" />
<Icon
icon={angularIcon}
style={{ fontSize: "400%", margin: "9% 5% 0 5%" }}
/>
<Icon
icon={reactIcon}
style={{ fontSize: "400%", margin: "9% 5% 0 5%" }}
/>
<Icon
icon={vueIcon}
style={{ fontSize: "400%", margin: "9% 5% 0 5%" }}
/>
</span>
</div>
</div>

<div className="col-md-8 center">
<div className="col-md-10">
<div className="card">
<div className="card-header">
<span
className="iconify"
data-icon="emojione:red-circle"
data-inline="false"
></span>{" "}
&nbsp;{" "}
<span
className="iconify"
data-icon="twemoji:yellow-circle"
data-inline="false"
></span>{" "}
&nbsp;{" "}
<span
className="iconify"
data-icon="twemoji:green-circle"
data-inline="false"
></span>
</div>
<div
className="card-body font-trebuchet text-justify ml-3 mr-3"
style={{
height: "auto",
fontSize: "132%",
lineHeight: "200%",
}}
>
<br />
<span className="wave">{hello} :) </span>
<br />
<br />
{about}
</div>
<div className="col-md-8 center">
<div className="col-md-10">
<div className="card">
<div className="card-header">
<span
className="iconify"
data-icon="emojione:red-circle"
data-inline="false"
></span>{" "}
&nbsp;{" "}
<span
className="iconify"
data-icon="twemoji:yellow-circle"
data-inline="false"
></span>{" "}
&nbsp;{" "}
<span
className="iconify"
data-icon="twemoji:green-circle"
data-inline="false"
></span>
</div>
<div
className="card-body font-trebuchet text-justify ml-3 mr-3"
style={{
height: "auto",
fontSize: "132%",
lineHeight: "200%",
}}
>
<br />
<span className="wave">{hello} :) </span>
<br />
<br />
{about}
</div>
</div>
</div>
</div>
</div>
</section>
);
}
</div>
</section>
);
}

export default About;
Loading