Skip to content

Commit

Permalink
Resolved Merging, Issue User Progress Bar #63 (#90)
Browse files Browse the repository at this point in the history 
* added progress bar on profile page, issue #63

* removed unnecessary css styles for progress bar

* updated progress bar consecutive steps

* modified progress bar, reduced width, removed progress bar in mobile view

* removed unused imported objects

* reverted temporary changes

* resolved conflict
  • Loading branch information
@prajwal714
prajwal714 authored Mar 12, 2020
1 parent 7b7cb0e commit 46e54ee
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 94 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,4 @@
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1"
}
}
}
193 changes: 101 additions & 92 deletions src/components/User/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import styles from "../../styles/user.module.css"
import LearningPaths from "./learningPaths"

import UserContext from "../../context/userContext"
import UserProgress from './userProgressBar';

export class user extends Component {
static contextType = UserContext
Expand All @@ -33,53 +34,53 @@ export class user extends Component {
<div className={styles.social}>
<Row className={styles.social_row}>
{data.github !== "" &&
data.github !== null &&
data.github !== "https://github.com/" ? (
<Col span={6}>
<GithubFilled
onClick={() => window.open(data.github)}
className={styles.icon}
/>
</Col>
) : (
""
)}
data.github !== null &&
data.github !== "https://github.com/" ? (
<Col span={6}>
<GithubFilled
onClick={() => window.open(data.github)}
className={styles.icon}
/>
</Col>
) : (
""
)}
{data.linkedin !== "" &&
data.linkedin !== null &&
data.linkedin !== "https://linkedin.com/" ? (
<Col span={6}>
<LinkedinFilled
onClick={() => window.open(data.linkedin)}
className={styles.icon}
/>
</Col>
) : (
""
)}
data.linkedin !== null &&
data.linkedin !== "https://linkedin.com/" ? (
<Col span={6}>
<LinkedinFilled
onClick={() => window.open(data.linkedin)}
className={styles.icon}
/>
</Col>
) : (
""
)}
{data.twitter !== "" &&
data.twitter !== null &&
data.twitter !== "https://twitter.com/" ? (
<Col span={6}>
<TwitterOutlined
onClick={() => window.open(data.twitter)}
className={styles.icon}
/>
</Col>
) : (
""
)}
data.twitter !== null &&
data.twitter !== "https://twitter.com/" ? (
<Col span={6}>
<TwitterOutlined
onClick={() => window.open(data.twitter)}
className={styles.icon}
/>
</Col>
) : (
""
)}
{data.facebook !== "" &&
data.facebook !== null &&
data.facebook !== "https://facebook.com/" ? (
<Col span={6}>
<FacebookFilled
onClick={() => window.open(data.facebook)}
className={styles.icon}
/>
</Col>
) : (
""
)}
data.facebook !== null &&
data.facebook !== "https://facebook.com/" ? (
<Col span={6}>
<FacebookFilled
onClick={() => window.open(data.facebook)}
className={styles.icon}
/>
</Col>
) : (
""
)}
</Row>
</div>
</div>
Expand All @@ -99,9 +100,13 @@ export class user extends Component {
})}
</div>
) : (
<div></div>
)}
<div></div>
)}
</div>
<Row className={styles.userInfo}>
<UserProgress data={data} type="desktop"></UserProgress>

</Row>
<Row className={styles.userInfo}>
<Col span={8}>
<div className={styles.count}>
Expand Down Expand Up @@ -157,6 +162,10 @@ export class user extends Component {
<div className={styles.text}>Learning Paths</div>
</Col>
</Row>
<Row >
<UserProgress data={data} type="mobile"></UserProgress>

</Row>
</div>

<div className={styles.bio}>{data.about}</div>
Expand All @@ -173,59 +182,59 @@ export class user extends Component {
})}
</div>
) : (
<div></div>
)}
<div></div>
)}

<div className={styles.social}>
<Row className={styles.social_row}>
{data.github !== "" &&
data.github !== null &&
data.github !== "https://github.com/" ? (
<Col span={6}>
<GithubFilled
onClick={() => window.open(data.github)}
className={styles.icon}
/>
</Col>
) : (
""
)}
data.github !== null &&
data.github !== "https://github.com/" ? (
<Col span={6}>
<GithubFilled
onClick={() => window.open(data.github)}
className={styles.icon}
/>
</Col>
) : (
""
)}
{data.linkedin !== "" &&
data.linkedin !== null &&
data.linkedin !== "https://linkedin.com/" ? (
<Col span={6}>
<LinkedinFilled
onClick={() => window.open(data.linkedin)}
className={styles.icon}
/>
</Col>
) : (
""
)}
data.linkedin !== null &&
data.linkedin !== "https://linkedin.com/" ? (
<Col span={6}>
<LinkedinFilled
onClick={() => window.open(data.linkedin)}
className={styles.icon}
/>
</Col>
) : (
""
)}
{data.twitter !== "" &&
data.twitter !== null &&
data.twitter !== "https://twitter.com/" ? (
<Col span={6}>
<TwitterOutlined
onClick={() => window.open(data.twitter)}
className={styles.icon}
/>
</Col>
) : (
""
)}
data.twitter !== null &&
data.twitter !== "https://twitter.com/" ? (
<Col span={6}>
<TwitterOutlined
onClick={() => window.open(data.twitter)}
className={styles.icon}
/>
</Col>
) : (
""
)}
{data.facebook !== "" &&
data.facebook !== null &&
data.facebook !== "https://facebook.com/" ? (
<Col span={6}>
<FacebookFilled
onClick={() => window.open(data.facebook)}
className={styles.icon}
/>
</Col>
) : (
""
)}
data.facebook !== null &&
data.facebook !== "https://facebook.com/" ? (
<Col span={6}>
<FacebookFilled
onClick={() => window.open(data.facebook)}
className={styles.icon}
/>
</Col>
) : (
""
)}
</Row>
</div>
</div>
Expand Down
70 changes: 70 additions & 0 deletions src/components/User/userProgressBar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React from 'react'
import { Steps, Progress } from 'antd';
const { Step } = Steps;

const UserProgress = ({ data, type }) => {
console.log(data);
const { about, skills, linkedin, github, facebook } = data;

const progress = [
about, skills, github, linkedin, facebook
]

let progressVal = 0;
for (let i = 0; i < 5; i++) {
const ele = progress[i];
console.log(ele);
if (ele !== "" && ele !== "https://github.com/" && ele !== "https://linkedin.com/in/" && ele !== "https://facebook.com/")
progressVal++;
else
break;
}
return (
<div style={type === "mobile" ? { marginTop: "10px" } : {}}>
<h3>Profile Strength</h3>
{
(type === "mobile") ?
(<>
<Steps
direction="vertical"
current={progressVal}>

<Step title="About" />
<Step title="Skills" />
<Step title="Github" />
<Step title="LinkedIn" />
<Step title="Facebook" />
</Steps>
</>) :
(
<>
<Steps
current={progressVal}
style={{ width: "80%" }}
>

<Step title="About" />
<Step title="Skills" />
<Step title="Github" />
<Step title="LinkedIn" />
<Step title="Facebook" />

</Steps>
<Progress
strokeColor={{
'0%': '#108ee9',
'100%': '#87d068',
}}
style={{
width: "80%"
}}
percent={progressVal * 20}
/>
</>
)
}
</div>
);
}

export default UserProgress;
3 changes: 3 additions & 0 deletions src/styles/user.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,9 @@
}

@media only screen and (max-width: 768px) {



.mobileProfile {
display: block;
}
Expand Down

0 comments on commit 46e54ee

Please sign in to comment.