Skip to content

Commit

Permalink
feat: Improve about page appearance (#37)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalecream
kalecream authored Aug 15, 2023
1 parent 256b389 commit 2bae5d8
Show file tree
Hide file tree
Showing 5 changed files with 265 additions and 197 deletions.
243 changes: 106 additions & 137 deletions components/about/backlogGraph.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import styled from "@emotion/styled";
import { FC, useEffect, useState } from "react";
import {
BarChart,
Expand All @@ -7,35 +6,12 @@ import {
YAxis,
Tooltip,
CartesianGrid,
Legend
Legend,
} from "recharts";
import { BookContainer, Book } from "./currentReads";
import Books from "@data/books";
import { WindowWidth } from "..";
import { getMonthName } from '@components/home/projectsList';

export const CumulativeBookContainer = styled.div`
margin: 0 auto;
place-items: center;
justify-content: center;
& > * > h3 {
margin-bottom: 1rem;
font-weight: 500;
text-align: center;
}
@media (max-width: 768px) {
margin-top: 2rem;
display: flex;
}
@media (min-width: 768px) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 90%;
}
`;

export interface BooksProps {
title: string;
Expand All @@ -59,56 +35,48 @@ export interface BookData {
month: string;
Started: number;
Finished: number;
Added: number;
}

export const BacklogGraph: FC = () => {
const [Data, setData] = useState<BookData[]>([]);

useEffect(() => {
const bookData: Record<string, { Started: number, Finished: number, Added: number }> = {};
const bookData: Record<string, { Started: number; Finished: number }> = {};
let today = new Date();
let RelativeLastYearAgo = new Date(today.getFullYear() - 1, today.getMonth() + 1, today.getDate());
let RelativeLastYearAgo = new Date(
today.getFullYear() - 1,
today.getMonth() + 1,
today.getDate()
);

Books.forEach((book) => {
let addMonth = null;
let startMonth = null;
let finishMonth = null;

if (book.added && new Date(book.added) > RelativeLastYearAgo) {
addMonth = new Date(book.added).getMonth();
}

if (book.started && new Date(book.started) > RelativeLastYearAgo) {
startMonth = new Date(book.started).getMonth();
if (startMonth = addMonth) {
addMonth = null;
}
}

if (book.finished && new Date(book.finished) > RelativeLastYearAgo) {
finishMonth = new Date(book.finished).getMonth();
if (finishMonth = startMonth) {
if (finishMonth === startMonth) {
startMonth = null;
}
}

if (addMonth !== null) {
bookData[addMonth] = bookData[addMonth] || { Started: 0, Finished: 0, Added: 0 };
bookData[addMonth].Added += 1;
}

if (startMonth !== null) {
bookData[startMonth] = bookData[startMonth] || { Started: 0, Finished: 0, Added: 0 };
bookData[startMonth] = bookData[startMonth] || {
Started: 0,
Finished: 0,
};
bookData[startMonth].Started += 1;

if (addMonth !== null) {
bookData[startMonth].Added -= 1;
}
}

if (finishMonth !== null) {
bookData[finishMonth] = bookData[finishMonth] || { Started: 0, Finished: 0, Added: 0 };
bookData[finishMonth] = bookData[finishMonth] || {
Started: 0,
Finished: 0,
};
bookData[finishMonth].Finished += 1;
if (startMonth !== null) {
bookData[finishMonth].Started -= 1;
Expand All @@ -118,21 +86,26 @@ export const BacklogGraph: FC = () => {

// Prepare for the snowball effect!
const cumulativeData: BookData[] = [];
let cumulative = { Started: 0, Finished: 0, Added: 0 };
let cumulative = { Started: 0, Finished: 0 };

let monthIndex = RelativeLastYearAgo.getMonth();

for (let month = 0; month < 12; month++) {
if (bookData[monthIndex]) {

cumulative = {
Started: bookData[monthIndex]?.Started + cumulative.Started || cumulative.Started,
Finished: bookData[monthIndex]?.Finished + cumulative.Finished || cumulative.Finished,
Added: bookData[monthIndex]?.Added + cumulative.Added || cumulative.Added,
Started:
bookData[monthIndex]?.Started + cumulative.Started ||
cumulative.Started,
Finished:
bookData[monthIndex]?.Finished + cumulative.Finished ||
cumulative.Finished,
};
}
cumulativeData.push({
month: new Date(RelativeLastYearAgo.getFullYear(), RelativeLastYearAgo.getMonth() + month).toLocaleString('default', { month: 'long' }),
month: new Date(
RelativeLastYearAgo.getFullYear(),
RelativeLastYearAgo.getMonth() + month
).toLocaleString("default", { month: "long" }),
...cumulative,
});

Expand All @@ -145,22 +118,21 @@ export const BacklogGraph: FC = () => {
const width = WindowWidth() - 150;

return (
<CumulativeBookContainer>
<BarChart width={width > 1000 ? 950 : width} height={200} data={Data}>
<>
<BarChart width={width > 1000 ? 950 : width} height={350} data={Data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="month" />
<YAxis />
<YAxis domain={[0, 'dataMax + 2']} />
<Tooltip active={false} />
<Bar dataKey="Started" stackId="a" fill="var(--muted)" />
<Bar dataKey="Started" stackId="a" fill="var(--accent)" />
<Bar
dataKey="Finished"
stackId="a"
fill="var(--primary)"
label={<CustomerBarLabel />}
/>
<Bar dataKey="Added" stackId="a" fill="var(--faint)" />
</BarChart>
</CumulativeBookContainer>
</>
);
};

Expand Down Expand Up @@ -188,90 +160,87 @@ const CustomerBarLabel: FC<any> = (props) => {

// TODO: Combine books and add filters through a form.

export const Shelf = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: 0 auto;
`;

export const BookShelf: FC = () => {
const readBooks = Books.filter((book) => book.status === "Read");
const readBooks = Books.filter((book) => book.status === "Read").sort((a, b) => new Date(b.finished).getTime() - new Date(a.finished).getTime());
const wantToReadBooks = Books.filter(
(book) => book.status === "Want to Read"
);
).sort((a, b) => new Date(b.added).getTime() - new Date(a.added).getTime());

return (
<CumulativeBookContainer>
<div style={{ justifyContent: "space-between" }}>
<h3>Next Reads ({wantToReadBooks.length})</h3>
<Shelf>
<>
<details>
<summary><a>{wantToReadBooks.length} Books I'm excited to read next</a></summary>
<div className="bookshelf pancake">
{wantToReadBooks.map((book) => (
<BookContainer
href={`https://www.you.com/search?q=${book.title}+${book.author}`}
target="_blank"
rel="noopener noreferrer"
key={book.title}
>
<Book className="animate__animated animate__slideInUp">
<img
src={book.cover}
alt={book.title}
title={book.summary}
style={{ width: "200px", height: "300px" }}
/>
</Book>
</BookContainer>
// <BookContainer
// href={`https://www.you.com/search?q=${book.title}+${book.author}`}
// target="_blank"
// rel="noopener noreferrer"
// key={book.title}
// >
// <Book className="animate__animated animate__slideInUp">
// <img
// src={book.cover}
// alt={book.title}
// title={book.summary}
// style={{ width: "200px", height: "300px" }}
// />
// </Book>
// </BookContainer>
<p className="book-list pancake-child"> <a href={`https://www.google.com/search?q=${book.title}`}>{book.title}</a> <br/><span>by {book.author}</span> </p>
))}
</Shelf>
<h3>Read ({readBooks.length})</h3>
<Shelf>
</div>
</details>
<details open>
<summary><a className="read-books-title">{readBooks.length} Read Books</a></summary>
<div className="bookshelf pancake">
{readBooks.map((book) => (
<BookContainer
href={`https://www.you.com/search?q=${book.title}+${book.author}`}
target="_blank"
rel="noopener noreferrer"
key={book.title}
>
<Book>
{book.cover ? (
<img
src={book.cover}
alt={book.title}
title={book.summary}
style={{ width: "200px", height: "300px" }}
/>
// <Image
// src={book.cover}
// alt={book.title}
// title={book.summary}
// placeholder="blur"
// blurDataURL={book.cover}
// width={200}
// height={300}
// />
) : (
<div
style={{
width: "200px",
height: "300px",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "1rem",
fontSize: "1.2rem",
color: "var(--muted)",
}}
> {book.title}
</div>
) }
</Book>
</BookContainer>
// <BookContainer
// href={`https://www.you.com/search?q=${book.title}+${book.author}`}
// target="_blank"
// rel="noopener noreferrer"
// key={book.title}
// >
// <Book>
// {book.cover ? (
// <img
// src={book.cover}
// alt={book.title}
// title={book.summary}
// style={{ width: "200px", height: "300px" }}
// />
// ) : (
// // <Image
// // src={book.cover}
// // alt={book.title}
// // title={book.summary}
// // placeholder="blur"
// // blurDataURL={book.cover}
// // width={200}
// // height={300}
// // />
// <div
// style={{
// width: "200px",
// height: "300px",
// display: "flex",
// justifyContent: "center",
// alignItems: "center",
// padding: "1rem",
// fontSize: "1.2rem",
// color: "var(--muted)",
// }}
// >
// {" "}
// {book.title}
// </div>
// )}
// </Book>
// </BookContainer>
<p className="book-list pancake-child"> <a href={`https://www.google.com/search?q=${book.title}`}>{book.title}</a> {book.rating && book.rating >= 4 ? (book.rating >= 5 ? <span style={{color: "red"}}>♥</span> : '♥') : book.rating <= 2.5 && book.rating != 0 ? '×' : ''} <br /><span className="book-author">by {book.author}</span><br /> <span className="book-finished"> {getMonthName(book.finished)} {book.finished.split("-", 1)}</span> </p>
))}
</Shelf>
</div>
</CumulativeBookContainer>
</div>
</details>
</>
);
};
20 changes: 11 additions & 9 deletions components/home/projectsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,7 @@ export const extractCategories = () => {
return Array.from(categoriesSet);
};

const ProjectList: React.FC = () => {
const [activeCategory, setActiveCategory] = useState<string>("All");

const handleTabChange = (category: string) => {
setActiveCategory(category);
};

const getMonthName = (dateString) => {
export const getMonthName = (dateString) => {
const months = [
'January ', 'February ', 'March ', 'April ', 'May ', 'June ',
'July ', 'August ', 'September ' , 'October ' , 'November ', 'December '
Expand All @@ -33,11 +26,20 @@ const ProjectList: React.FC = () => {
} else { return null }
};


const ProjectList: React.FC = () => {
const [activeCategory, setActiveCategory] = useState<string>("All");

const handleTabChange = (category: string) => {
setActiveCategory(category);
};


const categories = extractCategories();

const filteredProjects = activeCategory === 'All'
? [...Projects].sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime())
: Projects.filter((project) => project.category === activeCategory).sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());;
: Projects.filter((project) => project.category === activeCategory).sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime());

return (
<div className={styles["project-wrapper"]}>
Expand Down
Loading

0 comments on commit 2bae5d8

Please sign in to comment.