feat(snippet): add more filter on public snippets query

apps/core/src/resources/snippets/queries/public-snippets.ts

@@ -1,13 +1,15 @@
 import { QueryResolvers } from '../../../types/graphql';
 
-export const publicSnippets: QueryResolvers['publicSnippets'] = async (_parent, input, context) => {
+export const publicSnippets: QueryResolvers['publicSnippets'] = async (_parent, args, context) => {
  const {
- args: { itemPerPage, nextToken },
- } = input;
+ input: { itemPerPage, keyword, nextToken, sortMethod },
+ } = args;
 
  const result = await context.db.snippet.findPublicSnippet({
  cursor: nextToken,
  itemPerPage: itemPerPage ?? 10,
+ keyword: keyword ?? undefined,
+ sortMethod: sortMethod ?? 'recently_created',
  });
 
  return {

apps/core/src/resources/snippets/schema.graphql.ts

@@ -1,6 +1,11 @@
 import { gql } from 'apollo-server-core';
 
 export default gql`
+ enum SnippetSortMethod {
+ recently_created
+ recently_updated
+ }
+
  type SnippetInfo {
  snippet: Snippet!
  paths: [Folder!]!
@@ -36,9 +41,11 @@ export default gql`
  theme: String!
  }
 
- input PublicSnippetsArgs {
+ input PublicSnippetsInput {
  nextToken: String
  itemPerPage: Int
+ sortMethod: SnippetSortMethod
+ keyword: String
  }
 
  extend type Mutation {
@@ -48,7 +55,7 @@ export default gql`
  }
 
  extend type Query {
- publicSnippets(args: PublicSnippetsArgs!): PublicSnippetsResult!
+ publicSnippets(input: PublicSnippetsInput!): PublicSnippetsResult!
  mySnippets: [Snippet!]!
  findSnippet(snippetId: String!): SnippetInfo!
  }

apps/core/src/types/graphql.d.ts

@@ -127,9 +127,11 @@ export const OauthProvider = {
 } as const;
 
 export type OauthProvider = typeof OauthProvider[keyof typeof OauthProvider];
-export type PublicSnippetsArgs = {
+export type PublicSnippetsInput = {
  itemPerPage?: InputMaybe<Scalars['Int']>;
+ keyword?: InputMaybe<Scalars['String']>;
  nextToken?: InputMaybe<Scalars['String']>;
+ sortMethod?: InputMaybe<SnippetSortMethod>;
 };
 
 export type PublicSnippetsResult = {
@@ -172,7 +174,7 @@ export type QueryListFoldersArgs = {
 };
 
 export type QueryPublicSnippetsArgs = {
- args: PublicSnippetsArgs;
+ input: PublicSnippetsInput;
 };
 
 export type Result = {
@@ -231,6 +233,12 @@ export type SnippetInfo = {
  snippet: Snippet;
 };
 
+export const SnippetSortMethod = {
+ RecentlyCreated: 'recently_created',
+ RecentlyUpdated: 'recently_updated',
+} as const;
+
+export type SnippetSortMethod = typeof SnippetSortMethod[keyof typeof SnippetSortMethod];
 export const SnippetVisibility = {
  Private: 'private',
  Public: 'public',
@@ -351,7 +359,7 @@ export type ResolversTypes = {
  LoginResult: ResolverTypeWrapper<LoginResult>;
  Mutation: ResolverTypeWrapper<{}>;
  OauthProvider: OauthProvider;
- PublicSnippetsArgs: PublicSnippetsArgs;
+ PublicSnippetsInput: PublicSnippetsInput;
  PublicSnippetsResult: ResolverTypeWrapper<
  Omit<PublicSnippetsResult, 'items'> & { items: Array<ResolversTypes['Snippet']> }
  >;
@@ -368,6 +376,7 @@ export type ResolversTypes = {
  snippet: ResolversTypes['Snippet'];
  }
  >;
+ SnippetSortMethod: SnippetSortMethod;
  SnippetVisibility: SnippetVisibility;
  String: ResolverTypeWrapper<Scalars['String']>;
  UpdateFolderInput: UpdateFolderInput;
@@ -391,7 +400,7 @@ export type ResolversParentTypes = {
  Int: Scalars['Int'];
  LoginResult: LoginResult;
  Mutation: {};
- PublicSnippetsArgs: PublicSnippetsArgs;
+ PublicSnippetsInput: PublicSnippetsInput;
  PublicSnippetsResult: Omit<PublicSnippetsResult, 'items'> & { items: Array<ResolversParentTypes['Snippet']> };
  Query: {};
  Result: Result;
@@ -550,7 +559,7 @@ export type QueryResolvers<
  ResolversTypes['PublicSnippetsResult'],
  ParentType,
  ContextType,
- RequireFields<QueryPublicSnippetsArgs, 'args'>
+ RequireFields<QueryPublicSnippetsArgs, 'input'>
  >;
 };
 

apps/web/src/containers/private/browse.tsx

@@ -11,13 +11,15 @@ import { Layout } from '@/components/layout/private/layout';
 import { PublicSnippet } from '@/components/snippets/public-snippet';
 import { usePaginationToken } from '@/hooks/usePaginationToken';
 
+type SortMethod = 'recently_updated' | 'recently_created';
+
 type Props = {
  data: PublicSnippetResult;
 };
 
 const sortOptions: SelectOption[] = [
- { id: 'recently-created', label: 'Sort: recently created' },
- { id: 'recently-updated', label: 'Sort: recently updated' },
+ { id: 'recently_created', label: 'Sort: recently created' },
+ { id: 'recently_updated', label: 'Sort: recently updated' },
 ];
 
 const Browse = ({ data }: Props) => {
@@ -50,10 +52,12 @@ const Browse = ({ data }: Props) => {
  const page = getPage();
 
  await findPublicSnippets({
- itemPerPage: data.itemPerPage,
- nextToken: page?.nextToken,
- // keyword: search,
- // sort: sortOption.id,
+ input: {
+ itemPerPage: data.itemPerPage,
+ keyword: search,
+ nextToken: page?.nextToken,
+ sortMethod: sortOption.id as SortMethod,
+ },
  onCompleted: (data) => {
  console.log('Result Next => ', data);
 
@@ -70,10 +74,12 @@ const Browse = ({ data }: Props) => {
  const page = getPage();
 
  await findPublicSnippets({
- itemPerPage: data.itemPerPage,
- nextToken: page?.previousToken,
- // keyword: search,
- // sort: sortOption.id,
+ input: {
+ itemPerPage: data.itemPerPage,
+ keyword: search,
+ nextToken: page?.nextToken,
+ sortMethod: sortOption.id as SortMethod,
+ },
  onCompleted: (data) => {
  console.log('Result Previous => ', data);
 

apps/web/src/pages/app/browse.tsx

@@ -21,7 +21,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
  try {
  const queryResult = await apolloClient.query({
  query: findPublicSnippetsQuery,
- variables: { args: { itemPerPage: SNIPPET_ITEM_PER_PAGE } },
+ variables: { input: { itemPerPage: SNIPPET_ITEM_PER_PAGE } },
  });
 
  return addApolloState(apolloClient, {

apps/web/tailwind.config.js

@@ -5,7 +5,7 @@ module.exports = {
  "./src/pages/**/*.{js,ts,jsx,tsx}",
  "./src/components/**/*.{js,ts,jsx,tsx}",
  "./src/containers/**/*.{js,ts,jsx,tsx}",
- "../../packages/front/src/**/*.{js,ts,jsx,tsx}",
+ "../../packages/front/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {

packages/domain/src/snippets/snippet.service.ts

@@ -7,6 +7,11 @@ import UpdateSnippetDto from './dtos/update-snippet-dto';
 
 const MAX_ITEM_PER_PAGE = 50;
 
+const sortMethodMap: Record<'recently_updated' | 'recently_created', 'createdAt' | 'updatedAt'> = {
+ recently_created: 'createdAt',
+ recently_updated: 'updatedAt',
+};
+
 export default class SnippetService {
  async create(createSnippetDto: CreateSnippetDto): Promise<Snippet> {
  const isSnippetExist = await this.isSnippetExistInFolder(createSnippetDto.folderId, createSnippetDto.name);
@@ -62,18 +67,21 @@ export default class SnippetService {
  async findPublicSnippet(args: {
  cursor?: string | null;
  itemPerPage: number;
+ keyword?: string;
+ sortMethod?: 'recently_updated' | 'recently_created';
  }): Promise<{ hasMore: boolean; items: Snippet[]; nextCursor: string | null }> {
- const { cursor, itemPerPage } = args;
+ const { cursor, itemPerPage, keyword, sortMethod = 'recently_created' } = args;
 
  const limit = Math.min(MAX_ITEM_PER_PAGE, itemPerPage);
 
  // If the use has 20 we fetch 21 which help to know if there still more in the table
  const limitPlusOne = limit + 1;
 
  const snippets = await dbClient.snippet.findMany({
- orderBy: { createdAt: 'desc' },
+ orderBy: { [sortMethodMap[sortMethod]]: 'desc' },
  take: limitPlusOne,
  where: {
+ content: keyword ? { contains: keyword } : undefined,
  createdAt: cursor
  ? {
  lt: new Date(parseInt(cursor, 10)),

packages/front/codegen.yml

@@ -1,8 +1,8 @@
 overwrite: true
 schema: "http:https://localhost:7501/graphql"
-documents: "src/graphql/**/*.ts"
+documents: "graphql/**/*.ts"
 generates:
- src/graphql/generated.ts:
+ graphql/generated.ts:
  config:
  enumsAsConst: true
  plugins:

packages/front/graphql/generated.ts

@@ -115,9 +115,11 @@ export const OauthProvider = {
 } as const;
 
 export type OauthProvider = typeof OauthProvider[keyof typeof OauthProvider];
-export type PublicSnippetsArgs = {
+export type PublicSnippetsInput = {
  itemPerPage?: InputMaybe<Scalars['Int']>;
+ keyword?: InputMaybe<Scalars['String']>;
  nextToken?: InputMaybe<Scalars['String']>;
+ sortMethod?: InputMaybe<SnippetSortMethod>;
 };
 
 export type PublicSnippetsResult = {
@@ -160,7 +162,7 @@ export type QueryListFoldersArgs = {
 };
 
 export type QueryPublicSnippetsArgs = {
- args: PublicSnippetsArgs;
+ input: PublicSnippetsInput;
 };
 
 export type Result = {
@@ -206,7 +208,6 @@ export type Snippet = {
  language: Scalars['String'];
  lineHighlight?: Maybe<Scalars['String']>;
  name: Scalars['String'];
- shortContent: Scalars['String'];
  size: Scalars['Int'];
  theme: Scalars['String'];
  updatedAt: Scalars['Date'];
@@ -220,6 +221,12 @@ export type SnippetInfo = {
  snippet: Snippet;
 };
 
+export const SnippetSortMethod = {
+ RecentlyCreated: 'recently_created',
+ RecentlyUpdated: 'recently_updated',
+} as const;
+
+export type SnippetSortMethod = typeof SnippetSortMethod[keyof typeof SnippetSortMethod];
 export const SnippetVisibility = {
  Private: 'private',
  Public: 'public',
@@ -370,7 +377,7 @@ export type FindSnippetQuery = {
 };
 
 export type PublicSnippetsQueryVariables = Exact<{
- args: PublicSnippetsArgs;
+ input: PublicSnippetsInput;
 }>;
 
 export type PublicSnippetsQuery = {

packages/front/graphql/snippets/queries/public-snippets.ts

@@ -3,8 +3,8 @@ import { gql, useLazyQuery } from '@apollo/client';
 import { PublicSnippetsQuery, PublicSnippetsQueryVariables } from '../../generated';
 
 export const findPublicSnippetsQuery = gql`
- query publicSnippets($args: PublicSnippetsArgs!) {
- publicSnippets(args: $args) {
+ query publicSnippets($input: PublicSnippetsInput!) {
+ publicSnippets(input: $input) {
  __typename
  hasMore
  itemPerPage

packages/front/services/snippets/public-snippets.ts

@@ -3,8 +3,12 @@ import { useLazyPublicSnippetsQuery } from '../../graphql/snippets/queries/publi
 import { PublicSnippetResult } from '../../typings/queries';
 
 type FindPublicSnippetsArgs = {
- itemPerPage?: number | null;
- nextToken?: string | null;
+ input: {
+ itemPerPage?: number | null;
+ keyword?: string;
+ nextToken?: string | null;
+ sortMethod: 'recently_updated' | 'recently_created';
+ };
  onCompleted: (result?: PublicSnippetResult) => void;
 };
 
@@ -46,9 +50,11 @@ export const usePublicSnippets = () => {
  args.onCompleted(formatPublicSnippetsResult(data));
  },
  variables: {
- args: {
- itemPerPage: args.itemPerPage,
- nextToken: args.nextToken,
+ input: {
+ itemPerPage: args.input.itemPerPage,
+ keyword: args.input.keyword,
+ nextToken: args.input.nextToken,
+ sortMethod: args.input.sortMethod,
  },
  },
  });