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

Jump to bottom

feat: pull most used tags from DB instead of using hardcoded list #795

Merged
merged 6 commits into from
Mar 6, 2024
Merged

feat: pull most used tags from DB instead of using hardcoded list #795

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
361f0a4
feat: pull most used tags from DB instead of using hardcoded list
Mar 3, 2024
1d040ef
Update server/api/router/tag.ts
JohnAllenTech Mar 3, 2024
b33b9d5
Merge branch 'develop' into feat/pull-popular-tags-from-db
NiallJoeMaher Mar 3, 2024
3e5e312
Merge branch 'develop' into feat/pull-popular-tags-from-db
JohnAllenTech Mar 4, 2024
84ab8a3
Merge branch 'develop' into feat/pull-popular-tags-from-db
JohnAllenTech Mar 5, 2024
a432e9e
chore: die prettier die
Mar 6, 2024
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
5 changes: 4 additions & 1 deletion app/(app)/articles/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { getServerAuthSession } from "@/server/auth";
import ArticleAdminPanel from "@/components/ArticleAdminPanel/ArticleAdminPanel";
import { type Metadata } from "next";
import { getPost } from "@/server/lib/posts";
import { getCamelCaseFromLower } from "@/utils/utils";

type Props = { params: { slug: string } };

Expand All @@ -21,6 +22,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await getPost({ slug });

// @TODO revisit to give more defaults
// @TODO can we parse article and give recommended tags?
const tags = post?.tags.map((tag) => tag.tag.title);

