feat(web): Clickable generic list items #15003
Conversation
|
Warning Rate limit exceeded@kodiakhq[bot] has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 28 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe updates introduce new components and enhancements across various parts of the application. Key changes include the addition of a Changes
Sequence Diagram(s) (Beta)sequenceDiagram
participant User
participant UI
participant Server
participant CMS
User->>UI: Access list item page
UI->>Server: Request list item data
Server->>CMS: Fetch list item data by slug
CMS-->>Server: Return list item data
Server-->>UI: Send list item data
UI-->>User: Display list item with content and slug
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #15003 +/- ##
==========================================
+ Coverage 37.10% 37.12% +0.01%
==========================================
Files 6415 6416 +1
Lines 130634 130611 -23
Branches 37298 37270 -28
==========================================
+ Hits 48469 48485 +16
+ Misses 82165 82126 -39
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 4 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 101 Total Test Services: 0 Failed, 99 Passed Test ServicesThis report shows up to 10 services
🔻 Code Coverage Decreases vs Default Branch (7)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
Outside diff range and nitpick comments (13)
apps/contentful-apps/pages/fields/event-slug-field.tsx (1)
Line range hint
8-87: TheEventSlugFieldcomponent is well-structured with appropriate use of hooks and state management. Consider using template literals for string concatenation to improve readability.- `${slugify(newTitle, { customReplacements: [['ö', 'o']] })}${date ? '-' + slugifyDate(date) : ''}` + `${slugify(newTitle, { customReplacements: [['ö', 'o']] })}${date ? `-${slugifyDate(date)}` : ''}`libs/cms/src/lib/search/importers/genericListItem.service.ts (1)
Line range hint
41-65: ThedoMappingmethod inGenericListItemSyncServiceis robust, but consider specifying a more detailed type thananyfor better type safety.- (entry: Entry<any>): entry is IGenericListItem => + (entry: Entry<IGenericListItemFields>): entry is IGenericListItem =>apps/web/screens/Project/components/ProjectWrapper/ProjectWrapper.tsx (1)
Line range hint
1-1: Optimize imports by using type-only imports where applicable.- import React, { ReactElement, useMemo } from 'react' - import { useRouter } from 'next/router' + import type { ReactElement } from 'react' + import type { useRouter } from 'next/router'Also applies to: 3-14, 14-15
apps/web/components/LanguageToggler/LanguageToggler.tsx (1)
Line range hint
34-35: Use template literals for URL construction to improve readability.- `${linkResolver(type as LinkType, slugs.map((s) => s[otherLanguage]), otherLanguage).href}${queryParamsString.length > 0 ? '?' : ''}${queryParamsString}` + `${linkResolver(type as LinkType, slugs.map((s) => s[otherLanguage]), otherLanguage).href}${queryParamsString.length > 0 ? `?${queryParamsString}` : ''}`apps/web/components/Organization/Slice/SliceMachine.tsx (1)
Line range hint
103-103: Specify a more accurate type thananyfor improved type safety.- content={slice.content as SliceType[]} + content={slice.content as Array<SliceType> | undefined}apps/web/screens/Organization/SubPage.tsx (1)
8-8: Add a brief description forBreadCrumbItem.It would be beneficial to add a brief comment describing the
BreadCrumbItemtype for better code readability and maintenance.apps/web/screens/queries/fragments.ts (1)
Line range hint
855-868: Add missing GraphQL field descriptions for better clarity.It would be beneficial to add descriptions to the GraphQL fields
itemTypeandslugin theGenericListFieldsfragment to clarify their usage and impact within the system.apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx (5)
17-17: Add a brief comment explaining the purpose of importingLinkV2.Adding a comment here would help maintainers understand why
LinkV2is specifically needed in this context, especially if it's being used in a way that differs from standardLinkcomponents.
127-127: Ensure thebackLinkprop is documented in the component's JSDoc.It's good practice to document all props, especially new ones like
backLink, to improve code maintainability and help other developers understand the purpose and usage of the prop quickly.
Line range hint
209-210: Use template literals for string concatenation to improve readability.- activeLocale === 'is' ? organizationPage.organization?.title + ' Forsíða' : organizationPage.organization?.title + ' Frontpage' + `${organizationPage.organization?.title} ${activeLocale === 'is' ? 'Forsíða' : 'Frontpage'}`This change enhances readability by using template literals, which are preferred in JavaScript/TypeScript for concatenating strings.
Also applies to: 488-489
Line range hint
488-489: Avoid using the index of an array as a key in React components.Using array indices as keys in React can lead to rendering issues. It's better to use a unique identifier if available.
- key={'organization-external-link-' + index} + key={link.url}This change ensures that the keys are unique and stable, improving the reliability of re-renders.
Line range hint
526-527: Add missing dependencies to theuseMemohook to ensure it behaves as expected.- const namespace = useMemo(() => JSON.parse(organization?.namespace?.fields ?? '{}'), []) + const namespace = useMemo(() => JSON.parse(organization?.namespace?.fields ?? '{}'), [organization?.namespace?.fields])This fix ensures that the
useMemohook recalculates whenorganization?.namespace?.fieldschanges, adhering to React's rules of hooks.libs/cms/src/lib/generated/contentfulTypes.d.ts (1)
Line range hint
304-304: Several fields across different interfaces are using the typeany. Usinganycan lead to potential type safety issues and should be avoided if possible. Consider specifying more appropriate types or using generics if applicable.- any + specificType // Replace 'specificType' with the actual type you intend to use.Also applies to: 567-567, 582-582, 763-763, 847-847, 850-850, 1014-1014, 1017-1017, 1326-1326, 1394-1394, 1508-1508, 1660-1660, 1759-1761, 1762-1764, 2342-2342, 2510-2510, 2513-2513, 2516-2516, 2815-2815, 3004-3004
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (27)
- apps/contentful-apps/constants/index.ts (1 hunks)
- apps/contentful-apps/pages/fields/event-slug-field.tsx (1 hunks)
- apps/contentful-apps/pages/fields/generic-list-item-slug-field.tsx (1 hunks)
- apps/contentful-apps/utils/index.ts (1 hunks)
- apps/web/components/GenericList/GenericList.tsx (4 hunks)
- apps/web/components/LanguageToggler/LanguageToggler.tsx (1 hunks)
- apps/web/components/Organization/Slice/SliceMachine.tsx (1 hunks)
- apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx (4 hunks)
- apps/web/hooks/useLinkResolver/useLinkResolver.ts (1 hunks)
- apps/web/pages/en/o/[slug]/[subSlug]/[genericListItemSlug]/index.ts (1 hunks)
- apps/web/pages/en/p/[slug]/[subSlug]/[genericListItemSlug]/index.ts (1 hunks)
- apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1 hunks)
- apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1 hunks)
- apps/web/screens/GenericList/GenericListItem.tsx (1 hunks)
- apps/web/screens/Organization/SubPage.tsx (5 hunks)
- apps/web/screens/Project/Project.tsx (5 hunks)
- apps/web/screens/Project/components/ProjectWrapper/ProjectWrapper.tsx (1 hunks)
- apps/web/screens/queries/GenericList.ts (2 hunks)
- apps/web/screens/queries/fragments.ts (2 hunks)
- apps/web/utils/richText.tsx (1 hunks)
- libs/cms/src/lib/cms.elasticsearch.service.ts (2 hunks)
- libs/cms/src/lib/cms.resolver.ts (2 hunks)
- libs/cms/src/lib/dto/getGenericListItemBySlug.input.ts (1 hunks)
- libs/cms/src/lib/generated/contentfulTypes.d.ts (2 hunks)
- libs/cms/src/lib/models/genericList.model.ts (3 hunks)
- libs/cms/src/lib/models/genericListItem.model.ts (1 hunks)
- libs/cms/src/lib/search/importers/genericListItem.service.ts (2 hunks)
Additional context used
Path-based instructions (27)
libs/cms/src/lib/dto/getGenericListItemBySlug.input.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/contentful-apps/constants/index.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/pages/en/o/[slug]/[subSlug]/[genericListItemSlug]/index.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/pages/en/p/[slug]/[subSlug]/[genericListItemSlug]/index.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/queries/GenericList.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
libs/cms/src/lib/models/genericListItem.model.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/cms/src/lib/models/genericList.model.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/contentful-apps/utils/index.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/contentful-apps/pages/fields/event-slug-field.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
libs/cms/src/lib/search/importers/genericListItem.service.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/web/screens/GenericList/GenericListItem.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/contentful-apps/pages/fields/generic-list-item-slug-field.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Project/components/ProjectWrapper/ProjectWrapper.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/components/LanguageToggler/LanguageToggler.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/components/GenericList/GenericList.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/components/Organization/Slice/SliceMachine.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/utils/richText.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/hooks/useLinkResolver/useLinkResolver.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Project/Project.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Organization/SubPage.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/queries/fragments.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
libs/cms/src/lib/cms.elasticsearch.service.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/cms/src/lib/cms.resolver.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
libs/cms/src/lib/generated/contentfulTypes.d.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
Biome
libs/cms/src/lib/models/genericListItem.model.ts
[error] 42-42: Template literals are preferred over string concatenation.
[error] 45-45: Template literals are preferred over string concatenation.
[error] 4-5: All these imports are only used as types.
libs/cms/src/lib/models/genericList.model.ts
[error] 1-2: All these imports are only used as types.
[error] 2-3: All these imports are only used as types.
[error] 4-5: All these imports are only used as types.
[error] 6-7: All these imports are only used as types.
apps/contentful-apps/utils/index.ts
[error] 56-56: Template literals are preferred over string concatenation.
[error] 1-1: All these imports are only used as types.
[error] 1-2: All these imports are only used as types.
apps/contentful-apps/pages/fields/event-slug-field.tsx
[error] 46-46: Template literals are preferred over string concatenation.
[error] 60-60: Template literals are preferred over string concatenation.
[error] 2-3: All these imports are only used as types.
libs/cms/src/lib/search/importers/genericListItem.service.ts
[error] 19-19: Unexpected any. Specify a different type.
[error] 1-1: All these imports are only used as types.
[error] 3-4: All these imports are only used as types.
[error] 4-5: All these imports are only used as types.
[error] 5-6: All these imports are only used as types.
apps/web/screens/GenericList/GenericListItem.tsx
[error] 2-7: All these imports are only used as types.
apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
[error] 6-7: All these imports are only used as types.
apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
[error] 3-4: All these imports are only used as types.
[error] 7-8: All these imports are only used as types.
apps/contentful-apps/pages/fields/generic-list-item-slug-field.tsx
[error] 64-64: Template literals are preferred over string concatenation.
[error] 80-80: Template literals are preferred over string concatenation.
apps/web/screens/Project/components/ProjectWrapper/ProjectWrapper.tsx
[error] 1-1: The default import and some named imports are only used as types.
[error] 3-14: Some named imports are only used as types.
[error] 14-15: All these imports are only used as types.
apps/web/components/LanguageToggler/LanguageToggler.tsx
[error] 34-35: Template literals are preferred over string concatenation.
[error] 63-65: This else clause can be omitted because previous branches break early.
[error] 1-1: Some named imports are only used as types.
[error] 3-10: Some named imports are only used as types.
[error] 11-12: All these imports are only used as types.
[error] 14-19: All these imports are only used as types.
[error] 20-21: Some named imports are only used as types.
[error] 21-22: All these imports are only used as types.
apps/web/components/GenericList/GenericList.tsx
[error] 93-93: Template literals are preferred over string concatenation.
[error] 2-3: All these imports are only used as types.
[error] 16-22: All these imports are only used as types.
[error] 242-247: Provide an explicit type prop for the button element.
apps/web/components/Organization/Slice/SliceMachine.tsx
[error] 103-103: Unexpected any. Specify a different type.
[error] 2-3: Some named imports are only used as types.
[error] 3-10: Some named imports are only used as types.
[error] 16-20: All these imports are only used as types.
apps/web/utils/richText.tsx
[error] 1-8: Some named imports are only used as types.
[error] 13-14: All these imports are only used as types.
[error] 14-49: Some named imports are only used as types.
[error] 49-71: All these imports are only used as types.
apps/web/hooks/useLinkResolver/useLinkResolver.ts
[error] 353-353: Template literals are preferred over string concatenation.
[error] 404-409: This else clause can be omitted because previous branches break early.
[error] 410-415: This else clause can be omitted because previous branches break early.
[error] 3-4: All these imports are only used as types.
apps/web/screens/Project/Project.tsx
[error] 54-54: Unexpected any. Specify a different type.
[error] 399-399: Unexpected any. Specify a different type.
[error] 1-2: All these imports are only used as types.
[error] 5-6: All these imports are only used as types.
[error] 6-13: Some named imports are only used as types.
[error] 25-34: All these imports are only used as types.
[error] 42-43: All these imports are only used as types.
[error] 274-275: Missing key property for this element in iterable.
apps/web/screens/Organization/SubPage.tsx
[error] 3-3: A Node.js builtin module should be imported with the node: protocol.
[error] 1-1: All these imports are only used as types.
[error] 2-3: All these imports are only used as types.
[error] 4-5: All these imports are only used as types.
[error] 5-16: Some named imports are only used as types.
[error] 27-35: All these imports are only used as types.
[error] 44-45: All these imports are only used as types.
[error] 138-138: Missing key property for this element in iterable.
libs/cms/src/lib/cms.elasticsearch.service.ts
[error] 163-163: This variable implicitly has the any type.
[error] 204-204: This variable implicitly has the any type.
[error] 221-221: This variable implicitly has the any type.
[error] 267-267: This variable implicitly has the any type.
[error] 302-304: This else clause can be omitted because previous branches break early.
[error] 496-496: Template literals are preferred over string concatenation.
[error] 568-568: Unexpected any. Specify a different type.
[error] 679-679: Unexpected any. Specify a different type.
[error] 681-718: Prefer for...of instead of forEach.
[error] 683-683: Unexpected any. Specify a different type.
[error] 685-704: Prefer for...of instead of forEach.
[error] 1-9: Some named imports are only used as types.
[error] 9-10: All these imports are only used as types.
[error] 10-11: All these imports are only used as types.
[error] 11-12: All these imports are only used as types.
[error] 12-13: All these imports are only used as types.
[error] 13-14: All these imports are only used as types.
[error] 14-15: All these imports are only used as types.
[error] 15-16: All these imports are only used as types.
[error] 16-17: All these imports are only used as types.
libs/cms/src/lib/cms.resolver.ts
[error] 133-133: Decorators are not valid here.
[error] 145-145: Decorators are not valid here.
[error] 153-153: Decorators are not valid here.
[error] 161-161: Decorators are not valid here.
[error] 169-169: Decorators are not valid here.
[error] 177-177: Decorators are not valid here.
[error] 185-185: Decorators are not valid here.
[error] 196-196: Decorators are not valid here.
[error] 204-204: Decorators are not valid here.
[error] 212-212: Decorators are not valid here.
[error] 220-220: Decorators are not valid here.
[error] 232-232: Decorators are not valid here.
[error] 243-243: Decorators are not valid here.
[error] 254-254: Decorators are not valid here.
[error] 265-265: Decorators are not valid here.
[error] 276-276: Decorators are not valid here.
[error] 288-288: Decorators are not valid here.
[error] 295-295: Decorators are not valid here.
[error] 303-303: Decorators are not valid here.
[error] 311-311: Decorators are not valid here.
apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx
[error] 209-210: Template literals are preferred over string concatenation.
[error] 210-210: Template literals are preferred over string concatenation.
[error] 488-489: Template literals are preferred over string concatenation.
[error] 1-1: The default import and some named imports are only used as types.
[error] 5-24: Some named imports are only used as types.
[error] 25-35: Some named imports are only used as types.
[error] 37-42: All these imports are only used as types.
[error] 48-49: All these imports are only used as types.
[error] 488-489: Avoid using the index of an array as key property in an element.
[error] 526-527: This hook does not specify all of its dependencies: organization?.namespace?.fields
libs/cms/src/lib/generated/contentfulTypes.d.ts
[error] 304-304: Unexpected any. Specify a different type.
[error] 567-567: Unexpected any. Specify a different type.
[error] 582-582: Unexpected any. Specify a different type.
[error] 763-763: Unexpected any. Specify a different type.
[error] 847-847: Unexpected any. Specify a different type.
[error] 850-850: Unexpected any. Specify a different type.
[error] 1014-1014: Unexpected any. Specify a different type.
[error] 1017-1017: Unexpected any. Specify a different type.
[error] 1326-1326: Unexpected any. Specify a different type.
[error] 1394-1394: Unexpected any. Specify a different type.
[error] 1508-1508: Unexpected any. Specify a different type.
[error] 1660-1660: Unexpected any. Specify a different type.
[error] 1759-1761: Unexpected any. Specify a different type.
[error] 1762-1764: Unexpected any. Specify a different type.
[error] 2342-2342: Unexpected any. Specify a different type.
[error] 2510-2510: Unexpected any. Specify a different type.
[error] 2513-2513: Unexpected any. Specify a different type.
[error] 2516-2516: Unexpected any. Specify a different type.
[error] 2815-2815: Unexpected any. Specify a different type.
[error] 3004-3004: Unexpected any. Specify a different type.
Additional comments not posted (25)
libs/cms/src/lib/dto/getGenericListItemBySlug.input.ts (1)
1-14: Well-structured DTO class for fetching generic list items by slug.apps/contentful-apps/constants/index.ts (1)
9-12: Good use ofReadonlyArrayto ensure immutability of the constant.apps/web/pages/en/o/[slug]/[subSlug]/[genericListItemSlug]/index.ts (1)
1-12: Proper setup of server-side props and default export for the route.apps/web/pages/en/p/[slug]/[subSlug]/[genericListItemSlug]/index.ts (1)
1-12: Consistent and correct setup of server-side props and default export for the route.apps/web/screens/queries/GenericList.ts (1)
Line range hint
3-41: Proper use of GraphQL fragments and queries to fetch generic list items.libs/cms/src/lib/models/genericListItem.model.ts (1)
23-48: Well-structured model enhancements to includecontentandslug.Tools
Biome
[error] 42-42: Template literals are preferred over string concatenation.
[error] 45-45: Template literals are preferred over string concatenation.
libs/cms/src/lib/models/genericList.model.ts (3)
9-16: EnumGenericListItemTypeis well-defined and clear.
29-30: The addition ofitemTypewith caching is well-implemented.
Line range hint
33-51: Mapping functions are correctly implemented and integrate well with the enum.apps/contentful-apps/utils/index.ts (2)
Line range hint
1-62: ThegetContentfulEntriesfunction is robust with appropriate error handling and pagination logic.
64-72: TheslugifyDatefunction is well-implemented with proper error handling for date parsing.apps/web/screens/GenericList/GenericListItem.tsx (1)
20-85: TheGenericListItemPagecomponent is well-implemented with clear structure and robust server-side data fetching. Error handling is appropriately managed.apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1)
26-103: The page component andgetServerSidePropsfunction are well-structured, effectively integrating sub-components and handling localization and routing. Data fetching and error handling are robust.apps/web/utils/richText.tsx (1)
196-196: Consider adding a default value or handling foritemTypeif it's potentially undefined.apps/web/hooks/useLinkResolver/useLinkResolver.ts (1)
42-49: Ensure that the new routes are correctly documented and tested, especially since they involve dynamic segments.apps/web/screens/Project/Project.tsx (2)
172-172: ThebackLinkproperty is now passed toProjectWrapper. Verify thatProjectWrappercorrectly handles this property, especially in terms of rendering and navigation.Verification successful
The
ProjectWrappercomponent correctly handles thebackLinkproperty. It is defined in theProjectWrapperPropsinterface and used in multiple places within the component to render a back link if thebackLinkproperty is provided.
- The
backLinkproperty is defined in theProjectWrapperPropsinterface.- The component checks for the presence of
backLinkand renders a link accordingly.Locations in the codebase:
apps/web/screens/Project/components/ProjectWrapper/ProjectWrapper.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that `ProjectWrapper` handles `backLink` correctly. # Test: Search for the implementation of `ProjectWrapper` to check `backLink` handling. ast-grep --lang javascript --pattern $'ProjectWrapper({ $$$, backLink: $_, $$$ })'Length of output: 89
Script:
#!/bin/bash # Locate the definition of `ProjectWrapper` fd -e tsx -e ts -e js -e jsx 'ProjectWrapper' | xargs grep -H 'ProjectWrapper' # Check if `backLink` is a prop in `ProjectWrapper` ast-grep --lang typescript --pattern 'function ProjectWrapper({$$$, backLink, $$$}) { $$$ }' # Check if `backLink` is a prop in `ProjectWrapper` (alternative pattern) ast-grep --lang typescript --pattern 'const ProjectWrapper = ({$$$, backLink, $$$}) => { $$$ }'Length of output: 814
Script:
#!/bin/bash # Inspect the `ProjectWrapper` component definition and its props interface cat apps/web/screens/Project/components/ProjectWrapper/ProjectWrapper.tsxLength of output: 5571
49-59: ThePagePropsinterface has been expanded with new properties. Ensure that all usages of this interface are updated to handle these new properties.Tools
Biome
[error] 54-54: Unexpected any. Specify a different type.
apps/web/screens/Organization/SubPage.tsx (3)
52-60: Ensure proper TypeScript usage for new props inSubPageProps.The addition of
customContent,backLink,customBreadcrumbItems, andcustomContentfulIdstoSubPagePropsenhances the component's flexibility and customization capabilities. Make sure to maintain comprehensive TypeScript definitions for these props to ensure type safety.
202-254: Ensure conditional rendering logic is robust and handles all edge cases.Review the conditional rendering logic for
customContentto ensure it robustly handles various states (null, undefined, etc.) and does not lead to unexpected behavior.
68-71: Validate the optional props in runtime if they are critical.Ensure that there are appropriate null checks or default values for the optional props
customContent,customBreadcrumbItems,customContentfulIds, andbackLinkto prevent runtime errors.Verification successful
The search results indicate that the optional props
customContent,customBreadcrumbItems,customContentfulIds, andbackLinkare used in theSubPagecomponent. However, the results do not provide enough detail to confirm if these props are properly validated at runtime.To ensure these optional props are handled correctly, we need to verify if there are appropriate null checks or default values for these props in the
SubPagecomponent.
The search results indicate that there are null checks or conditional checks for the optional props
customContent,customBreadcrumbItems,customContentfulIds, andbackLinkin theSubPagecomponent. This suggests that these props are being handled appropriately to prevent runtime errors.
customContentis checked withcustomContent ?and!customContent.customBreadcrumbItemsis checked withcustomBreadcrumbItems ?.customContentfulIdsis checked withcustomContentfulIds ?.backLinkis used conditionally withbackLink={backLink}.These checks ensure that the optional props are validated at runtime.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for proper handling of optional props in SubPage component. # Test: Search for usage of optional props without null checks. rg --type tsx --glob '*SubPage.tsx' 'customContent|customBreadcrumbItems|customContentfulIds|backLink'Length of output: 132
Script:
#!/bin/bash # Description: Check for proper handling of optional props in SubPage component. # Test: Search for usage of optional props without null checks. rg --type typescript.tsx --glob '*SubPage.tsx' 'customContent|customBreadcrumbItems|customContentfulIds|backLink'Length of output: 154
Script:
#!/bin/bash # Description: Check for proper handling of optional props in SubPage component. # Test: Search for usage of optional props without null checks. rg --type tsx --glob '*SubPage.tsx' 'customContent|customBreadcrumbItems|customContentfulIds|backLink'Length of output: 132
Script:
#!/bin/bash # Description: Check for proper handling of optional props in SubPage component. # Test: Search for usage of optional props without null checks. rg --glob '*SubPage.tsx' 'customContent|customBreadcrumbItems|customContentfulIds|backLink'Length of output: 1288
Script:
#!/bin/bash # Description: Check for null checks or default values for optional props in SubPage component. # Test: Search for null checks or default values for customContent. rg --glob '*SubPage.tsx' 'customContent ?|!customContent' # Test: Search for null checks or default values for customBreadcrumbItems. rg --glob '*SubPage.tsx' 'customBreadcrumbItems ?|!customBreadcrumbItems' # Test: Search for null checks or default values for customContentfulIds. rg --glob '*SubPage.tsx' 'customContentfulIds ?|!customContentfulIds' # Test: Search for null checks or default values for backLink. rg --glob '*SubPage.tsx' 'backLink ?|!backLink'Length of output: 1760
libs/cms/src/lib/cms.resolver.ts (2)
118-119: The new imports for handling generic list items by slug are correctly placed and relevant to the added functionality.
673-679: The newgetGenericListItemBySlugquery method is correctly implemented with appropriate use of caching and error handling. The static analysis error regarding decorators is a false positive; the usage here is valid.apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx (1)
877-877: Verify that thebackLinkprop is appropriately handled throughout the component.Verification successful
The
backLinkprop is appropriately handled throughout theOrganizationWrapper.tsxcomponent. It is defined with an optional type and used in a conditional rendering block to ensure it is not null or undefined before accessing its properties.
apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx: backLink?: { text: string; url: string }apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx: backLink,apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx: {backLink && (apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx: <LinkV2 href={backLink.url}>apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx: {backLink.text}Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the `backLink` prop is used consistently and correctly throughout the component. # Test: Search for the `backLink` usage in the component. Expect: Proper handling and no undefined or null errors. rg --type tsx --glob '*Wrapper.tsx' 'backLink'Length of output: 74
Script:
#!/bin/bash # Description: Verify that the `backLink` prop is used consistently and correctly throughout the component. # Test: Search for the `backLink` usage in the component. Expect: Proper handling and no undefined or null errors. rg --type js --glob '*Wrapper.tsx' 'backLink'Length of output: 1787
libs/cms/src/lib/generated/contentfulTypes.d.ts (2)
1542-1544: TheitemTypefield has been added to theIGenericListFieldsinterface to support the new feature of clickable list items. This change aligns with the PR's objective to enhance list functionality.
1581-1586: The addition ofcontentandslugfields toIGenericListItemFieldssupports the new functionality for generic list items, allowing them to contain more detailed information and be uniquely identifiable via slugs. This is crucial for the new clickable items feature.
There was a problem hiding this comment.
Actionable comments posted: 6
Outside diff range and nitpick comments (1)
apps/web/screens/Project/Project.tsx (1)
Line range hint
276-277: Add akeyproperty to elements in iterable to ensure efficient rendering.- {pageSlices.map((slice: Slice, index) => { + {pageSlices.map((slice: Slice, index) => ( + <div key={slice.id}>Tools
Biome
[error] 54-54: Unexpected any. Specify a different type.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1 hunks)
- apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1 hunks)
- apps/web/screens/GenericList/GenericListItem.tsx (1 hunks)
- apps/web/screens/Project/Project.tsx (6 hunks)
Additional context used
Path-based instructions (4)
apps/web/screens/GenericList/GenericListItem.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Project/Project.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Biome
apps/web/screens/GenericList/GenericListItem.tsx
[error] 2-7: All these imports are only used as types.
apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
[error] 51-51: Template literals are preferred over string concatenation.
[error] 6-7: All these imports are only used as types.
apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
[error] 71-71: Template literals are preferred over string concatenation.
[error] 3-4: All these imports are only used as types.
[error] 7-8: All these imports are only used as types.
apps/web/screens/Project/Project.tsx
[error] 54-54: Unexpected any. Specify a different type.
[error] 401-401: Unexpected any. Specify a different type.
[error] 1-2: All these imports are only used as types.
[error] 5-6: All these imports are only used as types.
[error] 6-13: Some named imports are only used as types.
[error] 25-34: All these imports are only used as types.
[error] 42-43: All these imports are only used as types.
[error] 276-277: Missing key property for this element in iterable.
Additional comments not posted (1)
apps/web/screens/GenericList/GenericListItem.tsx (1)
51-84: Ensure proper error handling for missing or invalid slugs.Verification successful
The search results indicate that the error handling for missing or invalid slugs is implemented using
throw new CustomNextErrorin various files, includingGenericListItem.tsx. This confirms that the error handling mechanism is in place for the scenario described in the review comment.
apps/web/screens/GenericList/GenericListItem.tsx: Proper error handling for missing or invalid slugs is implemented usingthrow new CustomNextError.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the error handling for missing or invalid slugs is robust. # Test: Search for error handling patterns related to slugs. Expect: Proper error handling. rg --type typescript $'throw new CustomNextError'Length of output: 85
Script:
#!/bin/bash # Description: Verify that the error handling for missing or invalid slugs is robust. # Test: Search for error handling patterns related to slugs. Expect: Proper error handling. rg --type ts $'throw new CustomNextError'Length of output: 6991
apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
Outdated
Show resolved
Hide resolved
apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
Outdated
Show resolved
Hide resolved
apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
Outdated
Show resolved
Hide resolved
apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- apps/contentful-apps/pages/fields/generic-list-item-slug-field.tsx (1 hunks)
- apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1 hunks)
- apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1 hunks)
- apps/web/screens/Project/Project.tsx (6 hunks)
Files skipped from review as they are similar to previous changes (3)
- apps/contentful-apps/pages/fields/generic-list-item-slug-field.tsx
- apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
- apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
Additional context used
Path-based instructions (1)
apps/web/screens/Project/Project.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Biome
apps/web/screens/Project/Project.tsx
[error] 54-54: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 407-407: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 259-259: Missing key property for this element in iterable. (lint/correctness/useJsxKeyInIterable)
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
Additional comments not posted (2)
apps/web/screens/Project/Project.tsx (2)
57-60: The addition of new properties toPagePropsenhances the component's flexibility and functionality.
69-72: The integration of new properties within theProjectPagecomponent is handled correctly.Also applies to: 88-91, 131-133
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (1)
apps/web/components/GenericList/GenericList.tsx (1)
Line range hint
242-247: Specify button type to prevent unintended form submissions.The default type of a button in HTML is "submit", which can cause unintended form submissions if the button is within a form. Specify the type explicitly to avoid this issue.
- <button onClick={() => { setPage(page); pageRef.current = page; }}> + <button type="button" onClick={() => { setPage(page); pageRef.current = page; }}>
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (7)
- apps/contentful-apps/pages/fields/generic-list-item-slug-field.tsx (1 hunks)
- apps/web/components/GenericList/GenericList.tsx (4 hunks)
- apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1 hunks)
- apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1 hunks)
- apps/web/screens/GenericList/GenericListItem.tsx (1 hunks)
- apps/web/screens/Project/Project.tsx (6 hunks)
- libs/cms/src/lib/models/genericListItem.model.ts (1 hunks)
Files skipped from review as they are similar to previous changes (4)
- apps/contentful-apps/pages/fields/generic-list-item-slug-field.tsx
- apps/web/pages/s/[slug]/[subSlug]/[genericListItemSlug]/index.tsx
- apps/web/screens/GenericList/GenericListItem.tsx
- libs/cms/src/lib/models/genericListItem.model.ts
Additional context used
Path-based instructions (3)
apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/components/GenericList/GenericList.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/Project/Project.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Biome
apps/web/components/GenericList/GenericList.tsx
[error] 242-247: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetapps/web/screens/Project/Project.tsx
[error] 54-54: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
[error] 406-406: Unexpected any. Specify a different type. (lint/suspicious/noExplicitAny)
any disables many type checking rules. Its use should be avoided.
Additional comments not posted (2)
apps/web/pages/v/[slug]/[subSlug]/[genericListItemSlug]/index.tsx (2)
73-75: Use template literals for URL construction to improve readability.This is a repeat of a previous comment. Ensure to use template literals as previously suggested.
93-93: Ensure correct handling of undefineditem.slugin URL construction.
apps/contentful-apps/pages/fields/generic-list-item-slug-field.tsx
Outdated
Show resolved
Hide resolved
* Add model fields * Validate contentful field * Add generic list item detail page * Remove json stringify call * Add org subpage layout * Handle language toggle for org subpages * Add project subpage layout to generic list item page * Skip article layouts for now * Add og:title * Remove comment * Add type imports * Stop considering only within lists as needing to have a unique slug * Render custom content for project subpages * Use template literals * Remove console.log --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
* Add model fields * Validate contentful field * Add generic list item detail page * Remove json stringify call * Add org subpage layout * Handle language toggle for org subpages * Add project subpage layout to generic list item page * Skip article layouts for now * Add og:title * Remove comment * Add type imports * Stop considering only within lists as needing to have a unique slug * Render custom content for project subpages * Use template literals * Remove console.log --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Clickable generic list items
What
Why
Screenshots / Gifs
Organization subpages
Screen.Recording.2024-06-03.at.15.29.13.mov
Project subpages
Screen.Recording.2024-06-04.at.09.27.49.mov
Checklist:
Summary by CodeRabbit
New Features
GenericListItemSlugFieldfor managing unique slugs in Contentful lists.GenericListItemPageto display list items with title, date, content, and social sharing options.ProjectPagewith custom contentful IDs, breadcrumbs, and back links.Enhancements
GenericListto include clickable and non-clickable item types.GenericListItemmodel for better item management.