Skip to content

Commit c5dc46c

Browse files
anmolsinghbhatiaanmolsinghbhatia
committed
chore: code refactor
1 parent 4e55492 commit c5dc46c

File tree

6 files changed

+88
-67
lines changed

6 files changed

+88
-67
lines changed

‎web/core/components/global/product-updates/content-item.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react";
2+
import { Megaphone } from "lucide-react";
3+
// types
4+
import { ChangelogDoc } from "@plane/types";
5+
// components
6+
import { RichTextNode } from "./jsxConverter";
7+
8+
type TContentItemProps = {
9+
contentItem: ChangelogDoc;
10+
};
11+
12+
export const ContentItem = (props: TContentItemProps) => {
13+
const { contentItem } = props;
14+
15+
if (!contentItem.published) return null;
16+
17+
return (
18+
<div key={contentItem.id} className="relative mb-20 scroll-mt-[50px] lg:scroll-mt-[64px]">
19+
<div className="flex items-center gap-2 py-2 sticky top-0 z-10 bg-custom-background-100">
20+
<span className="size-8 rounded-full border flex items-center justify-center">
21+
<Megaphone className="size-6" />
22+
</span>
23+
<span className="text-neutral-text-primary text-xl font-bold">{contentItem.title}</span>
24+
</div>
25+
<RichTextNode id={Number(contentItem.id)} description={contentItem.description} />
26+
</div>
27+
);
28+
};

‎web/core/components/global/product-updates/error.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useTranslation } from "@plane/i18n";
2+
3+
export const ChangeLogError = () => {
4+
const { t } = useTranslation();
5+
return (
6+
<div className="flex flex-col items-center justify-center w-full h-full mb-8">
7+
<div className="text-lg font-medium">{t("we_are_having_trouble_fetching_the_updates")}</div>
8+
<div className="text-sm text-custom-text-200">
9+
{t("please_visit")}
10+
<a
11+
href="https://go.plane.so/p-changelog"
12+
target="_blank"
13+
className="text-sm text-custom-primary-100 font-medium hover:text-custom-primary-200 underline underline-offset-1 outline-none"
14+
>
15+
{t("our_changelogs")}
16+
</a>{" "}
17+
{t("for_the_latest_updates")}.
18+
</div>
19+
</div>
20+
);
21+
};

‎web/core/components/global/product-updates/loader.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import { LogoSpinner } from "@/components/common";
3+
4+
export const ChangeLogLoader = () => (
5+
<div className="flex justify-center items-center h-full">
6+
<LogoSpinner />
7+
</div>
8+
);

‎web/core/components/global/product-updates/modal.tsx

Lines changed: 4 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import { FC } from "react";
22
import { observer } from "mobx-react-lite";
33
import useSWR from "swr";
4-
import { Megaphone } from "lucide-react";
54
// plane imports
65
import { ChangelogConfig } from "@plane/constants";
7-
import { useTranslation } from "@plane/i18n";
86
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
97
// components
10-
import { LogoSpinner } from "@/components/common";
118
import { ProductUpdatesFooter } from "@/components/global";
129
// plane web components
1310
import { ProductUpdatesHeader } from "@/plane-web/components/global";
1411
// services
1512
import { ChangelogService } from "@/services/changelog.service";
1613
// local components
17-
import { RichTextNode } from "./jsxConverter";
14+
import { ChangeLogError } from "./error";
15+
import { ChangeLogLoader } from "./loader";
16+
import { ChangeLogContentRoot } from "./root";
1817

