From e63119d98a28e975a1c4191e72a2b4e610077170 Mon Sep 17 00:00:00 2001 From: lifeparticle Date: Sat, 7 Oct 2023 18:05:43 +1100 Subject: [PATCH] refactor --- .../RenderProps/ListSearchResults/index.tsx | 7 -- .../ListSearchResults/utils/types.ts | 1 - ui/src/data/featureData.ts | 79 +++++++++++++------ ui/src/pages/About/About.module.scss | 2 +- ui/src/pages/About/components/Features.tsx | 6 +- ui/src/pages/Resource/TvSeries/index.tsx | 1 - 6 files changed, 60 insertions(+), 36 deletions(-) diff --git a/ui/src/components/RenderProps/ListSearchResults/index.tsx b/ui/src/components/RenderProps/ListSearchResults/index.tsx index d724cf82..1766585f 100644 --- a/ui/src/components/RenderProps/ListSearchResults/index.tsx +++ b/ui/src/components/RenderProps/ListSearchResults/index.tsx @@ -6,21 +6,17 @@ import { ListSearchResultsProps } from "./utils/types"; import List from "components/RenderProps/List"; import { API_ERROR, API_NO_DATA } from "data/constants"; import Text from "components/General/Text/Text"; -import { Typography } from "antd"; import { filteredNews, filteredResource } from "./utils/helper"; import { ReactElement } from "react"; import { QUERY_KEY_NEWS } from "pages/Newsfeed/utils/constants"; import useParamsValue from "hooks/useParamsValue"; -const { Title } = Typography; - const ListSearchResults = ({ items, resourceName, itemComponent, isLoading, isError, - source = "", }: ListSearchResultsProps): ReactElement => { const { searchParams, updateParamsValue } = useParamsValue({}); @@ -65,9 +61,6 @@ const ListSearchResults = ({ itemComponent={itemComponent} isLoading={isLoading} /> - window.open(source, "_blank")}> - {source && `Source: ${source}`} - ); }; diff --git a/ui/src/components/RenderProps/ListSearchResults/utils/types.ts b/ui/src/components/RenderProps/ListSearchResults/utils/types.ts index 2b07a429..1ddc57d3 100644 --- a/ui/src/components/RenderProps/ListSearchResults/utils/types.ts +++ b/ui/src/components/RenderProps/ListSearchResults/utils/types.ts @@ -6,7 +6,6 @@ import { interface ListSearchResultsProps extends ListProps { resourceName: string; isError: boolean; - source?: string; } export type { ListSearchResultsProps, ListItemProps }; diff --git a/ui/src/data/featureData.ts b/ui/src/data/featureData.ts index c7101f95..6cc59485 100644 --- a/ui/src/data/featureData.ts +++ b/ui/src/data/featureData.ts @@ -26,7 +26,8 @@ const LIBRARY_URLS: LibraryList = { interface Feature { key: string; name: string; - description: string; + shortDescription: string; + fullDescription: string; link: string; library: { name: string; url: string }[]; } @@ -35,56 +36,71 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.newsfeed.id, name: routesById.newsfeed.title, - description: routesById.newsfeed.description, + shortDescription: routesById.newsfeed.description, + fullDescription: + "Dive into the digital developer universe with our Newsfeed feature at BinaryTree. Get your daily dose of developer news, hot off the press, tailored for you. Whether you are a coding maestro, a tech enthusiast, or a curious learner, stay ahead of the curve with articles, tutorials, and updates that keep you on the cutting edge of the programming landscape. We serve up bite-sized pieces of knowledge that fit your busy schedule. Say goodbye to endless scrolling and hello to targeted, informative content.", link: routesById.newsfeed.path, library: [{ name: "Vanilla JS", url: "" }], }, { key: routesById.colorpicker.id, name: routesById.colorpicker.title, - description: routesById.colorpicker.description, + shortDescription: routesById.colorpicker.description, + fullDescription: + "Searching for the ideal color palette to make your website truly stand out? We've got you covered. Our Color Picker is your trusty palette, offering HEX, RGB, RGBA, HSL, HSLA formats and CSS variables. Time is money, and we know you've got code to conquer. That's why our Color Picker is lightning-fast and incredibly user-friendly. No more tiresome googling for color codes – it's all right here. Unleash your inner artist and paint your code canvas without any hitch.", link: routesById.colorpicker.path, library: [{ name: "tiny-color-2", url: LIBRARY_URLS["tiny-color-2"] }], }, { key: routesById.shadesandtints.id, name: routesById.shadesandtints.title, - description: routesById.shadesandtints.description, + shortDescription: routesById.shadesandtints.description, + fullDescription: + "Need that perfect gradient for your project? Adjust the shade percentage and conjure up color variations – because creativity should never be confined. Our Shades & Tints tool is designed to work as swiftly as your imagination, ensuring you spend less time tinkering with color shades and more time bringing your vision to life. Moreover, we've significantly enhanced your convenience through our Output Separator feature. Now, you can effortlessly obtain separate results using new lines, line commas, line spaces, and commas with strings.", link: routesById.shadesandtints.path, library: [{ name: "values.js", url: LIBRARY_URLS["values.js"] }], }, { key: routesById.borderradius.id, name: routesById.borderradius.title, - description: routesById.borderradius.description, + shortDescription: routesById.borderradius.description, + fullDescription: + "Round or square? Dotted or dashed? Vivid or monochrome? Customize your border styles and add a splash of color to make your website's edges as unique as your imagination. Generate border codes that match your creative vision with ease. It's the ultimate playground for crafting stylish CSS borders that elevate your web creations from mundane to magnificent.", link: routesById.borderradius.path, library: [{ name: "faker.js", url: LIBRARY_URLS["faker-js"] }], }, // { // key: routesById.boxshadow.id, // name: routesById.boxshadow.title, - // description: routesById.boxshadow.description, + // shortDescription: routesById.boxshadow.description, + // fullDescription: "", // link: routesById.boxshadow.path, // library: [{ name: "faker.js", url: LIBRARY_URLS["faker-js"] }], // }, { key: routesById.base64.id, name: routesById.base64.title, - description: routesById.base64.description, + shortDescription: routesById.base64.description, + fullDescription: + "Unlock the power of our Base64 tool, your gateway to effortlessly converting text to Base64 and vice versa. This invaluable resource is your ally in debugging and testing the decoding process, offering a deeper insight into the mechanics of Base64 decryption. It empowers you to decode with ease, discover the process, and enhance your understanding of Base64 decoding. Dive into a world of precision and clarity with this essential utility.", link: routesById.base64.path, library: [{ name: "Vanilla JS", url: "" }], }, { key: routesById.pixelconverter.id, name: routesById.pixelconverter.title, - description: routesById.pixelconverter.description, + shortDescription: routesById.pixelconverter.description, + fullDescription: + "Hasta la vista to tedious calculations. Let BinaryTree do the heavy lifting while you focus on making your design shine. Our Pixel Converter is your trusty companion for pixel-perfect precision that effortlessly transforms pixels into REM units and unveils the secrets of the base font size. So, no more pixel-related headaches – it's all about easy conversions.", link: routesById.pixelconverter.path, library: [{ name: "Vanilla JS", url: "" }], }, { key: routesById.jsontotypescript.id, name: routesById.jsontotypescript.title, - description: routesById.jsontotypescript.description, + shortDescription: routesById.jsontotypescript.description, + fullDescription: + "With our JSON to TypeScript converter, your development journey just got a turbo boost. Whether you're a code warrior on a mission or a developer with a passion for efficiency, our JSON to TypeScript converter is your secret weapon.", link: routesById.jsontotypescript.path, library: [ { @@ -97,7 +113,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.data.id, name: routesById.data.title, - description: routesById.data.description, + shortDescription: routesById.data.description, + fullDescription: "", link: routesById.data.path, library: [ { @@ -113,7 +130,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.image.id, name: routesById.image.title, - description: routesById.image.description, + shortDescription: routesById.image.description, + fullDescription: "", link: routesById.image.path, library: [ { @@ -133,7 +151,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.avatar.id, name: routesById.avatar.title, - description: routesById.avatar.description, + shortDescription: routesById.avatar.description, + fullDescription: "", link: routesById.avatar.path, library: [ { @@ -153,7 +172,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.qrcode.id, name: routesById.qrcode.title, - description: routesById.qrcode.description, + shortDescription: routesById.qrcode.description, + fullDescription: "", link: routesById.qrcode.path, library: [{ name: "Vanilla JS", url: "" }], }, @@ -161,7 +181,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.editor.id, name: routesById.editor.title, - description: routesById.editor.description, + shortDescription: routesById.editor.description, + fullDescription: "", link: routesById.editor.path, library: [ { @@ -173,7 +194,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.table.id, name: routesById.table.title, - description: routesById.table.description, + shortDescription: routesById.table.description, + fullDescription: "", link: routesById.table.path, library: [ { @@ -185,7 +207,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.tableofcontent.id, name: routesById.tableofcontent.title, - description: routesById.tableofcontent.description, + shortDescription: routesById.tableofcontent.description, + fullDescription: "", link: routesById.tableofcontent.path, library: [ { @@ -197,7 +220,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.texteditor.id, name: routesById.texteditor.title, - description: routesById.texteditor.description, + shortDescription: routesById.texteditor.description, + fullDescription: "", link: routesById.texteditor.path, library: [ { @@ -209,7 +233,8 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.diagramming.id, name: routesById.diagramming.title, - description: routesById.diagramming.description, + shortDescription: routesById.diagramming.description, + fullDescription: "", link: routesById.diagramming.path, library: [ { @@ -221,42 +246,48 @@ export const FEATURE_DATA: Feature[] = [ { key: routesById.svgformatter.id, name: routesById.svgformatter.title, - description: routesById.svgformatter.description, + shortDescription: routesById.svgformatter.description, + fullDescription: "", link: routesById.svgformatter.path, library: [{ name: "Vanilla JS", url: "" }], }, { key: routesById.sorting.id, name: routesById.sorting.title, - description: routesById.sorting.description, + shortDescription: routesById.sorting.description, + fullDescription: "", link: routesById.sorting.path, library: [{ name: "Vanilla JS", url: "" }], }, { key: routesById.diffchecker.id, name: routesById.diffchecker.title, - description: routesById.diffchecker.description, + shortDescription: routesById.diffchecker.description, + fullDescription: "", link: routesById.diffchecker.path, library: [{ name: "diff", url: LIBRARY_URLS["diff"] }], }, { key: routesById.mimetype.id, name: routesById.mimetype.title, - description: routesById.mimetype.description, + shortDescription: routesById.mimetype.description, + fullDescription: "", link: routesById.mimetype.path, library: [{ name: "Vanilla JS", url: "" }], }, { key: routesById.npmpackages.id, name: routesById.npmpackages.title, - description: routesById.npmpackages.description, + shortDescription: routesById.npmpackages.description, + fullDescription: "", link: routesById.npmpackages.path, library: [{ name: "Vanilla JS", url: "" }], }, { key: routesById.blog.id, name: "Resource", - description: "List of things", + shortDescription: "List of things", + fullDescription: "", link: routesById.blog.path, library: [{ name: "Vanilla JS", url: "" }], }, diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss index 607b7a66..20af0d9c 100644 --- a/ui/src/pages/About/About.module.scss +++ b/ui/src/pages/About/About.module.scss @@ -25,7 +25,7 @@ rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1) ), - url("./src/assets/About/card_bg.jpg") no-repeat left / cover; + url("src/assets/About/card_bg.jpg") no-repeat left / cover; object-fit: cover; background-color: #9c9c9c98; diff --git a/ui/src/pages/About/components/Features.tsx b/ui/src/pages/About/components/Features.tsx index 7ff1b90b..6d34d961 100644 --- a/ui/src/pages/About/components/Features.tsx +++ b/ui/src/pages/About/components/Features.tsx @@ -1,7 +1,7 @@ import React from "react"; import { List, Carousel, Card, Space } from "antd"; import { Tag } from "antd"; -import { FEATURE_DATA } from "../../../data/featureData"; +import { FEATURE_DATA } from "data/featureData"; import { openLink } from "utils/helper-functions/string"; const Features: React.FC = () => { @@ -44,7 +44,9 @@ const Features: React.FC = () => { , ]} > - {feature.description} + {feature.fullDescription.length > 0 + ? feature.fullDescription + : feature.shortDescription}

diff --git a/ui/src/pages/Resource/TvSeries/index.tsx b/ui/src/pages/Resource/TvSeries/index.tsx index 1195b133..50c434aa 100644 --- a/ui/src/pages/Resource/TvSeries/index.tsx +++ b/ui/src/pages/Resource/TvSeries/index.tsx @@ -13,7 +13,6 @@ const TvSeries: React.FC = () => { itemComponent={Resource} isLoading={isLoading} isError={isError} - source="https://github.com/k4m4/movies-for-hackers" /> ); };