Skip to content

Commit

Permalink
feat: redesign/home page (#32)
Browse files Browse the repository at this point in the history 
* style: add required svg icons

* add loader styles

* build: add type definitions data

* refactor: add helpers to utils

* style: refactor layout styles

* style: remodel navbar styles

* style: redesign post structure and styles

* feat: add api for fetching folder data

* feat: add inifinite scroll

* fetch data from server side to fix re-rendering issue

* fix: make latest entry all activity section

* remove export key

* fix:revert icon to original

* fix: improve helper function

* style: give navbar a fixed width

* style: make footer width 100% of screen

* style: fix post styles

* style: fix home page and filter styles

* refactor: remove duplicate articles, when there is combined summaries

* refactor: improve sorting algorithm

* fix: remove console.logs

* fix: modify summary algorithm

* refactor: add utils for data cleaning

* style: increase gutter space

* refactor: create utility functions for article sorting

* refactor: remove unused code

* style: header regression fix

* fix: fix header/modal regression

* fix mobile header styles

* chore: update submodule

---------

Co-authored-by: Theophilus <[email protected]>
  • Loading branch information
@IgboPharaoh @Extheoisah
IgboPharaoh and Extheoisah authored Sep 29, 2023
1 parent cdf0735 commit a8c70f3
Show file tree
Hide file tree
Showing 10 changed files with 262 additions and 131 deletions.
2 changes: 1 addition & 1 deletion public/icons/bitcoin-dev_icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
133 changes: 60 additions & 73 deletions src/app/components/client/homepage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
"use client";
import {
BITCOINDEV,
HomepageData,
LIGHTNINGDEV,
MailingListType,
} from "@/helpers/types";
import { BITCOINDEV, HomepageData, HomepageEntryData, LIGHTNINGDEV, MailingListType } from "@/helpers/types";
import { addSpaceAfterPeriods } from "@/helpers/utils";
import Image from "next/image";
import React, { useState } from "react";
import React, { useMemo, useState } from "react";
import Post from "../server/post";
import "../../globals.css";

const Homepage = ({ data }: { data: HomepageData }) => {
const Homepage = ({ data, batch }: { data: HomepageData; batch: Array<HomepageEntryData> }) => {
const [mailingListSelection, setMailingListSelection] = useState<MailingListType | null>(null);

const getSelectionList = (data: HomepageData) => {
Expand All @@ -20,62 +16,53 @@ const Homepage = ({ data }: { data: HomepageData }) => {
};

if (mailingListSelection === BITCOINDEV) {
filteredSelection.recent_posts = data.recent_posts.filter(
(entry) => entry.dev_name === BITCOINDEV
);
filteredSelection.active_posts = data.active_posts.filter(
(entry) => entry.dev_name === BITCOINDEV
);
filteredSelection.recent_posts = data.recent_posts.filter((entry) => entry.dev_name === BITCOINDEV);
filteredSelection.active_posts = data.active_posts.filter((entry) => entry.dev_name === BITCOINDEV);
} else if (mailingListSelection === LIGHTNINGDEV) {
filteredSelection.recent_posts = data.recent_posts.filter(
(entry) => entry.dev_name === LIGHTNINGDEV
);
filteredSelection.active_posts = data.active_posts.filter(
(entry) => entry.dev_name === LIGHTNINGDEV
);
filteredSelection.recent_posts = data.recent_posts.filter((entry) => entry.dev_name === LIGHTNINGDEV);
filteredSelection.active_posts = data.active_posts.filter((entry) => entry.dev_name === LIGHTNINGDEV);
}
return filteredSelection;
};

const homepageData = getSelectionList(data);

const handleMailingListToggle = (name: MailingListType) => {
setMailingListSelection((prev) =>
prev === name ? null : name
);
setMailingListSelection((prev) => (prev === name ? null : name));
};

const memoizedBatches = useMemo(() => {
if (mailingListSelection === BITCOINDEV) {
return batch.filter((batch) => batch.dev_name === BITCOINDEV);
} else if (mailingListSelection === LIGHTNINGDEV) {
return batch.filter((batch) => batch.dev_name === LIGHTNINGDEV);
}
return batch;
}, [mailingListSelection, batch]);

return (
<main className="">
<h1 className="font-inika my-8 md:my-20 text-lg md:text-2xl text-gray-800">
{addSpaceAfterPeriods(data.header_summary)}
</h1>
<div className="my-8">
<MailingListToggle
selectedList={mailingListSelection}
handleToggle={handleMailingListToggle}
/>
<main className=''>
<h1 className='font-inika my-8 md:my-20 text-lg md:text-2xl text-gray-800'>{addSpaceAfterPeriods(data.header_summary)}</h1>
<div className='my-8'>
<MailingListToggle selectedList={mailingListSelection} handleToggle={handleMailingListToggle} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 break-words">
<div className='flex flex-col gap-12 break-words'>
<section>
<h2 className="text-xl md:text-4xl font-semibold">
Active Discussions 🔥
</h2>
<h2 className='text-xl md:text-4xl font-semibold pb-[60px]'>Active Discussions 🔥</h2>
<div>
{homepageData.active_posts.map((entry) => (
<Post key={entry.id} entry={entry} isActivePost={true}/>
<Post key={entry.id} entry={entry} isActivePost={true} />
))}
</div>
</section>
<section>
<h2 className="text-xl md:text-4xl font-semibold">
Recent Posts 🪄
</h2>
<div>
{homepageData.recent_posts.map((entry, idx) => (
<Post key={idx} entry={entry} isActivePost={false}/>
<div className=''>
<h2 className='text-xl md:text-4xl font-semibold pb-[60px]'>All Activity</h2>
<>
{memoizedBatches?.map((entry, idx) => (
<Post key={`${entry.id}_${idx}`} entry={entry} isActivePost={false} />
))}
</div>
</section>
</>
</div>
</div>
</main>
);
Expand All @@ -86,34 +73,34 @@ type ToggleButtonProps = {
handleToggle: (name: MailingListType) => void;
};

const MailingListToggle = ({
selectedList,
handleToggle,
}: ToggleButtonProps) => {
const MailingListToggle = ({ selectedList, handleToggle }: ToggleButtonProps) => {
return (
<div className="flex gap-4">
<button
onClick={() => handleToggle(BITCOINDEV)}
className={`flex gap-2 p-2 ${
selectedList === BITCOINDEV
? "bg-gray-300 text-gray-500"
: "bg-gray-100 text-gray-500"
} items-center rounded-md`}
>
<Image src="/images/btc.svg" alt="" width={16} height={16} />
<p className="text-sm">Bitcoin-dev</p>
</button>
<button
onClick={() => handleToggle(LIGHTNINGDEV)}
className={`flex gap-2 p-2 ${
selectedList === LIGHTNINGDEV
? "bg-gray-300 text-gray-500"
: "bg-gray-100 text-gray-500"
} items-center rounded-md`}
>
<Image src="/images/lightning-dev.svg" alt="" width={16} height={16} />
<p className="text-sm">Lightning-dev</p>
</button>
<div className='flex flex-col gap-3'>
<p className='text-2xl font-semibold leading-normal'>Filter by List</p>
<div className='flex gap-6 items-center'>
<button
onClick={() => handleToggle(BITCOINDEV)}
className={`flex gap-2 p-2 ${
selectedList === BITCOINDEV
? "bg-gray-300 text-gray-500"
: "bg-gray-100 text-gray-500"
} items-center rounded-md`}
>
<Image src='/icons/bitcoin-dev_icon.svg' alt='' width={16} height={16} />
<p className='text-xs text-black font-semibold'>Bitcoin-dev</p>
</button>
<button
onClick={() => handleToggle(LIGHTNINGDEV)}
className={`flex gap-2 p-2 ${
selectedList === LIGHTNINGDEV
? "bg-gray-300 text-gray-500"
: "bg-gray-100 text-gray-500"
} items-center rounded-md`}
>
<Image src='/images/lightning-dev.svg' alt='' width={13.16} height={15.66} />
<p className='text-xs font-semibold text-black'>Lightning-dev</p>
</button>
</div>
</div>
);
};
Expand Down
Loading

0 comments on commit a8c70f3

Please sign in to comment.