Skip to content
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

feat: add Edit Page button to insight pages #738

Merged
merged 12 commits into from
Jan 3, 2023
Merged

feat: add Edit Page button to insight pages #738

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
45169d5
feat: add Edit Page button to insight pages
nightknighto Dec 25, 2022
bdcafcb
feat: improve mobile view
nightknighto Dec 25, 2022
5ed66f0
feat: only show Edit for owners
nightknighto Dec 26, 2022
b23f0a4
fix: use sub instead of provider_id
nightknighto Dec 28, 2022
2f27f43
refractor: re-order imports
nightknighto Dec 28, 2022
4fee935
feat: add userId to useSupabaseAuth hook
nightknighto Dec 28, 2022
014ac1c
refractor: remove unneeded hard typing
nightknighto Dec 28, 2022
a3cc932
refractor: use userId instead
nightknighto Dec 28, 2022
2aa1c91
fix: revert default to null
nightknighto Dec 29, 2022
5144384
feat: error handling
nightknighto Dec 30, 2022
f3ab274
lint
nightknighto Dec 30, 2022
2174c92
refractor: convert both to string insteadof number
nightknighto Dec 31, 2022
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
49 changes: 30 additions & 19 deletions components/molecules/InsightHeader/insight-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,47 @@

import { FaEdit } from "react-icons/fa";
import Link from "next/link";
import { useRepositoriesList } from "lib/hooks/useRepositoriesList";
import getRepoInsights from "lib/utils/get-repo-insights";
import Button from "components/atoms/Button/button";
import Title from "components/atoms/Typography/title";
import ContextThumbnail from "components/atoms/ContextThumbnail/context-thumbnail";

import getRepoInsights from "lib/utils/get-repo-insights";
import { useRepositoriesList } from "lib/hooks/useRepositoriesList";

import CardRepoList from "../CardRepoList/card-repo-list";

interface InsightHeaderProps {
insight?: DbUserInsight;
repositories?: number[];
insightId: string;
isOwner: boolean;
}

const InsightHeader = ({ insight, repositories }: InsightHeaderProps): JSX.Element => {
const InsightHeader = ({ insight, repositories, insightId, isOwner }: InsightHeaderProps): JSX.Element => {
const { data: repoData } = useRepositoriesList(false, repositories);
const { repoList } = getRepoInsights(repoData);

return (
<>
<div className="header-image mr-2 p-2 min-w-[130px]">
<ContextThumbnail size={120} ContextThumbnailURL={""}></ContextThumbnail>
</div>
<div className="header-info flex flex-col grow justify-center p-2">
<Title level={1} className="!text-3xl font-semibold tracking-tight text-slate-900">
{insight && insight.name || "Insights"}
</Title>
<div className="flex mt-4 items-center relative gap-2">
{insight && insight.repos && insight.repos.length > 0 && <CardRepoList limit={2} repoList={repoList} />}
<div className="flex flex-row justify-between w-full content-center">
<div className="flex flex-col md:flex-row ">
<div className="header-image mr-2 p-2 min-w-[130px]">
<ContextThumbnail size={120} ContextThumbnailURL={""}></ContextThumbnail>
</div>
<div className="header-info flex flex-col grow justify-center p-2">
<Title level={1} className="!text-3xl font-semibold tracking-tight text-slate-900">
{insight && insight.name || "Insights"}
</Title>
<div className="flex mt-4 items-center relative gap-2">
{insight && insight.repos && insight.repos.length > 0 && <CardRepoList limit={2} repoList={repoList} />}
</div>
</div>
</div>
</>
</div>
<div className="py-2">
{
isOwner && <Link href={`/hub/insights/${insightId}/edit`}>
nightknighto marked this conversation as resolved.
Show resolved Hide resolved
<Button type="primary"><FaEdit className="mr-2"/> Edit Page</Button>
</Link>
}
</div>
</div>
);
};

export default InsightHeader;
export default InsightHeader;
6 changes: 4 additions & 2 deletions layouts/hub-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ import InsightHeader from "components/molecules/InsightHeader/insight-header";

import useNav from "lib/hooks/useNav";
import useInsight from "lib/hooks/useInsight";
import useSupabaseAuth from "lib/hooks/useSupabaseAuth";

const HubPageLayout = ({children}: {children: React.ReactNode}) => {
const router = useRouter();
const { user } = useSupabaseAuth();
const { filterName } = router.query;
const insightId = filterName as string;
const { data: insight } = useInsight(insightId);
nightknighto marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -25,7 +27,7 @@ const HubPageLayout = ({children}: {children: React.ReactNode}) => {
<div className="page-container flex min-h-[calc(100vh-(54px+95px))] flex-col items-center">
<div className="info-container min-w-full min-h-[100px]">
<Header>
<InsightHeader insight={insight} repositories={repositories} />
<InsightHeader insight={insight} repositories={repositories} insightId={insightId} isOwner={user?.user_metadata.sub === insight?.user_id} />
nightknighto marked this conversation as resolved.
Show resolved Hide resolved
</Header>

<Nav
Expand All @@ -46,4 +48,4 @@ const HubPageLayout = ({children}: {children: React.ReactNode}) => {
);
};

export default HubPageLayout;
export default HubPageLayout;