Skip to content
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

Jump to bottom

Added Twitter Hook #84

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+115 −73
Open

Added Twitter Hook #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b7f3e14
added twitter hook
Muljayan Oct 21, 2018
6a35d47
included fixmeparser to twitter hook
Muljayan Oct 21, 2018
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
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"react-scripts-ts": "2.17.0",
"react-select": "^2.0.0",
"react-sidebar": "^3.0.2",
"react-twitter-widgets": "^1.7.1",
"reactstrap": "^6.4.0",
"redux": "4.0.0",
"redux-form": "^7.4.2",
Expand Down
18 changes: 18 additions & 0 deletions src/components/TwitterHook/TwitterHook.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from "react";
import { Timeline } from 'react-twitter-widgets';


export const TwitterHook = () => (
<React.Fragment>
<Timeline
dataSource={{
sourceType: 'profile',
screenName: 'fixmeparser'
}}
options={{
height: '400'
}}
/>
</React.Fragment>
);
export default TwitterHook;
3 changes: 3 additions & 0 deletions src/components/TwitterHook/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import TwitterHook from "./TwitterHook";

export default TwitterHook;
149 changes: 77 additions & 72 deletions src/routes/Home/components/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
import FixMeFooter from "../../../components/FixMeFooter/FixMeFooter";
import FixMeMetas from "../../../components/FixMeMetas/FixMeMetas";
import FixMeNavbar from "../../../components/FixMeNavbar/FixMeNavbar";
import TwitterHook from "../../../components/TwitterHook/TwitterHook";
import { customPageView } from '../../../helpers/helpers';
import "../../../styles/home.css";
import GroupCopy from "./assets/[email protected]";
Expand All @@ -12,16 +13,16 @@ import TellUsAboutYou from "./TellUsAboutYou";
interface IHomeProps {
readonly getProjects: () => any;
readonly projectLength: number;
readonly updateLanguage: (language: string[]) => any;
readonly updateLevel: (level?:string) => any;
readonly updateLanguage: (language: string[]) => any;
readonly updateLevel: (level?: string) => any;
readonly updateType: (type?: string) => any;

}
export default class Home extends React.PureComponent<IHomeProps,{
export default class Home extends React.PureComponent<IHomeProps, {
readonly focusSelect: boolean;
}>{

public readonly state = { focusSelect: false }
public readonly state = { focusSelect: false }

public componentDidMount(): void {
this.props.getProjects()
Expand All @@ -35,80 +36,84 @@ export default class Home extends React.PureComponent<IHomeProps,{
this.props.updateType();
}

public handleClick = () => {
const scrolltoMid = document.getElementById('tellusaboutyou');
if(!!scrolltoMid){
scrolltoMid.scrollIntoView({ block: 'center', behavior: 'smooth' });
setTimeout(() => {
this.setState(state => ({ focusSelect: !state.focusSelect }));
}, 400);
public handleClick = () => {
const scrolltoMid = document.getElementById('tellusaboutyou');
if (!!scrolltoMid) {
scrolltoMid.scrollIntoView({ block: 'center', behavior: 'smooth' });
setTimeout(() => {
this.setState(state => ({ focusSelect: !state.focusSelect }));
}, 400);
}
}
}

public render(){
const {projectLength} = this.props
return (
<div className="row home-container">
<FixMeMetas title="Fixme" description="FixMe is a platform that helps contributors find opensource projects that best fit their skills and abilities."/>
<section className="home-section container">
<FixMeNavbar />
<div className="row">
<div className="col-md-4 d-flex flex-column justify-content-center align-middle">
<h2 className="home-call-to-action-text mb-5">
You are a <span className="extra-bold">coder</span>.
public render() {
const { projectLength } = this.props
return (
<div className="row home-container">
<FixMeMetas title="Fixme" description="FixMe is a platform that helps contributors find opensource projects that best fit their skills and abilities." />
<section className="home-section container">
<FixMeNavbar />
<div className="row">
<div className="col-md-4 d-flex flex-column justify-content-center align-middle">
<h2 className="home-call-to-action-text mb-5">
You are a <span className="extra-bold">coder</span>.
Open-source projects need{" "}
<span className="extra-bold">your skills</span>.
<span className="extra-bold">your skills</span>.
<br /> <br />We’ll connect you with meaningful contribution opportunities!
</h2>
<button onClick={this.handleClick} className="btn btn-lg learn-more">LEARN MORE</button>
</div>
<div className="col-md-8">
<img
className="img-fluid home-illustration-img"
src={Illustration}
alt=""
/>
</div>
</div>
</section>
<section id="tellusaboutyou" className="home-section container-fluid home-about-you">
<div className="container d-flex justify-content-center">
<TellUsAboutYou focus={this.state.focusSelect}/>
</div>
</section>
<section className="container-fluid home-project">
<div className="container">
<div className="d-flex row">
<div className="col-md-6 col-12 d-flex">
<h4 className="home-project-text py-5 m-auto">
<Link to="/projects" className="home-project-link">{`${projectLength === 1 ? "1 project" :`${projectLength} projects`}`} </Link> on board <br /> <span>(and counting…)</span>
</h4>
<button onClick={this.handleClick} className="btn btn-lg learn-more">LEARN MORE</button>
</div>
<div className="col-md-8">
<img
className="img-fluid home-illustration-img"
src={Illustration}
alt=""
/>
</div>
</div>
<div className="col-md-6 col-12 h-100">
<img className="img-fluid home-project-img" src={GroupCopy} alt="projects" />
</section>
<section id="tellusaboutyou" className="home-section container-fluid home-about-you">
<div className="container d-flex justify-content-center">
<TellUsAboutYou focus={this.state.focusSelect} />
</div>
</div>
</div>
</section>
<section className="home-section container-fluid home-twitter pb-3">
<div className="row">
<div className="container mb-4 mt-4">
<div className="row">
<div className="col-md-5 col-12 d-flex justify-content-center">
<div className="justify-content-center d-flex mb-3 flex-column">
<h2>@fixmeparser</h2>
<span>our latest tweets</span>
</section>
<section className="container-fluid home-project">
<div className="container">
<div className="d-flex row">
<div className="col-md-6 col-12 d-flex">
<h4 className="home-project-text py-5 m-auto">
<Link to="/projects" className="home-project-link">{`${projectLength === 1 ? "1 project" : `${projectLength} projects`}`} </Link> on board <br /> <span>(and counting…)</span>
</h4>
</div>
<div className="col-md-6 col-12 h-100">
<img className="img-fluid home-project-img" src={GroupCopy} alt="projects" />
</div>
<div className="justify-content-start">
<img src={LoudSpeaker} alt="" className="img-fluid"/>
</div></div>
<div className="col-md-7 col-12" >
<div className="home-twitter-tweet">Latest issue to fix for project Bootstrap! HELP! https://fixmeparser.com/issues#1825 </div>
</div>
</div></div>
</div>
</section>
<FixMeFooter />
</div>
)
}}
</div>
</section>
<section className="home-section container-fluid home-twitter pb-3">
<div className="row">
<div className="container mb-4 mt-4">
<div className="row">
<div className="col-md-5 col-12 d-flex justify-content-center">
<div className="justify-content-center d-flex mb-3 flex-column">
<h2>@fixmeparser</h2>
<span>our latest tweets</span>
</div>
<div className="justify-content-start">
<img src={LoudSpeaker} alt="" className="img-fluid" />
</div></div>
<div className="col-md-7 col-12" >
<div className="home-twitter-tweet">
<TwitterHook />
{/* Latest issue to fix for project Bootstrap! HELP! https://fixmeparser.com/issues#1825 */}
</div>
</div>
</div></div>
</div>
</section>
<FixMeFooter />
</div>
)
}
}
17 changes: 16 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8108,7 +8108,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@~15.6.1:
prop-types@^15.3.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@~15.6.1:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
Expand Down Expand Up @@ -8698,6 +8698,16 @@ react-transition-group@^2.2.1, react-transition-group@^2.3.1:
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"

react-twitter-widgets@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/react-twitter-widgets/-/react-twitter-widgets-1.7.1.tgz#60061f37a8c4f361c27f3d1d7ceba98d3cd80a40"
integrity sha512-bAcR/NKqRbVRJav981bHrm2+xka7NA2nQJB6Urtj9BARqP7aeGHPC0CrrC7wdYIaluOqiF8MiTtURqIJjFs2ZA==
dependencies:
exenv "^1.2.1"
lodash "^4.17.4"
prop-types "^15.3.0"
scriptjs "^2.5.8"

"react@^15.6.2 || ^16.0":
version "16.4.2"
resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
Expand Down Expand Up @@ -9440,6 +9450,11 @@ schema-utils@^0.4.5:
ajv "^6.1.0"
ajv-keywords "^3.1.0"

scriptjs@^2.5.8:
version "2.5.9"
resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==

[email protected], scroll-into-view-if-needed@^2.2.16:
version "2.2.16"
resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.16.tgz#208232f4d7bb531130177b6c02d760d1e1796cbd"
Expand Down