From f49f8a92f60be74a9fccbc803decffe81f3fa465 Mon Sep 17 00:00:00 2001 From: ap-atul Date: Fri, 31 Mar 2023 15:36:44 +0530 Subject: [PATCH 1/4] added line clamp tailwind plugin --- apps/web/package.json | 1 + apps/web/tailwind.config.cjs | 4 +++- yarn.lock | 9 +++++++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 609ff0f2..90b42231 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -26,6 +26,7 @@ "@headlessui/react": "^1.7.7", "@heroicons/react": "v2", "@reduxjs/toolkit": "^1.9.3", + "@tailwindcss/line-clamp": "^0.4.4", "@tanstack/react-query": "^4.20.4", "@trpc/client": "10.7.0", "@trpc/next": "10.7.0", diff --git a/apps/web/tailwind.config.cjs b/apps/web/tailwind.config.cjs index 54331dc9..8aac588a 100644 --- a/apps/web/tailwind.config.cjs +++ b/apps/web/tailwind.config.cjs @@ -4,5 +4,7 @@ module.exports = { theme: { extend: {}, }, - plugins: [], + plugins: [ + require('@tailwindcss/line-clamp'), + ], }; diff --git a/yarn.lock b/yarn.lock index f59f45dd..decde64e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -510,9 +510,9 @@ tweetnacl "^1.0.3" uint8arrays "^4.0.3" -"@ceramicnetwork/cli@next": +"@ceramicnetwork/cli@2.28.0": version "2.28.0" - resolved "https://registry.npmjs.org/@ceramicnetwork/cli/-/cli-2.28.0.tgz" + resolved "https://registry.yarnpkg.com/@ceramicnetwork/cli/-/cli-2.28.0.tgz#d4cc100dfc1401d22e669603b9ebfa55e8c490b1" integrity sha512-jpjuN+nzhJYGxyvAdnFADu6J2xICM0clGf7agzSmhduUmXV5cNGu5UW0h+7LlW4iiK1ddUWlmYYUh1nzWKulnQ== dependencies: "@awaitjs/express" "^0.9.0" @@ -3340,6 +3340,11 @@ dependencies: defer-to-connect "^2.0.0" +"@tailwindcss/line-clamp@^0.4.4": + version "0.4.4" + resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423" + integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g== + "@tanstack/query-core@4.15.1": version "4.15.1" resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.15.1.tgz#a282f04fe5e612b50019e1cfaf0efabd220e00ce" From edf8623cb588bd6a9b2002c6d30acf1bd8a14534 Mon Sep 17 00:00:00 2001 From: ap-atul Date: Fri, 31 Mar 2023 15:37:17 +0530 Subject: [PATCH 2/4] updated thread card component --- .../src/components/ThreadCard/ThreadCard.tsx | 32 ++++++++++++++++ apps/web/src/components/ThreadCard/index.tsx | 37 +------------------ apps/web/src/components/ThreadCard/types.ts | 12 ++++++ 3 files changed, 45 insertions(+), 36 deletions(-) create mode 100644 apps/web/src/components/ThreadCard/ThreadCard.tsx create mode 100644 apps/web/src/components/ThreadCard/types.ts diff --git a/apps/web/src/components/ThreadCard/ThreadCard.tsx b/apps/web/src/components/ThreadCard/ThreadCard.tsx new file mode 100644 index 00000000..b9800fb2 --- /dev/null +++ b/apps/web/src/components/ThreadCard/ThreadCard.tsx @@ -0,0 +1,32 @@ +import { FlexColumn, FlexRow } from "../Flex"; +import { AvatarCard } from "../AvatarCard"; +import { get } from "lodash"; +import { ThreadCardProps } from "./types"; + +export const ThreadCard = (props: ThreadCardProps) => { + const { id, title, body, createdAt, user } = props.thread; + + return ( +
+ +
{title}
+
{body}
+ + +
•
+
+ {new Date(createdAt).toLocaleDateString("en-gb", { + year: "numeric", + month: "long", + day: "numeric", + })} +
+ + +
+ ); +}; diff --git a/apps/web/src/components/ThreadCard/index.tsx b/apps/web/src/components/ThreadCard/index.tsx index a8b17bd8..07f73587 100644 --- a/apps/web/src/components/ThreadCard/index.tsx +++ b/apps/web/src/components/ThreadCard/index.tsx @@ -1,36 +1 @@ -import Link from "next/link"; -import Image from "next/image"; - -const ThreadCard = ({ thread }) => { - const { id, title, author, createdAt, user } = thread; - - return ( - -
-
-
- -
-
- {user.userPlatforms[0].platformUsername} -
-
{author.id}
-
-
-
{title}
-
-
-
{new Date(createdAt).toLocaleString()}
-
-
- - ); -}; - -export default ThreadCard; +export * from "./ThreadCard"; diff --git a/apps/web/src/components/ThreadCard/types.ts b/apps/web/src/components/ThreadCard/types.ts new file mode 100644 index 00000000..d184c727 --- /dev/null +++ b/apps/web/src/components/ThreadCard/types.ts @@ -0,0 +1,12 @@ +export interface Thread { + id: string; + title: string; + body: string; + createdAt: string; + user: any; +} + +export interface ThreadCardProps { + thread: Thread; + onClick?(): void; +} From c1599dfe4c47a3439bb8c6101d5f8ebf895d5f2e Mon Sep 17 00:00:00 2001 From: ap-atul Date: Fri, 31 Mar 2023 15:37:30 +0530 Subject: [PATCH 3/4] added tests for thread card --- .../components/ThreadCard/ThreadCard.test.tsx | 31 +++++++++++++++++++ apps/web/src/pages/index.tsx | 2 +- 2 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/components/ThreadCard/ThreadCard.test.tsx diff --git a/apps/web/src/components/ThreadCard/ThreadCard.test.tsx b/apps/web/src/components/ThreadCard/ThreadCard.test.tsx new file mode 100644 index 00000000..0901deb8 --- /dev/null +++ b/apps/web/src/components/ThreadCard/ThreadCard.test.tsx @@ -0,0 +1,31 @@ +import { screen, fireEvent, render } from "@testing-library/react"; +import { ThreadCard } from "./ThreadCard"; + +describe("", () => { + const onClick = jest.fn(); + const sampleThread = { + id: "sample-id", + title: "title", + body: "body", + createdAt: new Date().toISOString(), + user: { + userPlatforms: [ + { + platformAvatar: "https://some.com", + platformUsername: "sample-username", + }, + ], + }, + }; + + it("should render the component with no issues", () => { + const result = render(); + expect(result.container).toBeInTheDocument(); + }); + + it("should call onclick prop on card click", () => { + const result = render(); + fireEvent.click(screen.getAllByText("title")[0]); + expect(onClick).toBeCalledTimes(1); + }); +}); diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 3402bf73..839acffe 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -2,7 +2,7 @@ import { type NextPage } from "next"; import { useEffect, useState } from "react"; import { Layout } from "../components/Layout"; import { toast } from "react-toastify"; -import ThreadCard from "../components/ThreadCard"; +import { ThreadCard } from "../components/ThreadCard"; import { useAccount } from "wagmi"; import { trpc } from "../utils/trpc"; import { Modal } from "../components/Modal"; From 9dbbd3a9de4dfd983cee078bb929f3fb26dae7cc Mon Sep 17 00:00:00 2001 From: ap-atul Date: Fri, 31 Mar 2023 15:39:25 +0530 Subject: [PATCH 4/4] fixed imports for thread card --- apps/web/src/pages/[id]/community.tsx | 2 +- apps/web/src/pages/[id]/profile.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/pages/[id]/community.tsx b/apps/web/src/pages/[id]/community.tsx index 59bb3828..4cd127b0 100644 --- a/apps/web/src/pages/[id]/community.tsx +++ b/apps/web/src/pages/[id]/community.tsx @@ -4,7 +4,7 @@ import { Layout } from "../../components/Layout"; import { Back } from "../../components/Button/Back/Back"; import { useEffect, useState } from "react"; import { Tab } from "@headlessui/react"; -import ThreadCard from "../../components/ThreadCard"; +import { ThreadCard } from "../../components/ThreadCard"; import * as utils from "../../utils"; import { FlexColumn, FlexRow } from "../../components/Flex"; import { Search } from "../../components/Search"; diff --git a/apps/web/src/pages/[id]/profile.tsx b/apps/web/src/pages/[id]/profile.tsx index 4efd05c6..82b1a22b 100644 --- a/apps/web/src/pages/[id]/profile.tsx +++ b/apps/web/src/pages/[id]/profile.tsx @@ -6,7 +6,7 @@ import { Layout } from "../../components/Layout"; import { Back } from "../../components/Button/Back/Back"; import { useEffect, useState } from "react"; import { Tab } from "@headlessui/react"; -import ThreadCard from "../../components/ThreadCard"; +import { ThreadCard } from "../../components/ThreadCard"; import * as utils from "../../utils"; import { FlexColumn, FlexRow } from "../../components/Flex"; import { trpc } from "../../utils/trpc";