${svg}`,
+ }}
+ />
+ );
+};
+
+SvgInline.propTypes = {
+ className: PropTypes.any,
+ url: PropTypes.string.isRequired,
+ forceLoading: PropTypes.bool,
+ compact: PropTypes.bool,
+};
+
+SvgInline.defaultProps = {
+ className: '',
+ forceLoading: false,
+ compact: false,
+};
+
+export default SvgInline;
diff --git a/frontend/frontend/src/components/Card/index.js b/frontend/frontend/src/components/Card/index.js
new file mode 100644
index 00000000..5e8bad36
--- /dev/null
+++ b/frontend/frontend/src/components/Card/index.js
@@ -0,0 +1,4 @@
+import SvgInline from './SVG';
+import { Card, Image } from './Card';
+
+export { Card, Image, SvgInline };
diff --git a/frontend/frontend/src/components/Generic/Button.js b/frontend/frontend/src/components/Generic/Button.js
new file mode 100644
index 00000000..d6f18202
--- /dev/null
+++ b/frontend/frontend/src/components/Generic/Button.js
@@ -0,0 +1,31 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { classnames } from '../../utils';
+
+const Button = (props) => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+Button.propTypes = {
+ className: PropTypes.string,
+ children: PropTypes.node.isRequired,
+};
+
+Button.defaultProps = {
+ className: '',
+};
+
+export default Button;
diff --git a/frontend/frontend/src/components/Generic/Checkbox.js b/frontend/frontend/src/components/Generic/Checkbox.js
new file mode 100644
index 00000000..0e9a114c
--- /dev/null
+++ b/frontend/frontend/src/components/Generic/Checkbox.js
@@ -0,0 +1,37 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Checkbox = ({ question, variable, setVariable, disabled }) => {
+ return (
+
setVariable(!variable)}
+ role="button"
+ >
+
+ );
+};
+
+Checkbox.propTypes = {
+ question: PropTypes.string.isRequired,
+ variable: PropTypes.bool.isRequired,
+ setVariable: PropTypes.func.isRequired,
+ disabled: PropTypes.bool,
+};
+
+Checkbox.defaultProps = {
+ disabled: false,
+};
+
+export default Checkbox;
diff --git a/frontend/frontend/src/components/Generic/Input.js b/frontend/frontend/src/components/Generic/Input.js
new file mode 100644
index 00000000..14948ed2
--- /dev/null
+++ b/frontend/frontend/src/components/Generic/Input.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { classnames } from '../../utils';
+
+// options is of form [{value: '', label: '', disabled: true/false}]
+const Input = ({
+ options,
+ selectedOption,
+ setSelectedOption,
+ disabled,
+ className,
+}) => {
+ return (
+
+ setSelectedOption(
+ options.find((item) => item.label === e.target.value),
+ // eslint-disable-next-line prettier/prettier
+ )}
+ disabled={disabled}
+ >
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+ );
+};
+
+Input.propTypes = {
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ value: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ disabled: PropTypes.bool,
+ }),
+ ).isRequired,
+ selectedOption: PropTypes.shape({
+ value: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ }).isRequired,
+ setSelectedOption: PropTypes.func.isRequired,
+ disabled: PropTypes.bool,
+ className: PropTypes.string,
+};
+
+Input.defaultProps = {
+ disabled: false,
+ className: '',
+};
+
+export default Input;
diff --git a/frontend/frontend/src/components/Generic/index.js b/frontend/frontend/src/components/Generic/index.js
new file mode 100644
index 00000000..71ec56e1
--- /dev/null
+++ b/frontend/frontend/src/components/Generic/index.js
@@ -0,0 +1,5 @@
+import Button from './Button';
+import Checkbox from './Checkbox';
+import Input from './Input';
+
+export { Button, Checkbox, Input };
diff --git a/frontend/frontend/src/components/Home/CheckboxSection.js b/frontend/frontend/src/components/Home/CheckboxSection.js
new file mode 100644
index 00000000..f5ac1a21
--- /dev/null
+++ b/frontend/frontend/src/components/Home/CheckboxSection.js
@@ -0,0 +1,44 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Section from './Section';
+import { Checkbox } from '../Generic';
+
+const CheckboxSection = ({
+ title,
+ text,
+ question,
+ variable,
+ setVariable,
+ disabled,
+}) => {
+ return (
+
+ );
+};
+
+CheckboxSection.propTypes = {
+ title: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired,
+ question: PropTypes.string.isRequired,
+ variable: PropTypes.bool.isRequired,
+ setVariable: PropTypes.func.isRequired,
+ disabled: PropTypes.bool,
+};
+
+CheckboxSection.defaultProps = {
+ disabled: false,
+};
+
+export default CheckboxSection;
diff --git a/frontend/frontend/src/components/Home/DateRangeSection.js b/frontend/frontend/src/components/Home/DateRangeSection.js
new file mode 100644
index 00000000..79ab0911
--- /dev/null
+++ b/frontend/frontend/src/components/Home/DateRangeSection.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Section from './Section';
+import { Input } from '../Generic';
+
+const DateRangeSection = ({
+ selectedTimeRange,
+ setSelectedTimeRange,
+ // eslint-disable-next-line no-unused-vars
+ privateAccess,
+}) => {
+ const timeRangeOptions = [
+ { id: 1, label: 'Past 1 Month', disabled: false, value: 'one_month' },
+ {
+ id: 2,
+ label: 'Past 3 Months',
+ disabled: false,
+ value: 'three_months',
+ },
+ { id: 2, label: 'Past 6 Months', disabled: false, value: 'six_months' },
+ { id: 3, label: 'Past 1 Year', disabled: false, value: 'one_year' },
+ // { id: 4, label: 'All Time', disabled: !privateAccess, value: 'all_time' },
+ { id: 4, label: 'All Time', disabled: true, value: 'all_time' },
+ ];
+
+ const selectedOption = selectedTimeRange || timeRangeOptions[2];
+
+ return (
+
+ );
+};
+
+DateRangeSection.propTypes = {
+ selectedTimeRange: PropTypes.object.isRequired,
+ setSelectedTimeRange: PropTypes.func.isRequired,
+ privateAccess: PropTypes.bool.isRequired,
+};
+
+export default DateRangeSection;
diff --git a/frontend/frontend/src/components/Home/Progress.js b/frontend/frontend/src/components/Home/Progress.js
new file mode 100644
index 00000000..6bcf51ff
--- /dev/null
+++ b/frontend/frontend/src/components/Home/Progress.js
@@ -0,0 +1,91 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+ FaArrowLeft as LeftArrowIcon,
+ FaArrowRight as RightArrowIcon,
+} from 'react-icons/fa';
+
+import { classnames } from '../../utils';
+
+const ProgressSection = ({ num, item, passed, onClick }) => {
+ return (
+
+
+ {`Step ${num + 1}`}
+
+
+ {item}
+
+
+ );
+};
+
+ProgressSection.propTypes = {
+ num: PropTypes.number.isRequired,
+ item: PropTypes.string.isRequired,
+ passed: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired,
+};
+
+const ProgressBar = ({ items, currItem, setCurrItem }) => {
+ const leftDisabled = currItem === 0;
+ const rightDisabled = currItem === items.length - 1;
+
+ return (
+
+
setCurrItem(currItem - 1)}
+ />
+
+ {items.map((item, index) => {
+ return (
+
= index}
+ onClick={() => setCurrItem(index)}
+ />
+ );
+ })}
+ setCurrItem(currItem + 1)}
+ />
+
+ );
+};
+
+ProgressBar.propTypes = {
+ items: PropTypes.array.isRequired,
+ currItem: PropTypes.number.isRequired,
+ setCurrItem: PropTypes.func.isRequired,
+};
+
+export default ProgressBar;
diff --git a/frontend/frontend/src/components/Home/Section.js b/frontend/frontend/src/components/Home/Section.js
new file mode 100644
index 00000000..f801609a
--- /dev/null
+++ b/frontend/frontend/src/components/Home/Section.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { HiOutlineLightningBolt as LightningIcon } from 'react-icons/hi';
+
+const Section = (props) => {
+ return (
+
+
+
+
+
+
+
+ {props.title}
+
+ {props.children}
+
+
+ );
+};
+
+Section.propTypes = {
+ title: PropTypes.string,
+ children: PropTypes.node,
+};
+
+Section.defaultProps = {
+ title: 'Test',
+ children:
This is a test!
,
+};
+
+export default Section;
diff --git a/frontend/frontend/src/components/Home/index.js b/frontend/frontend/src/components/Home/index.js
new file mode 100644
index 00000000..dbb0b441
--- /dev/null
+++ b/frontend/frontend/src/components/Home/index.js
@@ -0,0 +1,5 @@
+import ProgressBar from './Progress';
+import CheckboxSection from './CheckboxSection';
+import DateRangeSection from './DateRangeSection';
+
+export { ProgressBar, CheckboxSection, DateRangeSection };
diff --git a/frontend/frontend/src/components/Preview/Preview.js b/frontend/frontend/src/components/Preview/Preview.js
new file mode 100644
index 00000000..24425f35
--- /dev/null
+++ b/frontend/frontend/src/components/Preview/Preview.js
@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+ FaArrowRight as ArrowRightIcon,
+ FaArrowLeft as ArrowLeftIcon,
+} from 'react-icons/fa';
+
+import { classnames } from '../../utils';
+
+const Preview = ({ pages, details, showArrows }) => {
+ const totalPages = pages.length;
+ const [page, setPage] = useState(0);
+
+ const prevPage = () => {
+ setPage((page - 1 + totalPages) % totalPages);
+ };
+
+ const nextPage = () => {
+ setPage((page + 1 + totalPages) % totalPages);
+ };
+
+ useEffect(() => {
+ const interval = setInterval(nextPage, 5000);
+ return () => clearInterval(interval);
+ }, [page]);
+
+ return (
+
+
+
+ {showArrows && (
+
+ )}
+
+ {showArrows && (
+
+ )}
+
+
+
+ {details[page]}
+
+
+ );
+};
+
+Preview.propTypes = {
+ pages: PropTypes.arrayOf(PropTypes.any).isRequired,
+ details: PropTypes.arrayOf(PropTypes.string).isRequired,
+ showArrows: PropTypes.bool,
+};
+
+Preview.defaultProps = {
+ showArrows: true,
+};
+
+export default Preview;
diff --git a/frontend/frontend/src/components/Preview/index.js b/frontend/frontend/src/components/Preview/index.js
new file mode 100644
index 00000000..07345507
--- /dev/null
+++ b/frontend/frontend/src/components/Preview/index.js
@@ -0,0 +1,3 @@
+import Preview from './Preview';
+
+export default Preview;
diff --git a/frontend/frontend/src/components/Wrapped/Organization.js b/frontend/frontend/src/components/Wrapped/Organization.js
new file mode 100644
index 00000000..481d9065
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Organization.js
@@ -0,0 +1,61 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { classnames } from '../../utils';
+
+const WrappedSection = (props) => {
+ return (
+
+ {props.useTitle && (
+
{props.title}
+ )}
+ {props.children}
+
+ );
+};
+
+WrappedSection.propTypes = {
+ useTitle: PropTypes.bool,
+ title: PropTypes.string,
+ children: PropTypes.node.isRequired,
+};
+
+WrappedSection.defaultProps = {
+ useTitle: true,
+ title: '',
+};
+
+const WrappedCard = (props) => {
+ return (
+
+ );
+};
+
+WrappedCard.propTypes = {
+ children: PropTypes.node.isRequired,
+ className: PropTypes.string,
+ onMouseOver: PropTypes.func,
+ onMouseOut: PropTypes.func,
+};
+
+WrappedCard.defaultProps = {
+ className: '',
+ onMouseOver: () => {},
+ onMouseOut: () => {},
+};
+
+export { WrappedSection, WrappedCard };
diff --git a/frontend/frontend/src/components/Wrapped/Specifics/Bar.js b/frontend/frontend/src/components/Wrapped/Specifics/Bar.js
new file mode 100644
index 00000000..0f25ac7e
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Specifics/Bar.js
@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { WrappedCard } from '../Organization';
+import { BarGraph } from '../Templates';
+
+const monthNames = [
+ 'Jan',
+ 'Feb',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+];
+
+const dayNames = [
+ 'Sunday',
+ 'Monday',
+ 'Tuesday',
+ 'Wednesday',
+ 'Thursday',
+ 'Friday',
+ 'Saturday',
+];
+
+const BarMonth = ({ data, downloadLoading }) => {
+ const newData = data?.month_data?.months || [];
+
+ // eslint-disable-next-line no-unused-vars
+ const [displayContribs, setDisplayContribs] = useState(true);
+
+ return (
+
+
+
+
+
Contributions by Month
+
+ {displayContribs ? 'By Contribution Count' : 'By LOC Changed'}
+
+
+ {!downloadLoading && (
+
+ setDisplayContribs(!displayContribs)}
+ >
+ Toggle
+
+
+ )}
+
d.contribs}
+ legendText="Contributions"
+ />
+ ) : (
+ d.formatted_loc_changed.split(' ')[0]}
+ legendText="LOC Changed"
+ />
+ )}
+
+
+ );
+};
+
+BarMonth.propTypes = {
+ data: PropTypes.object.isRequired,
+ downloadLoading: PropTypes.bool.isRequired,
+};
+
+const BarDay = ({ data, downloadLoading }) => {
+ const newData = data?.day_data?.days || [];
+
+ const [displayContribs, setDisplayContribs] = useState(true);
+
+ return (
+
+
+
+
+
Contributions by Day
+
+ {displayContribs ? 'By Contribution Count' : 'By LOC Changed'}
+
+
+ {!downloadLoading && (
+
+ setDisplayContribs(!displayContribs)}
+ >
+ Toggle
+
+
+ )}
+
d.contribs}
+ legendText="Contributions"
+ />
+ ) : (
+ d.formatted_loc_changed.split(' ')[0]}
+ legendText="LOC Changed"
+ />
+ )}
+
+
+ );
+};
+
+BarDay.propTypes = {
+ data: PropTypes.object.isRequired,
+ downloadLoading: PropTypes.bool.isRequired,
+};
+
+export { BarMonth, BarDay };
diff --git a/frontend/frontend/src/components/Wrapped/Specifics/Calendar.js b/frontend/frontend/src/components/Wrapped/Specifics/Calendar.js
new file mode 100644
index 00000000..babe1874
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Specifics/Calendar.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ResponsiveCalendar } from '@nivo/calendar';
+
+import { Input } from '../../Generic';
+import { theme, scale } from '../Templates/theme';
+import { WrappedCard } from '../Organization';
+
+const Calendar = ({
+ data,
+ startDate,
+ endDate,
+ highlightDays,
+ highlightColors,
+ downloadLoading,
+}) => {
+ const newData = data?.calendar_data?.days || [];
+
+ const valueOptions = [
+ { value: 'contribs', label: 'Contributions', disabled: false },
+ { value: 'commits', label: 'Commits', disabled: false },
+ { value: 'issues', label: 'Issues', disabled: false },
+ { value: 'prs', label: 'Pull Requests', disabled: false },
+ { value: 'reviews', label: 'Reviews', disabled: false },
+ ];
+
+ const [value, setValue] = React.useState(valueOptions[0]);
+
+ const numEvents = Array.isArray(newData)
+ ? newData.reduce((acc, x) => acc + x[value.value], 0)
+ : 0;
+
+ let c = 0;
+ const max = Math.max(...newData.map((x) => x[value.value]));
+ const quantiles = [
+ Math.floor(max * 0.25),
+ Math.floor(max * 0.5),
+ Math.floor(max * 0.75),
+ max,
+ ];
+
+ const colorScaleFn = (x) => {
+ const count = (c % 365) + 1;
+ c += 1;
+
+ const myColorScale = highlightDays.includes(count)
+ ? highlightColors
+ : scale;
+
+ if (x === 0) {
+ return myColorScale[0];
+ }
+ if (x <= quantiles[0]) {
+ return myColorScale[1];
+ }
+ if (x <= quantiles[1]) {
+ return myColorScale[2];
+ }
+ if (x <= quantiles[2]) {
+ return myColorScale[3];
+ }
+ return myColorScale[4];
+ };
+
+ return (
+
+
+
+
+ Contribution Calendar
+
+ {!downloadLoading && (
+
+ )}
+
+
{`${numEvents} ${value.label}`}
+ {Array.isArray(newData) && newData.length > 0 ? (
+
({
+ day: item.day,
+ value: item[value.value],
+ }))}
+ from={startDate}
+ to={endDate}
+ emptyColor="#EBEDF0"
+ colors={['#9BE9A8', '#40C463', '#30A14E', '#216E39']}
+ margin={{ top: 10, right: 0, bottom: 0, left: 0 }}
+ monthBorderColor="#ffffff"
+ dayBorderWidth={2}
+ dayBorderColor="#ffffff"
+ colorScale={colorScaleFn}
+ />
+ ) : (
+
+ No data to show
+
+ )}
+
+
+ );
+};
+
+Calendar.propTypes = {
+ data: PropTypes.object.isRequired,
+ startDate: PropTypes.string.isRequired,
+ endDate: PropTypes.string.isRequired,
+ highlightDays: PropTypes.arrayOf(PropTypes.number),
+ highlightColors: PropTypes.arrayOf(PropTypes.string).isRequired,
+ downloadLoading: PropTypes.bool.isRequired,
+};
+
+Calendar.defaultProps = {
+ highlightDays: [],
+};
+
+export default Calendar;
diff --git a/frontend/frontend/src/components/Wrapped/Specifics/Numeric.js b/frontend/frontend/src/components/Wrapped/Specifics/Numeric.js
new file mode 100644
index 00000000..f7cb30b9
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Specifics/Numeric.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { WrappedCard } from '../Organization';
+
+const numericPropTypes = {
+ num: PropTypes.any,
+ label: PropTypes.string.isRequired,
+};
+
+const numericDefaultProps = {
+ num: 'N/A',
+};
+
+const NumericPlusLOC = ({ num, label }) => {
+ return (
+
+ {`+${num}`}
+ {label}
+
+ );
+};
+
+NumericPlusLOC.propTypes = numericPropTypes;
+NumericPlusLOC.defaultProps = numericDefaultProps;
+
+const NumericMinusLOC = ({ num, label }) => {
+ return (
+
+ {`-${num}`}
+ {label}
+
+ );
+};
+
+NumericMinusLOC.propTypes = numericPropTypes;
+NumericMinusLOC.defaultProps = numericDefaultProps;
+
+const NumericBothLOC = ({ num1, num2, label }) => {
+ return (
+
+
+
+ {num1}
+
+
/
+
+ {num2}
+
+
{label}
+
+ );
+};
+
+NumericBothLOC.propTypes = {
+ num1: PropTypes.any,
+ num2: PropTypes.any,
+ label: PropTypes.string.isRequired,
+};
+
+NumericBothLOC.defaultProps = {
+ num1: 'N/A',
+ num2: 'N/A',
+};
+
+const NumericBestDay = ({
+ num,
+ date,
+ label,
+ className,
+ onMouseOver,
+ onMouseOut,
+}) => {
+ return (
+
+
+
+ {num} Contributions
+
+
+ on {date}
+
+
{label}
+
+ );
+};
+
+NumericBestDay.propTypes = {
+ num: PropTypes.number.isRequired,
+ date: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ onMouseOver: PropTypes.func,
+ onMouseOut: PropTypes.func,
+};
+
+NumericBestDay.defaultProps = {
+ className: '',
+ onMouseOver: () => {},
+ onMouseOut: () => {},
+};
+
+export { NumericPlusLOC, NumericMinusLOC, NumericBothLOC, NumericBestDay };
diff --git a/frontend/frontend/src/components/Wrapped/Specifics/Pie.js b/frontend/frontend/src/components/Wrapped/Specifics/Pie.js
new file mode 100644
index 00000000..cd727abb
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Specifics/Pie.js
@@ -0,0 +1,98 @@
+/* eslint-disable react/jsx-curly-newline */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { PieChart } from '../Templates';
+import { WrappedCard } from '../Organization';
+
+const PieLangs = ({ data, downloadLoading }) => {
+ const [useLOCAdded, setUseLOCAdded] = React.useState(false);
+
+ const metric = useLOCAdded ? 'added' : 'changed';
+ const newData = data?.lang_data?.[`langs_${metric}`] || [];
+
+ return (
+
+
+
+
+
Most Used Languages
+
{useLOCAdded ? 'By LOC Added' : 'By LOC Changed'}
+
+ {!downloadLoading && (
+
+ setUseLOCAdded(!useLOCAdded)}
+ >
+ Toggle
+
+
+ )}
+
e.data.label}
+ getFormattedValue={(e) => e.formatted_value}
+ colors={{ datum: 'data.color' }}
+ />
+
+
+ );
+};
+
+PieLangs.propTypes = {
+ data: PropTypes.object.isRequired,
+ downloadLoading: PropTypes.bool.isRequired,
+};
+
+const PieRepos = ({ data, downloadLoading }) => {
+ const [useLOCAdded, setUseLOCAdded] = React.useState(false);
+
+ const metric = useLOCAdded ? 'added' : 'changed';
+ const newData = data?.repo_data?.[`repos_${metric}`] || [];
+
+ return (
+
+
+
+
+
Most Active Repositories
+
{useLOCAdded ? 'By LOC Added' : 'By LOC Changed'}
+
+ {!downloadLoading && (
+
+ setUseLOCAdded(!useLOCAdded)}
+ >
+ Toggle
+
+
+ )}
+
{
+ if (label && label.includes('/')) {
+ return label.split('/')[1].replace('repository', 'private');
+ }
+ return label;
+ }}
+ getFormattedValue={(e) => e.formatted_value}
+ colors={{ scheme: 'category10' }}
+ />
+
+
+ );
+};
+
+PieRepos.propTypes = {
+ data: PropTypes.object.isRequired,
+ downloadLoading: PropTypes.bool.isRequired,
+};
+
+export { PieLangs, PieRepos };
diff --git a/frontend/frontend/src/components/Wrapped/Specifics/Radar.js b/frontend/frontend/src/components/Wrapped/Specifics/Radar.js
new file mode 100644
index 00000000..5181bdbb
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Specifics/Radar.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ResponsiveRadar } from '@nivo/radar';
+
+import { WrappedCard } from '../Organization';
+
+// eslint-disable-next-line no-unused-vars
+const Radar = ({ data }) => {
+ const commits = data?.numeric_data?.contribs?.commits || 0;
+ const issues = data?.numeric_data?.contribs?.issues || 0;
+ const prs = data?.numeric_data?.contribs?.prs || 0;
+ const reviews = data?.numeric_data?.contribs?.reviews || 0;
+
+ const tempData = [
+ {
+ name: 'Commits',
+ count: Math.log(1 + commits),
+ },
+ {
+ name: 'Issues',
+ count: Math.log(1 + issues),
+ },
+ {
+ name: 'Pull Requests',
+ count: Math.log(1 + prs),
+ },
+ {
+ name: 'Reviews',
+ count: Math.log(1 + reviews),
+ },
+ ];
+
+ return (
+
+
+ Contributions by Type
+ Log Scale
+ Math.round(Math.exp(d) - 1)}
+ margin={{ top: 30, right: 50, bottom: 30, left: 60 }}
+ dotSize={10}
+ colors={{ scheme: 'category10' }}
+ blendMode="multiply"
+ motionConfig="wobbly"
+ />
+
+
+ );
+};
+
+Radar.propTypes = {
+ data: PropTypes.object.isRequired,
+};
+
+export default Radar;
diff --git a/frontend/frontend/src/components/Wrapped/Specifics/Swarm.js b/frontend/frontend/src/components/Wrapped/Specifics/Swarm.js
new file mode 100644
index 00000000..8979419c
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Specifics/Swarm.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { SwarmPlot } from '../Templates';
+
+const formatYAxis = (value) => {
+ if (value === 3600 * 12) {
+ return 'Noon';
+ }
+ if (value === 3600 * 24) {
+ return 'Midnight';
+ }
+ let hours = Math.floor(value / 3600);
+ const suffix = hours % 24 >= 12 ? 'PM' : 'AM';
+ hours = hours % 12 === 0 ? 12 : hours % 12;
+ const minutes = String(Math.floor((value % 3600) / 60 / 10) * 10);
+ const displayHour = String(hours).padStart(2, '0');
+ const displayMinute = String(minutes).padStart(2, '0');
+ return `${displayHour}:${displayMinute} ${suffix}`;
+};
+
+const SwarmDay = ({ data }) => {
+ let newData = data?.timestamp_data?.contribs || [];
+ newData = newData.map((d, i) => {
+ return {
+ ...d,
+ groupById: 0,
+ id: i,
+ };
+ });
+
+ return (
+
''}
+ formatYAxis={formatYAxis}
+ />
+ );
+};
+
+SwarmDay.propTypes = {
+ data: PropTypes.object.isRequired,
+};
+
+export { SwarmDay };
diff --git a/frontend/frontend/src/components/Wrapped/Specifics/index.js b/frontend/frontend/src/components/Wrapped/Specifics/index.js
new file mode 100644
index 00000000..ce3a2a99
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Specifics/index.js
@@ -0,0 +1,7 @@
+import Calendar from './Calendar';
+
+export * from './Bar';
+export * from './Numeric';
+export * from './Pie';
+export * from './Swarm';
+export { Calendar };
diff --git a/frontend/frontend/src/components/Wrapped/Templates/Bar.js b/frontend/frontend/src/components/Wrapped/Templates/Bar.js
new file mode 100644
index 00000000..0f0abb1e
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Templates/Bar.js
@@ -0,0 +1,80 @@
+/* eslint-disable react/jsx-curly-newline */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ResponsiveBar } from '@nivo/bar';
+
+import { theme } from './theme';
+
+const BarGraph = ({ data, labels, xTitle, type, getLabel, legendText }) => {
+ const maxData = Math.max(...data.map((d) => d[type]));
+ const minData = Math.min(
+ ...data.filter((d) => d.index < 11).map((d) => d[type]),
+ );
+
+ const getColor = (d) => {
+ // eslint-disable-next-line no-nested-ternary
+ return d.value === maxData
+ ? '#2BA02C'
+ : d.value === minData
+ ? '#D62728'
+ : '#468CBF';
+ };
+
+ if (!(Array.isArray(data) && data.length > 0)) {
+ return (
+
+ No data to show
+
+ );
+ }
+
+ return (
+ labels[value],
+ }}
+ axisLeft={{
+ tickSize: 5,
+ tickPadding: 5,
+ tickRotation: 0,
+ legend: legendText,
+ legendPosition: 'middle',
+ legendOffset: -60,
+ }}
+ label={(d) => getLabel(d.data)}
+ labelSkipWidth={12}
+ labelSkipHeight={12}
+ labelTextColor="#fff"
+ tooltip={() => null}
+ />
+ );
+};
+
+BarGraph.propTypes = {
+ data: PropTypes.array.isRequired,
+ labels: PropTypes.array.isRequired,
+ xTitle: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ getLabel: PropTypes.func.isRequired,
+ legendText: PropTypes.string.isRequired,
+};
+
+export default BarGraph;
diff --git a/frontend/frontend/src/components/Wrapped/Templates/Numeric.js b/frontend/frontend/src/components/Wrapped/Templates/Numeric.js
new file mode 100644
index 00000000..0ac5a504
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Templates/Numeric.js
@@ -0,0 +1,104 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ResponsivePie } from '@nivo/pie';
+
+import { WrappedCard } from '../Organization';
+
+const Numeric = ({ num, label }) => {
+ return (
+
+
+ {num || 'N/A'}
+
+ {label}
+
+ );
+};
+
+Numeric.propTypes = {
+ num: PropTypes.any,
+ label: PropTypes.string.isRequired,
+};
+
+Numeric.defaultProps = {
+ num: 'N/A',
+};
+
+const NumericOutOf = ({
+ num,
+ outOf,
+ format,
+ label,
+ color,
+ className,
+ onMouseOver,
+ onMouseOut,
+}) => {
+ // eslint-disable-next-line react/prop-types
+ const CenteredMetric = ({ dataWithArc, centerX, centerY }) => {
+ let total = 0;
+ // eslint-disable-next-line react/prop-types
+ dataWithArc.forEach((datum) => {
+ total += datum.id === '1' ? datum.value : 0;
+ });
+
+ return (
+
+ {format(total)}
+
+ );
+ };
+ return (
+
+
+ null}
+ />
+
+ {label}
+
+ );
+};
+
+NumericOutOf.propTypes = {
+ num: PropTypes.number.isRequired,
+ outOf: PropTypes.number.isRequired,
+ format: PropTypes.func,
+ label: PropTypes.string.isRequired,
+ color: PropTypes.string,
+ className: PropTypes.string,
+ onMouseOver: PropTypes.func,
+ onMouseOut: PropTypes.func,
+};
+
+NumericOutOf.defaultProps = {
+ format: (x) => x,
+ color: '#30A14E',
+ className: '',
+ onMouseOver: () => {},
+ onMouseOut: () => {},
+};
+
+export { Numeric, NumericOutOf };
diff --git a/frontend/frontend/src/components/Wrapped/Templates/Pie.js b/frontend/frontend/src/components/Wrapped/Templates/Pie.js
new file mode 100644
index 00000000..b6d89193
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Templates/Pie.js
@@ -0,0 +1,68 @@
+/* eslint-disable react/jsx-curly-newline */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ResponsivePie } from '@nivo/pie';
+
+import { theme } from './theme';
+
+const PieChart = ({ data, getArcLinkLabel, getFormattedValue, colors }) => {
+ if (!(Array.isArray(data) && data.length > 0)) {
+ return (
+
+ No data to show
+
+ );
+ }
+ return (
+ getArcLinkLabel(e)}
+ arcLinkLabelsSkipAngle={45}
+ arcLinkLabelsTextOffset={0}
+ arcLinkLabelsTextColor={{ from: 'color' }}
+ arcLinkLabelsDiagonalLength={5}
+ arcLinkLabelsStraightLength={5}
+ arcLinkLabelsThickness={0}
+ // Arc Label Settings
+ arcLabel={(e) => getFormattedValue(e.data)}
+ arcLabelsSkipAngle={45}
+ arcLabelsTextColor="#fff"
+ // Tooltip
+ tooltip={({ datum }) => (
+
+ {datum.label}
+ {`: ${getFormattedValue(datum.data)}`}
+
+ )}
+ colors={colors}
+ />
+ );
+};
+
+PieChart.propTypes = {
+ data: PropTypes.array.isRequired,
+ getArcLinkLabel: PropTypes.func.isRequired,
+ getFormattedValue: PropTypes.func.isRequired,
+ colors: PropTypes.any.isRequired,
+};
+
+export default PieChart;
diff --git a/frontend/frontend/src/components/Wrapped/Templates/Swarm.js b/frontend/frontend/src/components/Wrapped/Templates/Swarm.js
new file mode 100644
index 00000000..7ce57318
--- /dev/null
+++ b/frontend/frontend/src/components/Wrapped/Templates/Swarm.js
@@ -0,0 +1,94 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-curly-newline */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ResponsiveSwarmPlot } from '@nivo/swarmplot';
+
+import { theme } from './theme';
+import { WrappedCard } from '../Organization';
+
+const MemoizedResponsiveSwarmPlot = React.memo(
+ ResponsiveSwarmPlot,
+ (prevProps, nextProps) => prevProps.data?.length === nextProps.data?.length,
+);
+
+const SwarmPlot = ({
+ header,
+ data,
+ groupBy,
+ groups,
+ legend,
+ formatXAxis,
+ formatYAxis,
+}) => {
+ const tickValues = [0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => 10800 * i);
+
+ return (
+
+
+ {header}
+ {`${data.length} Sampled Contributions, Eastern Time`}
+ {Array.isArray(data) && data.length > 0 ? (
+ formatXAxis(value),
+ }}
+ axisLeft={{
+ orient: 'left',
+ tickSize: 10,
+ tickPadding: 5,
+ tickRotation: 0,
+ legend: 'Time of Day',
+ legendPosition: 'middle',
+ legendOffset: -86,
+ tickValues,
+ format: (value) => formatYAxis(value),
+ }}
+ />
+ ) : (
+
+ No data to show
+
+ )}
+
+
+ ,
+ );
+} else if (MODE === 'wrapped') {
+ root.render(
+
+ ,
+ );
+} else {
+ // Throw an error if the mode is not set correctly.
+ throw new Error(
+ 'REACT_APP_MODE must be set to "trends" or "wrapped" in your .env file.',
+ );
+}
diff --git a/frontend/frontend/src/pages/App/AppTrends.js b/frontend/frontend/src/pages/App/AppTrends.js
new file mode 100644
index 00000000..0c8ebc5e
--- /dev/null
+++ b/frontend/frontend/src/pages/App/AppTrends.js
@@ -0,0 +1,109 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import {
+ BrowserRouter as Router,
+ Routes,
+ Route,
+ useParams,
+} from 'react-router-dom';
+
+import Header from './Header';
+import LandingScreen from '../Landing';
+import DemoScreen from '../Demo';
+import { SignUpScreen } from '../Auth';
+import HomeScreen from '../Home';
+import SettingsScreen from '../Settings';
+import { NoMatchScreen, RedirectScreen } from '../Misc';
+
+import { setPrivateAccess as _setPrivateAccess } from '../../redux/actions/userActions';
+import { getUserMetadata } from '../../api';
+import { WRAPPED_URL } from '../../constants';
+import Footer from './Footer';
+
+function WrappedAuthRedirectScreen() {
+ // for wrapped auth redirects
+ const { rest } = useParams();
+ useEffect(() => {
+ const code = new URLSearchParams(window.location.search).get('code');
+ window.location.href = `${WRAPPED_URL}/${rest}?code=${code}`;
+ }, [rest]);
+
+ return null;
+}
+
+function WrappedRedirectScreen() {
+ // redirects /wrapped/* to https://www.githubwrapped.com/*
+ const { userId, year } = useParams();
+ useEffect(() => {
+ if (userId) {
+ if (year) {
+ window.location.href = `${WRAPPED_URL}/${userId}/${year}`;
+ } else {
+ window.location.href = `${WRAPPED_URL}/${userId}`;
+ }
+ } else {
+ window.location.href = `${WRAPPED_URL}/`;
+ }
+ }, [userId, year]);
+}
+
+function App() {
+ const userId = useSelector((state) => state.user.userId);
+ const isAuthenticated = userId && userId.length > 0;
+
+ const dispatch = useDispatch();
+ const setPrivateAccess = (access) => dispatch(_setPrivateAccess(access));
+
+ useEffect(() => {
+ async function getPrivateAccess() {
+ if (userId && userId.length > 0) {
+ const result = await getUserMetadata(userId);
+ if (result !== null && result.private_access !== undefined) {
+ setPrivateAccess(result.private_access);
+ }
+ }
+ }
+ getPrivateAccess();
+ }, [userId]);
+
+ return (
+
+
+
+
+
+ {!isAuthenticated && (
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/frontend/frontend/src/pages/App/AppWrapped.js b/frontend/frontend/src/pages/App/AppWrapped.js
new file mode 100644
index 00000000..3d483d63
--- /dev/null
+++ b/frontend/frontend/src/pages/App/AppWrapped.js
@@ -0,0 +1,59 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+
+import Header from './Header';
+import { SignUpScreen } from '../Auth';
+import { SelectUserScreen, WrappedScreen } from '../Wrapped';
+import { NoMatchScreen } from '../Misc';
+
+import { setPrivateAccess as _setPrivateAccess } from '../../redux/actions/userActions';
+import { getUserMetadata } from '../../api';
+import Footer from './Footer';
+
+function App() {
+ const userId = useSelector((state) => state.user.userId);
+ const isAuthenticated = userId && userId.length > 0;
+
+ const dispatch = useDispatch();
+ const setPrivateAccess = (access) => dispatch(_setPrivateAccess(access));
+
+ useEffect(() => {
+ async function getPrivateAccess() {
+ if (userId && userId.length > 0) {
+ const result = await getUserMetadata(userId);
+ if (result !== null && result.private_access !== undefined) {
+ setPrivateAccess(result.private_access);
+ }
+ }
+ }
+ getPrivateAccess();
+ }, [userId]);
+
+ return (
+
+
+
+
+
+ {!isAuthenticated && (
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/frontend/frontend/src/pages/App/Footer.js b/frontend/frontend/src/pages/App/Footer.js
new file mode 100644
index 00000000..219bbd95
--- /dev/null
+++ b/frontend/frontend/src/pages/App/Footer.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { CURR_YEAR } from '../../constants';
+
+function Footer() {
+ return (
+
+
+
+
+ {`© ${CURR_YEAR} GitHub Trends`}
+
+
+
+ );
+}
+
+export default Footer;
diff --git a/frontend/frontend/src/pages/App/Header.js b/frontend/frontend/src/pages/App/Header.js
new file mode 100644
index 00000000..96486dcb
--- /dev/null
+++ b/frontend/frontend/src/pages/App/Header.js
@@ -0,0 +1,204 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Link } from 'react-router-dom';
+
+import { GiHamburgerMenu as HamburgerIcon } from 'react-icons/gi';
+import { MdSettings as SettingsIcon } from 'react-icons/md';
+
+import { logout as _logout } from '../../redux/actions/userActions';
+import rocketIcon from '../../assets/rocket.png';
+import { classnames } from '../../utils';
+import { GITHUB_PUBLIC_AUTH_URL, WRAPPED_URL } from '../../constants';
+
+const propTypes = {
+ to: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired,
+ onClick: PropTypes.func,
+ className: PropTypes.string,
+};
+
+const defaultProps = {
+ onClick: null,
+ className: null,
+};
+
+const StandardLink = ({ to, children, onClick, className }) => (
+
+
+ {/* GitHub Trends Logo */}
+
+
+ {mode === 'trends' && (
+
GitHub Trends
+ )}
+ {mode === 'wrapped' && (
+
GitHub Wrapped
+ )}
+
+ {/* Pages: Wrapped, Dashboard, Demo */}
+ {mode === 'trends' && (
+
+ Dashboard
+ ) : (
+ Demo
+ )}
+
+ )}
+ {/* Auth Pages: Sign Up, Log In, Log Out */}
+
+ {isAuthenticated ? (
+ <>
+ {mode === 'trends' && (
+
+
+
+ )}
+
+ Sign Out
+
+
+ ) : (
+ <>
+
+ Login
+
+
+ Sign Up
+
+
+ )}
+
+ {/* Hamburger Menu */}
+
+ setToggle(!toggle)}
+ >
+
+
+
+ {/* Hamburger Dropdown */}
+
+ {mode === 'trends' && (
+ <>
+
setToggle(false)}>
+ Wrapped
+
+ {isAuthenticated ? (
+
setToggle(false)}>
+ Dashboard
+
+ ) : (
+
setToggle(false)}>
+ Demo
+
+ )}
+
+ )}
+ {isAuthenticated ? (
+ <>
+ {mode === 'trends' && (
+
setToggle(false)}>
+ Settings
+
+ )}
+
{
+ setToggle(false);
+ logout();
+ }}
+ >
+ Sign Out
+
+
+ ) : (
+ <>
+
+ Login
+
+
setToggle(false)}
+ className="block text-sm px-2 my-2 py-2 rounded-sm bg-blue-500 text-white"
+ >
+ Sign Up
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ Sign up for
+
+
+
+
+
+
+
+ GitHub Trends Demo
+
+
+ This is a demo of the GitHub Trends API. Enter your GitHub username
+ to see statistics about your top languages and repositories from the
+ past month.
+
+
+
Enter your GitHub username to get started!
+
+
+ Go
+
+
+ {error ? (
+
+ Error: {error}
+
+ ) : (
+
+ )}
+
+
+ This demo uses a public access token that is heavily rate limited.
+ For full customization, private contributions, and a personal access
+ token, create an account instead!
+
+
+
+
+
+
+
+
+
+
+ {selectedUserName === ''
+ ? 'Enter a Username'
+ : `Example Cards for ${selectedUserName}`}
+
+
+
+
+
+
+ );
+ }
+
+ if (!isAuthenticated) {
+ return (
+
+
+
+ Please sign in to access this page
+
+
+
+
+
+
+
+
+ {
+ [
+ 'Select a Card',
+ 'Modify Card Parameters',
+ 'Choose a Theme',
+ 'Display your Card',
+ ][stage]
+ }
+
+
+ {
+ [
+ 'You will be able to customize your card in future steps.',
+ 'Change the date range, include private commits, and more!',
+ 'Choose from one of our predefined themes (more coming soon!)',
+ 'Display your card on GitHub, Twitter, or Linkedin',
+ ][stage]
+ }
+
+
+ {stage === 0 && (
+
+ )}
+ {stage === 1 && (
+
+ )}
+ {stage === 2 && (
+
+ )}
+ {stage === 3 && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ Copy the image URL or download the PNG. Share on GitHub, Twitter,
+ LinkedIn, or anywhere else!
+
+
+
+ {[
+ { title: 'Copy URL', active: true, onClick: copyUrl },
+ { title: 'Download PNG', active: true, onClick: downloadPNG },
+ ].map((item, index) => (
+
+ {item.title}
+
+ ))}
+
+
+
+
+ {[
+ {
+ title: 'Language Contributions',
+ description: 'See your overall language breakdown',
+ imageSrc: 'langs',
+ },
+ {
+ title: 'Repository Contributions',
+ description: 'See your most contributed repositories',
+ imageSrc: 'repos',
+ },
+ ].map((card, index) => (
+ setSelectedCard(card.imageSrc)}
+ >
+
+ ))}
+
+ );
+};
+
+SelectCardStage.propTypes = {
+ selectedCard: PropTypes.string.isRequired,
+ setSelectedCard: PropTypes.func.isRequired,
+};
+
+export default SelectCardStage;
diff --git a/frontend/frontend/src/pages/Home/stages/Theme.js b/frontend/frontend/src/pages/Home/stages/Theme.js
new file mode 100644
index 00000000..52939cab
--- /dev/null
+++ b/frontend/frontend/src/pages/Home/stages/Theme.js
@@ -0,0 +1,61 @@
+/* eslint-disable react/no-array-index-key */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Card } from '../../../components';
+
+const ThemeStage = ({ theme, setTheme, fullSuffix }) => {
+ return (
+
+ {[
+ {
+ title: 'Classic',
+ imageSrc: 'classic',
+ },
+ {
+ title: 'Dark',
+ imageSrc: 'dark',
+ },
+ {
+ title: 'Bright Lights',
+ imageSrc: 'bright_lights',
+ },
+ {
+ title: 'Rosettes',
+ imageSrc: 'rosettes',
+ },
+ {
+ title: 'Ferns',
+ imageSrc: 'ferns',
+ },
+ {
+ title: 'Synthwaves',
+ imageSrc: 'synthwaves',
+ },
+ ].map((card, index) => (
+ setTheme(card.imageSrc)}
+ >
+
+ ))}
+
+ );
+};
+
+ThemeStage.propTypes = {
+ theme: PropTypes.string.isRequired,
+ setTheme: PropTypes.func.isRequired,
+ fullSuffix: PropTypes.string.isRequired,
+};
+
+export default ThemeStage;
diff --git a/frontend/frontend/src/pages/Home/stages/index.js b/frontend/frontend/src/pages/Home/stages/index.js
new file mode 100644
index 00000000..befa9ba2
--- /dev/null
+++ b/frontend/frontend/src/pages/Home/stages/index.js
@@ -0,0 +1,6 @@
+import SelectCardStage from './SelectCard';
+import CustomizeStage from './Customize';
+import ThemeStage from './Theme';
+import DisplayStage from './Display';
+
+export { SelectCardStage, CustomizeStage, ThemeStage, DisplayStage };
diff --git a/frontend/frontend/src/pages/Landing/Landing.js b/frontend/frontend/src/pages/Landing/Landing.js
new file mode 100644
index 00000000..d2d25050
--- /dev/null
+++ b/frontend/frontend/src/pages/Landing/Landing.js
@@ -0,0 +1,231 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { Link } from 'react-router-dom';
+import { FaGithub as GithubIcon, FaCheck as CheckIcon } from 'react-icons/fa';
+
+import { Button, Preview } from '../../components';
+
+import mockup from '../../assets/mockup.png';
+import wrapped from '../../assets/wrapped1.png';
+import avgupta456Langs from '../../assets/avgupta456_langs.png';
+import tiangoloRepos from '../../assets/tiangolo_repos.png';
+import reininkRepos from '../../assets/reinink_repos.png';
+import dhermesLangs from '../../assets/dhermes_langs.png';
+import { WRAPPED_URL } from '../../constants';
+
+function LandingScreen() {
+ const userId = useSelector((state) => state.user.userId);
+
+ const isAuthenticated = userId && userId.length > 0;
+
+ return (
+
+
+
+
+ Discover and share code contribution insights
+
+
+ GitHub Trends dives deep into the GitHub API to bring you insightful
+ metrics on your contributions, broken by repository and language.
+
+
+
+
+ {isAuthenticated ? 'Visit Dashboard' : 'Get Started'}
+
+
+
+
+ Star on
+
+
+
+
+
+
+
+
+
+
+
+ Display your GitHub stats
+ with embeddable cards
+
+
1. Comprehensive
+
+ GitHub Trends counts each individual commit, across all your
+ open-source contributions. We surface line of code metrics by
+ repository and languages.
+
+
+
2. Customizable
+
+ Using the online dashboard, easily modify the time range, include
+ private commits, and choose your display theme.
+
+
+
3. Shareable
+
+ Share your GitHub Trends cards as a PNG on Twitter, or as a dynamic
+ embeddable image on your GitHub profile or personal website.
+
+
+
+
+ {isAuthenticated ? 'Visit Dashboard' : 'Try the Demo'}
+
+
+ {!isAuthenticated && (
+
+ Get Started
+
+
+ )}
+
+
+
+
+
+ Reflect on your year
+
+ with GitHub Wrapped
+
+
+
1. Detailed
+
+ GitHub Wrapped provides a breakdown of your contributions by date,
+ by date, time, repository, and language. Over 20 stats are
+ displayed.
+
+
+
2. Visual
+
+ Understand your coding contributions like never before with an
+ interactive calendar, bar charts, pie charts, and more.
+
+
+
3. Public
+
+ Share your GitHub Wrapped link with your friends and colleagues and
+ take a look at their contributions too.{' '}
+ No account required , although rate limiting may
+ apply.
+
+
+
+
+ Example
+
+
+
+ Get your Wrapped
+
+
+
+
+
+
+
+
+
+
+
GitHub Trends
+
+ GitHub Trends dives deep into the GitHub API to bring you insightful
+ metrics and visualizations. We access individual commits to compute
+ accurate and granular statistics.
+
+
+ {[
+ {
+ header: 'Measures Contribs',
+ text: 'Calculates your stats on a per-contribution level, allowing for deeper insights',
+ },
+ {
+ header: 'LOC Insights',
+ text: 'See aggregate stats on lines of code (LOC) written across all contributions',
+ },
+ {
+ header: 'Language Breakdowns',
+ text: 'Showcase your favorite languages with LOC language breakdowns',
+ },
+ {
+ header: 'Private Mode',
+ text: 'Use a PAT to avoid rate limiting and include private contributions',
+ },
+ {
+ header: 'Exciting Visualizations',
+ text: 'Visualize your contributions with bar graphs, pie charts, and more',
+ },
+ {
+ header: 'Shareable Stats',
+ text: 'Easily add your cards to your GitHub and share them online',
+ },
+ ].map((item, index) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+
+
+
+
{item.header}
+
{item.text}
+
+
+ ))}
+
+
+
Ready to get started?
+
Create an account today.
+
+
+ Try Demo
+
+
+
+ Sign Up
+
+
+
+
+ );
+}
+
+export default LandingScreen;
diff --git a/frontend/frontend/src/pages/Landing/index.js b/frontend/frontend/src/pages/Landing/index.js
new file mode 100644
index 00000000..b11123d7
--- /dev/null
+++ b/frontend/frontend/src/pages/Landing/index.js
@@ -0,0 +1,3 @@
+import LandingScreen from './Landing';
+
+export default LandingScreen;
diff --git a/frontend/frontend/src/pages/Misc/NoMatch.js b/frontend/frontend/src/pages/Misc/NoMatch.js
new file mode 100644
index 00000000..b5c8126e
--- /dev/null
+++ b/frontend/frontend/src/pages/Misc/NoMatch.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+import { Button } from '../../components';
+
+const NoMatchScreen = () => {
+ return (
+
+
+
404
+
+
+
+ Page not Found
+
+
+ Please check the URL in the address bar and try again.
+
+
+
+
+ Go to Home
+
+
+
+
+
setSelected('accountTier')}
+ >
+ {name}
+
+ );
+};
+
+SectionButton.propTypes = {
+ name: PropTypes.string.isRequired,
+ implemented: PropTypes.bool,
+ isSelected: PropTypes.bool.isRequired,
+ setSelected: PropTypes.func.isRequired,
+};
+
+SectionButton.defaultProps = {
+ implemented: true,
+};
+
+function useOutsideAlerter(ref, action) {
+ useEffect(() => {
+ /**
+ * Alert if clicked on outside of element
+ */
+ function handleClickOutside(event) {
+ if (ref.current && !ref.current.contains(event.target)) {
+ action();
+ }
+ }
+
+ // Bind the event listener
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ // Unbind the event listener on clean up
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [ref]);
+}
+
+const SettingsScreen = () => {
+ const [selected, setSelected] = useState('accountTier');
+ const [deleteModal, setDeleteModal] = useState(false);
+
+ const openDeleteModal = () => {
+ setDeleteModal(true);
+ };
+
+ const closeDeleteModal = () => {
+ setDeleteModal(false);
+ };
+
+ const wrapperRef = useRef(null);
+ useOutsideAlerter(wrapperRef, closeDeleteModal);
+
+ const userId = useSelector((state) => state.user.userId);
+ const isAuthenticated = userId && userId.length > 0;
+ const userKey = useSelector((state) => state.user.userKey);
+ const privateAccess = useSelector((state) => state.user.privateAccess);
+ const accountTier = privateAccess ? 'Private Workflow' : 'Public Workflow';
+
+ const dispatch = useDispatch();
+ const logout = () => dispatch(_logout());
+
+ console.log(isAuthenticated, userId, userKey, privateAccess, accountTier);
+
+ if (!isAuthenticated) {
+ return (
+
+
+
+ Please sign in to access this page
+
+
+
+
+
+
+ Account Settings
+
+
+
setSelected('accountTier')}
+ />
+ setSelected('personalization')}
+ />
+ setSelected('deleteAccount')}
+ />
+
+
+
+ {selected === 'accountTier' && (
+
+
Account Tier
+
+
+
+ Current Tier:
+ {accountTier}
+
+
+ {privateAccess ? (
+
+ You have given GitHub Trends (read and write) access to all
+ public and private code contributions. We use your GitHub
+ API access token to make requests on your behalf. All of our
+ code is open-source and visible on our
+
+ GitHub repository
+
+
+ ) : (
+
+ You have given GitHub Trends read access to your public
+ repositories. Upgrading to the Private Workflow will allow
+ us to better represent your code contributions. We use your
+ GitHub API access token to make requests on your behalf. All
+ of our code is open-source and visible on our
+
+ GitHub repository
+
+
+ )}
+
+ {privateAccess ? (
+
+ Downgrade to Public Access
+
+ ) : (
+
+
+ Upgrade to Private Access
+
+
+ )}
+
+ )}
+ {selected === 'personalization' && (
+
+
Personalization
+
+
+
Coming soon!
+
+ )}
+ {selected === 'deleteAccount' && (
+
+
Delete Account
+
+
+
+ Deleting your account is permanent and cannot be undone. If
+ you are sure you want to delete your account, click the button
+ below to remove your statistics from GitHub Trends. This will
+ redirect you to a GitHub screen where you can revoke your
+ access token.
+
+
+
+ Permenantly Delete Account
+
+
+ )}
+
+
+
+ {deleteModal && (
+
+
+
+
+
Delete Account
+
+
+
+ Are you sure you want to continue? This action cannot be
+ undone.
+
+
+
+ setDeleteModal(false)}
+ >
+ Cancel
+
+ {
+ const success = await deleteAccount(userId, userKey);
+ if (success) {
+ logout();
+ window.location = `https://github.com/settings/connections/applications/${CLIENT_ID}`;
+ }
+ }}
+ >
+ Delete Account
+
+
+
+
+
+
+ )}
+
+
+
+
+ Reflect on your year GitHub Wrapped
+
+
+ Powered by{' '}
+
+ {' '}
+ (not affiliated with GitHub)
+
+
+
+
+
+
+
+ Step 1 : Star the GitHub repository.{' '}
+
+
+
+
+
+
+ Step 2 : Enter your GitHub username!
+
+
+
+ {isLoading ? (
+
+
+ {error ? (
+
+ Error: {error}
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
See some examples
+
+ {[
+ {
+ name: 'Linus Torvalds',
+ username: 'torvalds',
+ url: 'https://avatars.githubusercontent.com/u/1024025?v=4',
+ blurb: 'Creator of Linux',
+ },
+ {
+ name: 'Evan You',
+ username: 'yyx990803',
+ url: 'https://avatars.githubusercontent.com/u/499550?v=4',
+ blurb: 'Creator of Vue',
+ },
+ {
+ name: 'shadcn',
+ username: 'shadcn',
+ url: 'https://avatars.githubusercontent.com/u/124599?v=4',
+ blurb: 'Vercel, shadcn/ui',
+ },
+ {
+ name: 'Sindre Sorhus',
+ username: 'sindresorhus',
+ url: 'https://avatars.githubusercontent.com/u/170270?v=4',
+ blurb: 'Open-sourcer',
+ },
+ ].map((user) => (
+
+
+
+
+
+
+ {user.name}
+
+
{user.blurb}
+
+
+
+
+ ))}
+
+
+
+
+
+
GitHub Trends
+
+ GitHub Trends dives deep into the GitHub API to bring you insightful
+ metrics and visualizations. We access individual commits to compute
+ accurate and granular statistics.
+
+
+ {[
+ {
+ header: 'Measures Contribs',
+ text: 'Calculates your stats on a per-contribution level, allowing for deeper insights',
+ },
+ {
+ header: 'LOC Insights',
+ text: 'See aggregate stats on lines of code (LOC) written across all contributions',
+ },
+ {
+ header: 'Language Breakdowns',
+ text: 'Showcase your favorite languages with LOC language breakdowns',
+ },
+ {
+ header: 'Private Mode',
+ text: 'Use a PAT to avoid rate limiting and include private contributions',
+ },
+ {
+ header: 'Exciting Visualizations',
+ text: 'Visualize your contributions with bar graphs, pie charts, and more',
+ },
+ {
+ header: 'Shareable Stats',
+ text: 'Easily add your cards to your GitHub and share them online',
+ },
+ ].map((item, index) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+
+
+
+
{item.header}
+
{item.text}
+
+
+ ))}
+
+
+
+
+
+
+
+ {!downloadLoading && (
+
+
+
+ )}
+
+ {`${userId}'s`}
+
+
+
CURR_YEAR - i,
+ ).map((x) => ({ value: x, label: x }))}
+ value={{ value: year, label: year }}
+ onChange={(e) => {
+ window.location.href = `/${userId}/${e.value}`;
+ }}
+ />
+ GitHub Wrapped
+
+
+ Private Access:{' '}
+ {userId === currUserId && usePrivate ? 'True' : 'False'}
+ {!(userId === currUserId && usePrivate) && (
+
+
+ )}
+
+ {data?.incomplete && (
+
+ Incomplete Data. Please refresh later to finish loading.
+
+ )}
+
+
+
+
+
+
+
+ {
+ setHighlightDays(
+ Array.from(
+ { length: endStreak - startStreak + 1 },
+ (_, i) => startStreak + i,
+ ),
+ );
+ }}
+ onMouseOut={() => {
+ setHighlightDays([]);
+ }}
+ />
+
+
+
+ setHighlightDays(
+ Array.from(
+ { length: endGap - startGap + 1 },
+ (_, i) => startGap + i,
+ ),
+ )
+ }
+ onMouseOut={() => setHighlightDays([])}
+ />
+
+
+ `${x}%`}
+ label="Weekend Activity"
+ color="#468CBF"
+ className="hover:bg-gray-200 cursor-pointer"
+ onMouseOver={() => {
+ const Sunday = Array.from({ length: 55 }, (_, i) => i).map(
+ (x) =>
+ x * 7 -
+ ((year % 7) + 6) +
+ Math.max(0, Math.floor((2024 - year) / 4)),
+ );
+ const Saturday = Array.from({ length: 55 }, (_, i) => i).map(
+ (x) =>
+ x * 7 -
+ (year % 7) +
+ Math.max(0, Math.floor((2024 - year) / 4)),
+ );
+ setHighlightDays([...Sunday, ...Saturday]);
+ }}
+ onMouseOut={() => setHighlightDays([])}
+ />
+
+
+ {
+ setHighlightColors(singleHoverScale);
+ setHighlightDays([data?.numeric_data?.misc?.best_day_index]);
+ }}
+ onMouseOut={() => {
+ setHighlightColors(hoverScale);
+ setHighlightDays([]);
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {downloadLoading && (
+
+ Create your own at www.githubwrapped.io
+
+ )}
+
+
+
{
+ setDownloadLoading(true);
+ setTimeout(() => {
+ downloadImage();
+ setDownloadLoading(false);
+ }, 10);
+ }}
+ >
+ {downloadLoading ? (
+
+
+ ) : (
+
+ )}
+
+
+
+ {showLoadingErrorMessage ? (
+
+ Something went wrong. Please try again in a couple minutes or raise an
+ issue on{' '}
+
+ GitHub
+
+ . Thank you!
+
+ ) : (
+ <>
+
+ {showLoadingMessage ? (
+
+ {[
+ 'Loading your Data...',
+ 'Crunching Numbers...',
+ 'Analyzing Trends...',
+ 'Drawing Figures...',
+ 'Almost there!',
+ ].map((text, i) => (
+
+
+ ))}
+
+ ) : (
+
+ )}
+
+ )}
+
+ {currMonth < 12 ? (
+ <>
+
Querying the GitHub API by Months
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => getTile(i))}
+
+
+ {Array.from({ length: 3 }).map((_, i) => getTile(i + 3))}
+
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => getTile(i + 6))}
+
+
+ {Array.from({ length: 3 }).map((_, i) => getTile(i + 9))}
+
+
+
+
+ ) : (
+
+ Loading your data is taking longer than expected. Try refreshing the
+ page, and if that fails, raise an issue on{' '}
+
+ GitHub
+
+ . Thank you for your patience!
+
+ )}
+