1918
export type ProductUpdatesModalProps = {
2019
isOpen: boolean;
@@ -25,7 +24,6 @@ const changelogService = new ChangelogService();
2524

2625
export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props) => {
2726
const { isOpen, handleClose } = props;
28-
const { t } = useTranslation();
2927

3028
// useSWR
3129
const { data, isLoading, error } = useSWR(isOpen ? `CHANGE_LOG` : null, () =>
@@ -36,54 +34,7 @@ export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props
3634
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXXXL}>
3735
<ProductUpdatesHeader />
3836
<div className="flex flex-col h-[60vh] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5">
39-
{isLoading ? (
40-
<div className="flex justify-center items-center h-full">
41-
<LogoSpinner />
42-
</div>
43-
) : error ? (
44-
<>
45-
<div className="flex flex-col items-center justify-center w-full h-full mb-8">
46-
<div className="text-lg font-medium">{t("we_are_having_trouble_fetching_the_updates")}</div>
47-
<div className="text-sm text-custom-text-200">
48-
{t("please_visit")}
49-
<a
50-
href="https://go.plane.so/p-changelog"
51-
target="_blank"
52-
className="text-sm text-custom-primary-100 font-medium hover:text-custom-primary-200 underline underline-offset-1 outline-none"
53-
>
54-
{t("our_changelogs")}
55-
</a>{" "}
56-
{t("for_the_latest_updates")}.
57-
</div>
58-
</div>
59-
</>
60-
) : (
61-
<>
62-
{data && data?.docs?.length > 0 ? (
63-
<div className="relative h-full mx-auto px-4 container">
64-
<div>
65-
{data.docs.map((contentItem) => {
66-
if (!contentItem.published) return null;
67-
68-
return (
69-
<div key={contentItem.id} className="relative mb-20 scroll-mt-[50px] lg:scroll-mt-[64px]">
70-
<div className="flex items-center gap-2 py-2 sticky top-0 z-10 bg-custom-background-100">
71-
<span className="size-8 rounded-full border flex items-center justify-center">
72-
<Megaphone className="size-6" />
73-
</span>
74-
<span className="text-neutral-text-primary text-xl font-bold">{contentItem.title}</span>
75-
</div>
76-
<RichTextNode id={Number(contentItem.id)} description={contentItem.description} />
77-
</div>
78-
);
79-
})}
80-
</div>
81-
</div>
82-
) : (
83-
<div className="text-center container my-[30vh]">No data available</div>
84-
)}
85-
</>
86-
)}
37+
{isLoading ? <ChangeLogLoader /> : error ? <ChangeLogError /> : <ChangeLogContentRoot data={data} />}
8738
</div>
8839
<ProductUpdatesFooter />
8940
</ModalCore>

‎web/core/components/global/product-updates/root.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
import { ChangelogPaginationData } from "@plane/types";
3+
import { ContentItem } from "./content-item";
4+
5+
type ChangeLogContentRootProps = {
6+
data: ChangelogPaginationData | undefined;
7+
};
8+
9+
export const ChangeLogContentRoot = (props: ChangeLogContentRootProps) => {
10+
const { data } = props;
11+
12+
if (!data || data?.docs?.length <= 0) return <div className="text-center container my-[30vh]">No data available</div>;
13+
14+
return (
15+
<div className="relative h-full mx-auto px-4 container">
16+
{data.docs.map((contentItem) => (
17+
<ContentItem key={contentItem.id} contentItem={contentItem} />
18+
))}
19+
</div>
20+
);
21+
};

‎web/core/services/changelog.service.ts

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,18 @@ export class ChangelogService extends APIService {
88
}
99

1010
async fetchChangelog(config: TChangeLogConfig): Promise<ChangelogPaginationData> {
11-
const defaultDoc: ChangelogPaginationData = {
12-
docs: [],
13-
hasNextPage: false,
14-
hasPrevPage: false,
15-
limit: config.limit,
16-
page: config.page,
17-
pagingCounter: 0,
18-
nextPage: null,
19-
prevPage: null,
20-
totalDocs: 0,
21-
totalPages: 0,
22-
};
23-
2411
return this.get(`/api/${config.slug}-releases`, {
2512
params: {
2613
limit: config.limit,
2714
page: config.page,
2815
},
2916
})
30-
.then((response) => response?.data || defaultDoc)
17+
.then((response) => {
18+
if (!response?.data) {
19+
throw new Error("No data received from changelog API");
20+
}
21+
return response.data;
22+
})
3123
.catch((error) => {
3224
console.error("Error fetching changelog:", error);
3325
throw error;

0 commit comments

Comments
 (0)