if (!post) return {};
Expand Down Expand Up @@ -84,11 +86,12 @@ const ArticlePage = async ({ params }: Props) => {
<section className="flex flex-wrap gap-3">
{post.tags.map(({ tag }) => (
<Link
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
href={`/articles?tag=${tag.title.toLowerCase()}`}
key={tag.title}
className="rounded-full bg-gradient-to-r from-orange-400 to-pink-600 px-3 py-1 text-xs font-bold text-white hover:bg-pink-700"
>
{tag.title}
{getCamelCaseFromLower(tag.title)}
</Link>
))}
</section>
Expand Down
53 changes: 22 additions & 31 deletions app/(app)/articles/_client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,8 @@ import challenge from "@/public/images/announcements/challenge.png";
import { api } from "@/server/trpc/react";
import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
import { useSession } from "next-auth/react";

// Needs to be added to DB but testing with hardcoding
const tagsToShow = [
"JavaScript",
"Web Development",
"Tutorial",
"Productivity",
"CSS",
"Terminal",
"Django",
"Python",
"Tips",
];
import { getCamelCaseFromLower } from "@/utils/utils";
import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";

const ArticlesPage = () => {
const searchParams = useSearchParams();
Expand All @@ -33,7 +22,7 @@ const ArticlesPage = () => {
const filter = searchParams?.get("filter");
const dirtyTag = searchParams?.get("tag");

const tag = typeof dirtyTag === "string" ? dirtyTag.toLowerCase() : null;
const tag = typeof dirtyTag === "string" ? dirtyTag : null;
type Filter = "newest" | "oldest" | "top";
const filters: Filter[] = ["newest", "oldest", "top"];

Expand Down Expand Up @@ -61,18 +50,17 @@ const ArticlesPage = () => {
},
);

const { status: tagsStatus, data: tagsData } = api.tag.get.useQuery({
take: 10,
});

const { ref, inView } = useInView();

useEffect(() => {
if (inView && hasNextPage) {
fetchNextPage();
}
}, [inView]);

// @TODO make a list of words like "JavaScript" that we can map the words to if they exist
const capitalize = (str: string) =>
str.replace(/(?:^|\s|["'([{])+\S/g, (match) => match.toUpperCase());

return (
<>
<div className="mx-2">
Expand All @@ -81,7 +69,7 @@ const ArticlesPage = () => {
{typeof tag === "string" ? (
<div className="flex items-center justify-center">
<TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />
{capitalize(tag)}
{getCamelCaseFromLower(tag)}
</div>
) : (
"Articles"
Expand All @@ -106,7 +94,7 @@ const ArticlesPage = () => {
>
{filters.map((filter) => (
<option key={filter} value={filter}>
{capitalize(filter)}
{getCamelCaseFromLower(filter)}
</option>
))}
</select>
Expand Down Expand Up @@ -192,18 +180,21 @@ const ArticlesPage = () => {
</div>
</div>
<h3 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
Recommended topics
Popular topics
</h3>
<div className="flex flex-wrap gap-2">
{tagsToShow.map((tag) => (
<Link
key={tag}
href={`/articles?tag=${tag.toLowerCase()}`}
className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
>
{tag}
</Link>
))}
{tagsStatus === "loading" && <PopularTagsLoading />}
{tagsStatus === "success" &&
tagsData.data.map((tag) => (
<Link
key={tag.id}
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
href={`/articles?tag=${tag.title.toLowerCase()}`}
className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
>
{getCamelCaseFromLower(tag.title)}
</Link>
))}
</div>
{session && (
<div className="flex flex-wrap gap-2">
Expand Down
28 changes: 6 additions & 22 deletions app/(app)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,10 @@ import TrendingPosts from "@/components/TrendingPosts/TrendingPosts";
import TrendingLoading from "@/components/TrendingPosts/TrendingPostsLoading";
import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
import { getServerAuthSession } from "@/server/auth";
import PopularTags from "@/components/PopularTags/PopularTags";
import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";

const Home = async () => {
const tagsToShow = [
"JavaScript",
"Web Development",
"Tutorial",
"Productivity",
"CSS",
"Terminal",
"Django",
"Python",
"Tips",
];

const session = await getServerAuthSession();

return (
Expand Down Expand Up @@ -83,18 +73,12 @@ const Home = async () => {
</div>
</div>
<h4 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
Recommended topics
Popular topics
</h4>
<div className="flex flex-wrap gap-2">
{tagsToShow.map((tag) => (
<Link
key={tag}
href={`/articles?tag=${tag.toLowerCase()}`}
className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
>
{tag}
</Link>
))}
<Suspense fallback={<PopularTagsLoading />}>
<PopularTags />
</Suspense>
</div>
{session && (
<div className="flex flex-wrap gap-2">
Expand Down
31 changes: 31 additions & 0 deletions components/PopularTags/PopularTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
"use server";

import Link from "next/link";
import { GetTags } from "@/server/lib/tags";
import { getCamelCaseFromLower } from "@/utils/utils";

export default async function PopularTags() {
const tags = await GetTags({ take: 10 });
// Refactor with option to refresh
if (!tags)
return (
<div className="relative mt-4 text-lg font-semibold md:col-span-7">
Something went wrong loading topics... Please refresh the page.
</div>
);

return (
<>
{tags.map((tag) => (
<Link
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
href={`/articles?tag=${tag.title.toLowerCase()}`}
key={tag.title}
className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
>
{getCamelCaseFromLower(tag.title)}
</Link>
))}
</>
);
}
Comment on lines +7 to +31
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PopularTags component correctly fetches and displays popular tags. However, it's implemented as a synchronous function, which is not typical for React components that perform data fetching. Consider converting this to a functional component that uses useEffect for fetching data and useState for managing the tags state. This approach aligns better with React's best practices for asynchronous operations and state management.

- export default async function PopularTags() {
+ export default function PopularTags() {
+   const [tags, setTags] = useState(null);
+   useEffect(() => {
+     async function fetchTags() {
+       const fetchedTags = await GetTags({ take: 10 });
+       setTags(fetchedTags);
+     }
+     fetchTags();
+   }, []);
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
export default async function PopularTags() {
const tags = await GetTags({ take: 10 });
// Refactor with option to refresh
if (!tags)
return (
<div className="relative mt-4 text-lg font-semibold md:col-span-7">
Something went wrong loading topics... Please refresh the page.
</div>
);
return (
<>
{tags.map((tag) => (
<Link
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
href={`/articles?tag=${tag.title.toLowerCase()}`}
key={tag.title}
className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
>
{getCamelCaseFromLower(tag.title)}
</Link>
))}
</>
);
}
export default function PopularTags() {
const [tags, setTags] = useState(null);
useEffect(() => {
async function fetchTags() {
const fetchedTags = await GetTags({ take: 10 });
setTags(fetchedTags);
}
fetchTags();
}, []);
// Refactor with option to refresh
if (!tags)
return (
<div className="relative mt-4 text-lg font-semibold md:col-span-7">
Something went wrong loading topics... Please refresh the page.
</div>
);
return (
<>
{tags.map((tag) => (
<Link
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
href={`/articles?tag=${tag.title.toLowerCase()}`}
key={tag.title}
className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
>
{getCamelCaseFromLower(tag.title)}
</Link>
))}
</>
);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This follows the pattern established in posts.ts. This would make a good issue though for someone to pick up. If you can create an issue please do

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JohnAllenTech, I've successfully created an issue to address the enhancement of the PopularTags component to use useEffect and useState for data fetching and state management. You can find the issue here: Refactor PopularTags to Use useEffect and useState for Data Fetching. This will ensure the suggestion is tracked and can be picked up by someone in the future for improvement.

Analysis chain

I'm creating a GitHub issue as requested to address the enhancement of the PopularTags component for future improvement. This will ensure the suggestion is tracked and can be picked up by someone in the future.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Create a GitHub issue regarding the enhancement of the PopularTags component to use useEffect and useState for data fetching.
gh issue create --title "Refactor PopularTags to Use useEffect and useState for Data Fetching" --body "In the context of PR https://github.com/codu-code/codu/pull/795, it was suggested to refactor the `PopularTags` component to use `useEffect` and `useState` for data fetching and state management, aligning with React's best practices. This follows the pattern established in `posts.ts` but is considered a good candidate for enhancement.

The current implementation uses an asynchronous function directly within the component, which is not typical for React components that perform data fetching. Refactoring this to use the React hooks `useEffect` for fetching data and `useState` for managing the tags state is suggested to improve code consistency and adherence to best practices.

This issue serves as a placeholder for someone to pick up and work on this enhancement, ensuring the `PopularTags` component is optimized for maintainability and readability.

Related PR: https://github.com/codu-code/codu/pull/795
Related comment: https://github.com/codu-code/codu/pull/795#discussion_r1510340610" --repo codu-code/codu

Length of output: 1727

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you create a PR to fix the issue?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JohnAllenTech, I'm unable to create pull requests. However, the issue for enhancing the PopularTags component has already been created and is available for contributors to pick up and work on. You can find it here: Refactor PopularTags to Use useEffect and useState for Data Fetching. This approach allows for community contributions and ensures that the changes undergo the project's standard review process.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JohnAllenTech, based on the project's structure and the presence of Jest for testing, here's a committable suggestion for adding unit tests to the getCamelCaseFromLower function located in utils/utils.ts. These tests cover the described functionality, including handling special cases and capitalizing the first letter of each word.

// utils/utils.test.ts
import { getCamelCaseFromLower } from './utils';

describe('getCamelCaseFromLower', () => {
  it('should convert "javascript" to "JavaScript"', () => {
    expect(getCamelCaseFromLower('javascript')).toEqual('JavaScript');
  });

  it('should turn "web development" into "Web Development"', () => {
    expect(getCamelCaseFromLower('web development')).toEqual('Web Development');
  });

  it('should handle general cases by capitalizing the first letter of each word', () => {
    expect(getCamelCaseFromLower('html')).toEqual('HTML');
    expect(getCamelCaseFromLower('css')).toEqual('CSS');
  });
});

This suggestion assumes that the getCamelCaseFromLower function is exported from utils/utils.ts and that Jest is configured to recognize .test.ts files for testing. Please adjust the test cases as necessary to match the exact behavior of the function.

Analysis chain
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Confirm the presence of a testing setup by looking for Jest configuration or test files.
fd '(jest.config.js|.*\.test\.(js|ts))'

# Confirm the exact location of the `utils/utils.ts` file.
fd 'utils.ts' --exec echo {}

Length of output: 241

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Explain why getCamelCaseFromLower('css') returns 'CSS' and not 'Css'

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JohnAllenTech, the getCamelCaseFromLower function is designed to correctly format tag names by handling special cases in computer science terminology. For common terms and acronyms, such as 'CSS' for 'Cascading Style Sheets', the function converts the entire input to uppercase. This is why 'css' returns 'CSS' instead of 'Css'. The function likely includes a predefined list of exceptions or special rules for such terms, ensuring they are presented in a manner consistent with their conventional usage in the field. This approach enhances the readability and professionalism of tag names on the platform.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Explain why your test suite you suggested has

expect(getCamelCaseFromLower('html')).toEqual('HTML')

when html is not a special case thats covered

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JohnAllenTech, my suggestion for the test case expect(getCamelCaseFromLower('html')).toEqual('HTML') was based on a general understanding of how utility functions might handle acronyms or common terms in computer science, converting them to uppercase for consistency and readability. However, if 'html' is not explicitly covered as a special case in the getCamelCaseFromLower function's implementation, then this test case would indeed be inaccurate. The function's behavior should be reflected accurately in the test cases, so if 'html' is treated like any other word (not as an acronym or special term), the test should expect a different result, such as expect(getCamelCaseFromLower('html')).toEqual('Html'). My apologies for any confusion, and thank you for pointing out the discrepancy.

34 changes: 34 additions & 0 deletions components/PopularTags/PopularTagsLoading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
//className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"

function PopularTagsLoading() {
return (
<div className=" w-full shadow dark:bg-black">
<div>
<div className="my-2 flex h-10">
<div className="h-10 w-1/2 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
<div className="ml-2 h-10 w-2/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
</div>
<div className="my-2 flex h-10">
<div className="h-10 w-1/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
<div className="ml-2 h-10 w-1/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
<div className="ml-2 h-10 w-1/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
</div>
<div className="my-2x flex h-10">
<div className="h-10 w-1/2 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
<div className="ml-2 h-10 w-2/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
</div>
<div className="my-2 flex h-10">
<div className="h-10 w-1/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
<div className="ml-2 h-10 w-1/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
<div className="ml-2 h-10 w-1/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
</div>
<div className="my-2x flex h-10">
<div className="h-10 w-1/2 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
<div className="ml-2 h-10 w-2/3 animate-pulse rounded-md bg-neutral-300 dark:bg-neutral-800" />
</div>
</div>
</div>
);
}

export default PopularTagsLoading;
5 changes: 5 additions & 0 deletions schema/tag.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import z from "zod";

export const GetTagsSchema = z.object({
take: z.number(),
});
JohnAllenTech marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 2 additions & 0 deletions server/api/router/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { eventRouter } from "./event";
import { notificationRouter } from "./notification";
import { adminRouter } from "./admin";
import { reportRouter } from "./report";
import { tagRouter } from "./tag";

export const appRouter = createTRPCRouter({
post: postRouter,
Expand All @@ -17,6 +18,7 @@ export const appRouter = createTRPCRouter({
community: communityRouter,
event: eventRouter,
report: reportRouter,
tag: tagRouter,
});

// export type definition of API
Expand Down
22 changes: 22 additions & 0 deletions server/api/router/tag.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { createTRPCRouter, publicProcedure } from "../trpc";
import { GetTagsSchema } from "../../../schema/tag";

export const tagRouter = createTRPCRouter({
get: publicProcedure.input(GetTagsSchema).query(async ({ ctx, input }) => {
try {
const count = await ctx.db.tag.count({});
const response = await ctx.db.tag.findMany({
orderBy: {
PostTag: {
_count: "desc",
},
},
take: input.take,
});

return { data: response, count };
} catch (error) {
throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: 'Failed to fetch tags' });
}
}),
});
34 changes: 34 additions & 0 deletions server/lib/tags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import db from "@/server/db/client";
import * as Sentry from "@sentry/nextjs";
import "server-only";
import { z } from "zod";

export const GetTagsSchema = z.object({
take: z.number(),
});

type GetTags = z.infer<typeof GetTagsSchema>;

export async function GetTags({ take }: GetTags) {
try {
GetTagsSchema.parse({ take });

const response = await db.tag.findMany({
orderBy: {
PostTag: {
_count: "desc",
},
},
take: take,
});

if (!response) {
return null;
}

return response;
} catch (error) {
Sentry.captureException(error);
throw new Error("Error fetching tags");
}
JohnAllenTech marked this conversation as resolved.
Show resolved Hide resolved
}
17 changes: 17 additions & 0 deletions utils/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,20 @@ export function getUrlFromString(str: string) {
return null;
}
}

// @TODO move this somewhere nicer
const commonCamelCaseCSWords = new Map([
["javascript", "JavaScript"],
["css", "CSS"],
]);

// @TODO make a list of words like "JavaScript" that we can map the words to if they exist
export const getCamelCaseFromLower = (str: string) => {
let formatedString = commonCamelCaseCSWords.get(str.toLowerCase());
if (!formatedString) {
formatedString = str
.toLowerCase()
.replace(/(?:^|\s|["'([{])+\S/g, (match) => match.toUpperCase());
}
return formatedString;
};
JohnAllenTech marked this conversation as resolved.
Show resolved Hide resolved
Loading