Skip to content

Codebase consistency #43

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

Draft
arpanlaha wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Codebase consistency #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c4be8d
move google analytics into _app and change all pages to function comp…
arpanlaha Aug 19, 2020
451b838
add _document
arpanlaha Aug 19, 2020
a280580
Merge branch 'master' of https://github.com/hack4impact-uiuc/uiuc.hac…
arpanlaha Aug 23, 2020
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
77 changes: 30 additions & 47 deletions pages/_app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,34 @@
import React from "react";
import App from "next/app";
import ErrorMessage from "../components/errorMessage";
import React, { useEffect } from "react";
import { PageTransition } from "next-page-transitions";
import { initializeGA, logPage } from "../components/Analytics";

export default class MyApp extends App {
constructor(props) {
super(props);
this.state = { hasError: false };
}
export default function MyApp({ Component, pageProps }) {
useEffect(() => {
initializeGA();
logPage();
}, []);

componentDidCatch(error, errorInfo) {
console.error("Page Error Boundary: ", error);
// This is needed to render errors correctly in development / production
super.componentDidCatch(error, errorInfo);
}

render() {
const { Component, pageProps } = this.props;
return (
<div>
<PageTransition timeout={300} classNames="page-transition">
{this.state.hasError ? (
<ErrorMessage
code="404"
message="Something went Wrong. Are you logged in? Check logs as well"
/>
) : (
<Component {...pageProps} />
)}
</PageTransition>
<style jsx global>{`
.page-transition-enter {
opacity: 0;
}
.page-transition-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.page-transition-exit {
opacity: 1;
}
.page-transition-exit-active {
opacity: 0;
transition: opacity 300ms;
}
`}</style>
</div>
);
}
return (
<div>
<PageTransition timeout={300} classNames="page-transition">
<Component {...pageProps} />
</PageTransition>
<style jsx global>{`
.page-transition-enter {
opacity: 0;
}
.page-transition-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.page-transition-exit {
opacity: 1;
}
.page-transition-exit-active {
opacity: 0;
transition: opacity 300ms;
}
`}</style>
</div>
);
}
16 changes: 16 additions & 0 deletions pages/_document.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import Document, { Head, Html, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
42 changes: 16 additions & 26 deletions pages/about.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,21 @@ import Head from "../components/head";
import Nav from "../components/nav";
import Footer from "../components/footer";
import Team from "../components/about/team";
import { initializeGA, logPage } from "../components/Analytics";

class AboutPage extends React.Component {
componentDidMount() {
initializeGA();
logPage();
}

render() {
return (
<div>
<Head title="About Hack4Impact" />
<Nav navType="otherNav" />
<GradientBanner
title="We believe in using tech for good."
subHeadline="Hack4Impact believes in technology’s huge potential to empower activists and humanitarians to create lasting and impactful social change. We work to foster the wider adoption of software as a tool for social good."
arrow
/>
<MissionSection />
<OurValues />
<Team />
<Footer />
</div>
);
}
export default function AboutPage() {
return (
<div>
<Head title="About Hack4Impact" />
<Nav navType="otherNav" />
<GradientBanner
title="We believe in using tech for good."
subHeadline="Hack4Impact believes in technology’s huge potential to empower activists and humanitarians to create lasting and impactful social change. We work to foster the wider adoption of software as a tool for social good."
arrow
/>
<MissionSection />
<OurValues />
<Team />
<Footer />
</div>
);
}

export default AboutPage;
117 changes: 51 additions & 66 deletions pages/apply/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,61 @@
import React, { Component } from "react";
import React from "react";
import GradientBanner from "../../components/gradientBanner";
import ActionButton from "../../components/actionButton";
import Head from "../../components/head";
import Nav from "../../components/nav";
import { Container, Row, Col } from "reactstrap";
import Footer from "../../components/footer";
import { initializeGA, logPage } from "../../components/Analytics";

class ApplyPage extends Component {
constructor(props) {
super(props);
this.state = {};
}
export default function ApplyPage() {
return (
<>
<Head title="Apply" />
<Nav navType="otherNav" />
<GradientBanner title="Apply" arrow />
<section className="timeline-split-apply">
<Container>
<Row>
<Col md="6" className="text-center">
<a href="https://h4i-project-timeline.now.sh/">
<img
src="/images/timeline.jpg"
className="img-fluid"
alt="Project timeline - weeks 1-4: project scoping, weeks 5-12: development, week 13: MVP, weeks 14-18: development, week 19: handoff"
/>
</a>
</Col>

componentDidMount() {
initializeGA();
logPage();
}
<Col md="6">
<Row className="margin-lg-top">
<div className="col-md-8 offset-md-3">
<h4 className="text-title">Students</h4>
<p>
Want to apply your skills to benefit the community? Learn
how you can build software products that has potential to
impact lives alongside a team of motivated and talented
peers.
</p>
<ActionButton text="Apply" link="/apply/students" />
</div>
</Row>

render() {
return (
<>
<Head title="Apply" />
<Nav navType="otherNav" />
<GradientBanner title="Apply" arrow />
<section className="timeline-split-apply">
<Container>
<Row>
<Col md="6" className="text-center">
<a href="https://h4i-project-timeline.now.sh/">
<img
src="/images/timeline.jpg"
className="img-fluid"
alt="Project timeline - weeks 1-4: project scoping, weeks 5-12: development, week 13: MVP, weeks 14-18: development, week 19: handoff"
/>
</a>
</Col>

<Col md="6">
<Row className="margin-lg-top">
<div className="col-md-8 offset-md-3">
<h4 className="text-title">Students</h4>
<p>
Want to apply your skills to benefit the community? Learn
how you can build software products that has potential to
impact lives alongside a team of motivated and talented
peers.
</p>
<ActionButton text="Apply" link="/apply/students" />
</div>
</Row>

<Row className="margin-lg-top">
<div className="col-md-8 offset-md-3">
<h4 clas="text-title">Nonprofits</h4>
<p>
Have a core need that your nonprofit wants solved? Learn
more about our services and how your organization can
partner with us to support your organization's goals and
mission.
</p>
<ActionButton text="Apply" link="/apply/nonprofits" />
</div>
</Row>
</Col>
</Row>
</Container>
</section>
<Footer />
</>
);
}
<Row className="margin-lg-top">
<div className="col-md-8 offset-md-3">
<h4 clas="text-title">Nonprofits</h4>
<p>
Have a core need that your nonprofit wants solved? Learn
more about our services and how your organization can
partner with us to support your organization's goals and
mission.
</p>
<ActionButton text="Apply" link="/apply/nonprofits" />
</div>
</Row>
</Col>
</Row>
</Container>
</section>
<Footer />
</>
);
}

export default ApplyPage;
80 changes: 32 additions & 48 deletions pages/apply/nonprofits.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React from "react";
import Faq from "../../components/faq";
import GradientBanner from "../../components/gradientBanner";
import ServicesDetail from "../../components/apply/nonprofit/servicesDetail";
Expand All @@ -10,52 +10,36 @@ import Nav from "../../components/nav";
import data from "../../data/ngoApplyData";
import Footer from "../../components/footer";

import { initializeGA, logPage } from "../../components/Analytics";

// TODO: ADD `closed` prop to ApplicationProcess to add text about applications being closed!
class NonProfits extends Component {
constructor(props) {
super(props);
this.state = {};
}

componentDidMount() {
initializeGA();
logPage();
}

render() {
return (
<div>
<Head title="H4I Apply | Nonprofits" />
<Nav navType="otherNav" />
<GradientBanner
color="#64ab8a"
title={data.title}
subHeadline={data.subHeadline}
buttonText="Learn More"
buttonLink={data.pitchbookLink}
minorButtonText="Apply"
minorButtonLink={data.applicationLink}
isLeftButtonDisplayed
isRightButtonDisplayed={false}
/>
<ServicesDetail />
<Quote
quote={data.quote.text}
source={data.quote.source}
sourceTitle={data.quote.sourceTitle}
/>
<ApplicationProcess
closedText={data.closedApplicationText}
titleDetail={data.applicationDetail}
processes={data.ngoProcess}
/>
<Faq questions={data.faq} />
<Footer />
</div>
);
}
export default function NonprofitsApply() {
return (
<div>
<Head title="H4I Apply | Nonprofits" />
<Nav navType="otherNav" />
<GradientBanner
color="#64ab8a"
title={data.title}
subHeadline={data.subHeadline}
buttonText="Learn More"
buttonLink={data.pitchbookLink}
minorButtonText="Apply"
minorButtonLink={data.applicationLink}
isLeftButtonDisplayed
isRightButtonDisplayed={false}
/>
<ServicesDetail />
<Quote
quote={data.quote.text}
source={data.quote.source}
sourceTitle={data.quote.sourceTitle}
/>
<ApplicationProcess
closedText={data.closedApplicationText}
titleDetail={data.applicationDetail}
processes={data.ngoProcess}
/>
<Faq questions={data.faq} />
<Footer />
</div>
);
}

export default NonProfits;
Loading