optimized code

ui/src/api/API.ts

@@ -18,6 +18,8 @@ async function makeRequest(url: string, method = "GET", data = null) {
 		}
 		if (contentType && contentType.includes("application/json")) {
 			return await response.json();
+		} else if (contentType && contentType.includes("application/xml")) {
+			return await response.text();
 		} else {
 			return await response.text();
 		}

ui/src/components/General/ListItems/News/News.tsx

@@ -1,5 +1,5 @@
 import { NewsType } from "./utils/types";
-import { Card, Image, Skeleton, Typography } from "antd";
+import { Card, Image, Skeleton, Space, Typography } from "antd";
 import { ListItemProps } from "components/RenderProps/List/utils/types";
 const { Title } = Typography;
 
@@ -13,9 +13,15 @@ const News: React.FC<ListItemProps<NewsType>> = ({
 	return (
 		<Card onClick={() => handleOnClick(url)} hoverable>
 			<Skeleton loading={isLoading}>
-				<Image preview={false} src={image} alt="" />
-				<Title level={4}>{title}</Title>
-				{content}
+				<Space size={"middle"} align="start">
+					{image && (
+						<Image width={200} preview={false} src={image} alt="" />
+					)}
+					<div>
+						<Title level={4}>{title}</Title>
+						{content}
+					</div>
+				</Space>
 			</Skeleton>
 		</Card>
 	);

ui/src/components/Layouts/Menu/utils/constants.ts

@@ -174,6 +174,12 @@ export const MENU_ITEMS = [
 				icon: "ArrowUpNarrowWide",
 				show: true,
 			},
+			{
+				name: routesById.diffchecker.title,
+				url: routesById.diffchecker.path,
+				icon: "Diff",
+				show: true,
+			},
 		],
 	},
 	{
@@ -187,12 +193,6 @@ export const MENU_ITEMS = [
 				icon: "ArrowLeftRight",
 				show: true,
 			},
-			{
-				name: routesById.textdiff.title,
-				url: routesById.textdiff.path,
-				icon: "Diff",
-				show: true,
-			},
 		],
 	},
 	{

ui/src/pages/Colors/ColorPicker/ColorPicker.module.scss

@@ -1,6 +1,6 @@
 .cp {
 	display: grid;
-	grid-template-columns: 380px 360px 400px 380px;
+	grid-template-columns: 380px 360px 425px 425px;
 	gap: var(--bt-size-16);
 	justify-content: center;
 

ui/src/pages/Colors/ColorPicker/components/DisplayColor/index.tsx

@@ -44,19 +44,24 @@ const DisplayColor: React.FC<DisplayColorProps> = ({
 		color: color ? textColor : colorText,
 	};
 
-	return title === "Colors" ? (
-		<div className={classes} style={containerStyle}>
-			<Title level={5} style={titleStyle}>
-				{customLabel}: {color ? customValue : ""}
-			</Title>
-			<Clipboard text={value} clipboardComponent={ClipboardButton} />
-		</div>
-	) : (
+	return (
 		<div style={containerStyle}>
-			<CodeHighlightWithCopy
-				codeString={`${customLabel}: ${color ? customValue : ""}`}
-				language="css"
-			/>
+			{title === "Colors" ? (
+				<div className={classes} style={{ padding: "11px" }}>
+					<Title level={5} style={titleStyle}>
+						{customLabel}: {color ? customValue : ""}
+					</Title>
+					<Clipboard
+						text={value}
+						clipboardComponent={ClipboardButton}
+					/>
+				</div>
+			) : (
+				<CodeHighlightWithCopy
+					codeString={`${customLabel}: ${color ? customValue : ""}`}
+					language="css"
+				/>
+			)}
 		</div>
 	);
 };

ui/src/pages/Newsfeed/index.tsx

@@ -1,30 +1,16 @@
-import React, { useState } from "react";
-import {
-	QUERY_KEY_NEWS,
-	SITE_OPTIONS,
-	TAB_ITEMS,
-	CORS_PROXY_URL,
-} from "./utils/constants";
-import useFetchList from "lib/utils/hooks/useFetchList";
+import React from "react";
+import { QUERY_KEY_NEWS, TAB_ITEMS } from "./utils/constants";
 import { Tabs } from "antd";
 import ListSearchResults from "components/RenderProps/ListSearchResults";
 import News from "components/General/ListItems/News/News";
-import { parseXML } from "./utils/helper";
+import useNewsFeed from "./utils/hooks";
 
 const Newsfeed: React.FC = () => {
-	const [url, setUrl] = useState(SITE_OPTIONS["frontend-focus"].value);
-	const isFeedUrl =
-		url === SITE_OPTIONS["frontend-focus"].value ||
-		url === SITE_OPTIONS["status-code"].value;
-	const { data, isLoading, isError } = useFetchList(
-		url,
-		isFeedUrl ? CORS_PROXY_URL + url : url
-	);
+	const { data, isLoading, isError, setUrl } = useNewsFeed();
 
 	return (
 		<>
 			<Tabs
-				defaultActiveKey={SITE_OPTIONS["frontend-focus"].value}
 				items={TAB_ITEMS}
 				onChange={(value) => {
 					setUrl(value);
@@ -36,7 +22,7 @@ const Newsfeed: React.FC = () => {
 				isLoading={isLoading}
 				itemComponent={News}
 				resourceName={QUERY_KEY_NEWS}
-				items={isFeedUrl ? parseXML(data) : data?.articles}
+				items={data}
 			/>
 		</>
 	);

ui/src/pages/Newsfeed/utils/constants.ts

@@ -19,16 +19,19 @@ const TAB_ITEMS: TabsProps["items"] = [
 	{
 		key: SITE_OPTIONS["frontend-focus"].value,
 		label: SITE_OPTIONS["frontend-focus"].label,
+		show: true,
 	},
 	{
 		key: SITE_OPTIONS["status-code"].value,
 		label: SITE_OPTIONS["status-code"].label,
+		show: true,
 	},
 	{
 		key: SITE_OPTIONS["news"].value,
 		label: SITE_OPTIONS["news"].label,
+		show: true,
 	},
-];
+].filter((item) => item.show);
 const CORS_PROXY_URL = "https://cors-anywhere.herokuapp.com/";
 
 const QUERY_KEY_NEWS = "news";

ui/src/pages/Newsfeed/utils/hooks.ts

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { parseXML } from "./helper";
+import { CORS_PROXY_URL, SITE_OPTIONS } from "./constants";
+import useFetchList from "lib/utils/hooks/useFetchList";
+
+const useNewsFeed = () => {
+	const [url, setUrl] = useState(SITE_OPTIONS["frontend-focus"].value);
+	const isFeedUrl = url.includes(".xml");
+
+	const { data, isLoading, isError } = useFetchList(
+		url,
+		isFeedUrl && import.meta.env.DEV ? CORS_PROXY_URL + url : url
+	);
+	let items = undefined;
+	if (data) {
+		items = isFeedUrl ? parseXML(data) : data.articles;
+	}
+	return { data: items, isLoading, isError, setUrl };
+};
+
+export default useNewsFeed;

ui/src/pages/Routes/utils/constant.tsx

@@ -32,7 +32,7 @@ import {
 	TableGenerator,
 	TableOfContent,
 	TextEditor,
-	Textdiff,
+	Diffchecker,
 	Tool,
 	TvSeries,
 	UiUx,
@@ -266,11 +266,11 @@ export const routes: Route[] = [
 		component: Mimetype,
 	},
 	{
-		id: "textdiff",
-		path: "/information/textdiff",
-		title: "Text difference",
+		id: "diffchecker",
+		path: "/tools/textdiff",
+		title: "Diffchecker",
 		description: "Find out the difference between text",
-		component: Textdiff,
+		component: Diffchecker,
 	},
 	{
 		id: "/",

ui/src/pages/Routes/utils/types.ts

@@ -31,7 +31,7 @@ type RouteId =
 	| "tableofcontent"
 	| "texteditor"
 	| "mimetype"
-	| "textdiff"
+	| "diffchecker"
 	| "/"
 	| "about"
 	| "feedback"

ui/src/pages/Information/Textdiff/Textdiff.module.scss → ui/src/pages/Tools/Diffchecker/Diffchecker.module.scss

@@ -1,4 +1,4 @@
-.textdiff {
+.diffchecker {
 	&__button {
 		display: flex;
 		justify-content: center;

ui/src/pages/Information/Textdiff/index.tsx → ui/src/pages/Tools/Diffchecker/index.tsx

@@ -4,11 +4,11 @@ import React, { useState } from "react";
 
 import { diffChars, Change } from "diff";
 import { ResponsiveButton } from "components/General/FormComponents";
-import style from "./Textdiff.module.scss";
+import style from "./Diffchecker.module.scss";
 
 const { TextArea } = Input;
 
-const Textdiff: React.FC = () => {
+const Diffchecker: React.FC = () => {
 	const [text1, setText1] = useState("");
 	const [text2, setText2] = useState("");
 	const [differences, setDifferences] = useState<Change[]>([]);
@@ -48,7 +48,7 @@ const Textdiff: React.FC = () => {
 					</Form>
 				</Card>
 			</PageGrid>
-			<div className={style.textdiff__button}>
+			<div className={style.diffchecker__button}>
 				<ResponsiveButton onClick={calculateDiff}>
 					Find Difference
 				</ResponsiveButton>
@@ -79,4 +79,4 @@ const Textdiff: React.FC = () => {
 	);
 };
 
-export default Textdiff;
+export default Diffchecker;

ui/src/pages/pages.ts

@@ -46,7 +46,7 @@ const TableOfContent = lazy(() => import("pages/Markdown/TableOfContent"));
 const TextEditor = lazy(() => import("pages/Text/TextEditor"));
 
 const Mimetype = lazy(() => import("pages/Information/Mimetype"));
-const Textdiff = lazy(() => import("pages/Information/Textdiff"));
+const Diffchecker = lazy(() => import("pages/Tools/Diffchecker"));
 
 export {
 	About,
@@ -85,5 +85,5 @@ export {
 	TvSeries,
 	UiUx,
 	YouTube,
-	Textdiff,
+	Diffchecker,
 };