File size: 2,648 Bytes
c798beb 22aa376 c798beb 22aa376 eda28cd c798beb 22aa376 c798beb 22aa376 c798beb 22aa376 c798beb eda28cd 22aa376 eda28cd 22aa376 c798beb eda28cd c798beb eda28cd c798beb eda28cd c798beb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import React, { useState, useEffect } from "react";
import { GetServerSidePropsContext } from "next";
import { OpenSourceHeatmapProps } from "../../types/heatmap";
import { generateCalendarData } from "../../utils/calendar";
import Heatmap from "../../components/Heatmap";
import { fetchUserData, fetchAuthorData } from "../../utils/authors";
const DEFAULT_COLOR = "#FF9D00";
const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
calendarData,
providers,
}) => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (calendarData && Object.keys(calendarData).length > 0) {
setIsLoading(false);
}
}, [calendarData]);
return (
<div className="w-full max-w-screen-lg mx-auto p-4">
{isLoading ? (
<p className="text-center">Loading...</p>
) : (
<div>
{Object.entries(providers)
.sort(
([keyA], [keyB]) =>
calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
calendarData[keyA].reduce((sum, day) => sum + day.count, 0)
)
.map(([providerName, { color, fullName, avatarUrl }]) => (
<Heatmap
key={providerName}
data={calendarData[providerName]}
color={color}
providerName={providerName}
fullName={fullName ?? providerName}
avatarUrl={avatarUrl ?? ''}
/>
))}
</div>
)}
</div>
);
};
export async function getServerSideProps(context: GetServerSidePropsContext) {
const { author, color } = context.query;
const authorColor = color || DEFAULT_COLOR;
try {
const { fullName, avatarUrl } = await fetchUserData([author as string]);
const providers = {
[author as string]: {
color: authorColor as string,
authors: [author as string],
fullName,
avatarUrl,
},
};
const flatData = await fetchAuthorData(author as string);
const calendarData = generateCalendarData(flatData, [providers[author as string]]);
return {
props: {
calendarData,
color: authorColor,
providers,
},
};
} catch (error) {
console.error("Error fetching data:", error);
return {
props: {
calendarData: {},
color: authorColor,
providers: {
[author as string]: {
color: authorColor as string,
authors: [author as string],
fullName: author,
avatarUrl: null,
},
},
},
};
}
}
export default OpenSourceHeatmap; |