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.

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

Calendar events changes #6998

Merged
merged 20 commits into from
Oct 14, 2024
Merged

Calendar events changes #6998

merged 20 commits into from
Oct 14, 2024

Conversation

bobbykolev
Copy link
Contributor

@bobbykolev bobbykolev commented Oct 7, 2024

#3912 - Create/Update
#6874 - Display

Dialog (create/edit) to be updated as per design

  • UI to match the design
    • name & type on first line;
    • end date and time instead of duration;
    • all day switch;
  • All-day event (wholeDay field);
  • 15 min time steps instead of 30;
  • Add location field;
  • Multi-day display support
    • Rounded badge
    • event details header;
    • calendar;
  • Now the event description is no longer required (with no default value);
  • Add references (after temp storage, to be extracted);
  • Add URL field - to be extracted;

Technical

  • multi-day validation;

Create/Edit
Screenshot 2024-10-08 181353
Screenshot 2024-10-10 133524
Screenshot 2024-10-10 155944

Summary by CodeRabbit

  • New Features

    • Enhanced localization with updated translations for Bulgarian, German, English, Spanish, French, Dutch, Portuguese, and Ukrainian.
    • Added new time slots in the DatePicker for improved time selection.
    • Introduced new properties in calendar event forms for better event management, including endDate and location.
  • Bug Fixes

    • Improved clarity and consistency in notifications and user messages across multiple languages.
  • Enhancements

    • Updated components for better functionality and responsiveness, including event highlighting and duration handling in calendar views.
    • Enhanced date handling and formatting functionalities for improved user experience.
    • Refined cookie consent messages for better user understanding.

Copy link

coderabbitai bot commented Oct 7, 2024

Walkthrough

This pull request includes extensive updates across multiple translation files for different languages, enhancing localization by adding, modifying, and removing keys. Key fields, particularly defaultEventDescription, have been standardized to empty strings in various language files. Additionally, several components related to calendar events have been modified to accommodate new properties for event duration and location. The updates also include enhancements to the AlkemioTimePicker, FormikDurationMinutes, and utility functions for date handling, among other components.

Changes

File Path Change Summary
src/core/i18n/bg/translation.bg.json Updated translations, added new entries, modified existing text, removed certain strings.
src/core/i18n/de/translation.de.json Refined chatbot content, updated notifications, and clarified cookie consent messages.
src/core/i18n/en/translation.en.json Modified defaultEventDescription to an empty string, refined various sections for clarity.
src/core/i18n/es/translation.es.json Removed defaultEventDescription, updated strings for clarity.
src/core/i18n/fr/translation.fr.json Removed defaultEventDescription, updated various sections.
src/core/i18n/nl/translation.nl.json Updated translations, refined content, modified defaultEventDescription to an empty string.
src/core/i18n/pt/translation.pt.json Removed defaultEventDescription, updated strings for clarity.
src/core/i18n/ua/translation.ua.json Updated translations, removed certain entries, modified defaultEventDescription to an empty string.
src/core/ui/forms/DatePicker/AlkemioTimePicker.tsx Expanded timeSlots calculation for more granularity.
src/core/ui/forms/DatePicker/FormikDurationMinutes.tsx Encapsulated duration update logic in a new function.
src/core/utils/time/utils.ts Restructured formatBadgeDate, added functions for end date calculations and long date formatting.
src/domain/timeline/calendar/CalendarEventsContainer.tsx Enhanced CalendarEventFormData interface with endDate and location.
src/domain/timeline/calendar/calendarQueries.graphql Updated CalendarEventDetails fragment to include location.
src/domain/timeline/calendar/components/FullCalendar.tsx Enhanced functionality and styling, used getEndDateByDuration.
src/domain/timeline/calendar/views/CalendarEventBadge.tsx Renamed eventStartDate to startDate, added durationMinutes and durationDays.
src/domain/timeline/calendar/views/CalendarEventForm.tsx Updated logic for calculating initialEndDate, revised validation schema.
src/domain/timeline/calendar/views/CalendarEventView.tsx Updated CalendarEventViewProps to include durationDays and durationMinutes.
src/domain/timeline/calendar/views/CalendarEventsList.tsx Updated CalendarEventsListProps to include optional durationDays.
src/domain/timeline/calendar/views/EventCardHeader.tsx Updated event properties to include durationDays, durationMinutes, and wholeDay.
src/main/ui/platformNavigation/PlatformNavigationBar.tsx Modified rendering logic of the footer prop in PlatformNavigationUserMenu.

Possibly related PRs

  • Administration ORG/User/Packs UI update + Org Verification #6866: The changes in the translation.en.json file related to organization verification and user roles may connect with the updates made in the main PR, which also modifies the translation files for clarity and user experience.
  • Actions menu in Subspace List * #6885: The modifications to the translation.en.json file in this PR, particularly regarding the verification section, align with the changes in the main PR that enhance user understanding of roles and functionalities.
  • Templates fixes #6922: While this PR focuses on template fixes, the changes in the translation.en.json file may relate to the overall user experience improvements highlighted in the main PR.
  • Profile memberships #6965: The updates to the translation.en.json file in this PR, particularly regarding community roles and memberships, directly relate to the changes made in the main PR that enhance user profiles and contributions.
  • Resources on profile page (User & Org) #6983: The modifications to the translation.en.json file in this PR, which enhance clarity around user roles and contributions, are closely related to the changes in the main PR that focus on improving the profile page's content and user experience.

Suggested reviewers

  • ccanos: Suggested as a reviewer for this pull request.

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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@bobbykolev bobbykolev marked this pull request as ready for review October 10, 2024 15:28
@bobbykolev bobbykolev requested a review from ccanos October 10, 2024 15:28
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 20

🧹 Outside diff range and nitpick comments (16)
src/core/ui/icon/RoundedBadge.tsx (2)

9-9: LGTM: RoundedBadgeProps interface updated correctly.

The addition of the sx prop allows for more flexible styling of the component, which is a good improvement. The prop is correctly typed as optional and uses the SxProps<Theme> type from MUI, consistent with MUI's component API design.

Consider adding a brief JSDoc comment to describe the purpose of the sx prop, for improved documentation:

/** Additional styles to be applied to the component using MUI's sx prop */
sx?: SxProps<Theme>;

26-28: LGTM: RoundedBadge component implementation updated correctly.

The changes enhance the component's flexibility:

  1. The new borderRadius parameter allows for customization of the badge shape while maintaining the circular shape as the default.
  2. The sx prop enables additional custom styling, consistent with MUI's styling approach.

These updates improve the component's versatility without breaking existing usage.

Consider renaming the borderRadius prop to something like badgeRadius or shapeRadius to avoid potential confusion with the CSS borderRadius property and to better reflect its purpose in shaping the entire badge.

Also applies to: 42-42

src/domain/timeline/calendar/views/CalendarEventBadge.tsx (4)

10-12: LGTM: Prop interface updates enhance flexibility.

The renaming of eventStartDate to startDate improves clarity. The addition of durationMinutes and durationDays props allows for more flexible event duration handling. The types are appropriate for the intended use.

Consider adding JSDoc comments to describe the purpose and expected values of these props, especially for durationDays which is optional.


29-31: LGTM: Date formatting logic improvements.

The use of new formatBadgeDate and formatLongDateTimeString functions with object parameters improves code readability and likely provides more sophisticated date formatting. This change aligns well with the new prop structure.

Consider adding type annotations for the destructured object parameters in these function calls for improved type safety and documentation.


33-38: LGTM: RoundedBadge component updates enhance visual representation.

The color change based on isPast improves visual distinction for past events. The addition of the borderRadius prop likely aligns with updated design requirements.

Consider extracting the color logic into a separate useMemo hook or a constant to improve readability and potentially reusability:

const badgeColor = useMemo(() => 
  isPast ? theme.palette.divider : theme.palette.background.default,
  [isPast, theme]
);

// Then in the JSX:
<RoundedBadge
  size="medium"
  color={badgeColor}
  borderRadius="12%"
  {...badgeProps}
>

39-45: LGTM: Badge content updates improve information display.

The badge now displays both start and end dates when available, which is great for multi-day events. The conditional rendering of the end date ensures that single-day events are still displayed correctly.

Consider extracting the date display logic into a separate component to improve readability and maintainability:

const DateDisplay = ({ startDate, endDate }) => (
  <>
    {startDate}
    {endDate && <Box color={theme.palette.primary.main}>{endDate}</Box>}
  </>
);

// Then in the main component:
<Caption color={theme.palette.primary.main}>
  <DateDisplay startDate={dates.startDate} endDate={dates.endDate} />
</Caption>
src/domain/timeline/calendar/calendarQueries.graphql (1)

76-79: LGTM! Consider adding a comment for clarity.

The addition of the location field to the CalendarEventDetails fragment is well-structured and consistent with the existing schema. It provides valuable information about the event creator's location without exposing sensitive data.

Consider adding a comment above the location field to clarify its purpose, e.g.:

# Location of the event creator
location {
  id
  city
}

This would enhance code readability and maintainability.

src/domain/timeline/calendar/views/CalendarEventView.tsx (1)

50-60: LGTM: Component update correctly implements new duration properties

The changes to the CalendarEventView component correctly implement the new durationDays and durationMinutes properties, passing them to the CalendarEventBadge component. This update is consistent with the interface changes and aligns with the PR objectives.

For improved readability, consider destructuring the event props at the beginning of the component:

const CalendarEventView: FC<CalendarEventViewProps> = ({ startDate, durationMinutes, durationDays, profile }) => {
  const { url, displayName, description } = profile;

  return (
    <BadgeCardView
      component={RouterLink}
      to={url}
      visual={
        <CalendarEventBadge
          startDate={startDate}
          durationMinutes={durationMinutes}
          durationDays={durationDays}
        />
      }
    >
      <BlockSectionTitle>{displayName}</BlockSectionTitle>
      <EventDescription>{description}</EventDescription>
    </BadgeCardView>
  );
};

This change would make the component more readable and reduce the use of the event. prefix throughout the component.

src/core/ui/forms/DatePicker/AlkemioTimePicker.tsx (1)

42-48: LGTM! Consider adding customizable time step for future flexibility.

The implementation of 15-minute time slots aligns well with the PR objectives and provides a more granular selection for users. The use of flatMap is an efficient way to generate the time slots.

For future enhancement:
Consider adding a prop to customize the time step (e.g., 5, 10, 15, 30 minutes). This would make the component more flexible for various use cases without requiring code changes.

Example:

const AlkemioTimePicker = ({
  // ... other props
  timeStep = 15,
  // ... rest of the component
}) => {
  // ... 
  const timeSlots = useMemo(
    () =>
      times(24).flatMap(h =>
        times(60 / timeStep).map(m =>
          djsDate.set('hour', h).set('minute', m * timeStep)
        )
      ),
    [djsDate, timeStep]
  );
  // ...
};

This suggestion is optional and can be considered for future iterations.

src/core/i18n/pt/translation.pt.json (2)

Line range hint 1-3144: Consider improving translation consistency across the file.

While the translations are generally good, there are a few areas where consistency could be improved:

  1. Some keys use English words (e.g., "cookie", "topbar") while others are translated. Consider translating all keys for better consistency.
  2. The level of detail in translations varies across different sections. It might be beneficial to review and ensure a consistent level of detail throughout the file.

These improvements would enhance the overall quality and maintainability of the translations.


Line range hint 1-3144: Consider refining translations for improved consistency and clarity.

While the translations are generally good, there are a few areas where improvements could be made:

  1. Consistency in formality: Some translations use formal language, while others are more casual. Consider standardizing the level of formality throughout the file.

  2. English words in Portuguese translations: There are instances where English words are used within Portuguese sentences. For example, in the "cookie" section. Consider translating these terms for a fully localized experience.

  3. Consistency in detail: Some sections have very detailed translations, while others are more concise. Try to maintain a consistent level of detail across all sections.

  4. Review technical terms: Ensure that technical terms are consistently translated and appropriate for the target audience.

These refinements would enhance the overall quality and user experience of the Portuguese localization.

src/domain/timeline/calendar/views/EventCardHeader.tsx (1)

65-65: Internationalize the date separator for better localization

Currently, the hyphen (-) used to separate the start and end dates is hardcoded. For better internationalization support, consider using a translation string, as date range formats may vary across locales.

You can update the code as follows:

+              <Box>{t('common:dateSeparator', '-')}</Box>

Ensure that dateSeparator is defined in your translation files for different locales.

src/core/utils/time/utils.ts (1)

154-163: Ensure consistent return types in 'formatTime' function

The formatTime function returns null when date is undefined, which may lead to inconsistent return types and potential issues when the caller expects a string. Consider returning an empty string ('') or a default value to maintain consistency.

Apply this diff to return an empty string instead of null:

export const formatTime = (date: Date | undefined) => {
  if (!date) {
-   return null;
+   return '';
  }

  return date.toLocaleTimeString(LocaleId, {
    hour: '2-digit',
    minute: '2-digit',
  });
};
src/domain/timeline/calendar/CalendarEventsContainer.tsx (1)

97-108: Improve error handling for date calculations

The functions createEvent and updateEvent perform date calculations without explicit error handling for invalid dates. To enhance robustness, consider adding validation checks to handle potential errors in date parsing or calculations.

Also applies to: 139-152

src/domain/timeline/calendar/views/CalendarEventForm.tsx (2)

Line range hint 96-103: Include 'location' in initialValues

The location.city field is used in the form but is not initialized in initialValues. This may lead to uncontrolled input warnings or errors.

Apply this diff to include the location field in initialValues:

 return {
   startDate,
   endDate,
   durationMinutes: event?.durationMinutes ?? DEFAULT_DURATION_MINUTES,
   displayName: event?.profile?.displayName ?? '',
   description: event?.profile?.description ?? '',
   type: event?.type,
   multipleDays: event?.multipleDays ?? false,
   wholeDay: event?.wholeDay ?? false,
   durationDays: event?.durationDays,
   tags: event?.profile?.tagset?.tags ?? [],
   references: event?.profile?.references ?? [],
+  location: event?.location ?? { city: '' },
 };

238-238: Remove unnecessary placeholder in location field

The placeholder prop is set to a single space ' ', which doesn't provide value to the user.

Apply this diff to remove the unnecessary placeholder:

 <FormikInputField
   name="location.city"
   title={'Location'}
-  placeholder={' '}
   fullWidth
 />
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 36f02aa and f3f8531.

⛔ Files ignored due to path filters (2)
  • src/core/apollo/generated/apollo-hooks.ts is excluded by !**/generated/**
  • src/core/apollo/generated/graphql-schema.ts is excluded by !**/generated/**
📒 Files selected for processing (21)
  • src/core/i18n/bg/translation.bg.json (1 hunks)
  • src/core/i18n/de/translation.de.json (1 hunks)
  • src/core/i18n/en/translation.en.json (1 hunks)
  • src/core/i18n/es/translation.es.json (1 hunks)
  • src/core/i18n/fr/translation.fr.json (1 hunks)
  • src/core/i18n/nl/translation.nl.json (1 hunks)
  • src/core/i18n/pt/translation.pt.json (1 hunks)
  • src/core/i18n/ua/translation.ua.json (1 hunks)
  • src/core/ui/forms/DatePicker/AlkemioTimePicker.tsx (1 hunks)
  • src/core/ui/forms/DatePicker/FormikDurationMinutes.tsx (2 hunks)
  • src/core/ui/icon/RoundedBadge.tsx (3 hunks)
  • src/core/utils/time/utils.ts (4 hunks)
  • src/domain/timeline/calendar/CalendarEventsContainer.tsx (5 hunks)
  • src/domain/timeline/calendar/calendarQueries.graphql (1 hunks)
  • src/domain/timeline/calendar/components/FullCalendar.tsx (6 hunks)
  • src/domain/timeline/calendar/views/CalendarEventBadge.tsx (1 hunks)
  • src/domain/timeline/calendar/views/CalendarEventForm.tsx (4 hunks)
  • src/domain/timeline/calendar/views/CalendarEventView.tsx (2 hunks)
  • src/domain/timeline/calendar/views/CalendarEventsList.tsx (1 hunks)
  • src/domain/timeline/calendar/views/EventCardHeader.tsx (2 hunks)
  • src/main/ui/platformNavigation/PlatformNavigationBar.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (21)
src/core/i18n/bg/translation.bg.json (1)

Pattern src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.

src/core/i18n/de/translation.de.json (1)

Pattern src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.

src/core/i18n/en/translation.en.json (1)

Pattern src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.

src/core/i18n/es/translation.es.json (1)

Pattern src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.

src/core/i18n/fr/translation.fr.json (1)

Pattern src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.

src/core/i18n/nl/translation.nl.json (1)

Pattern src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.

src/core/i18n/pt/translation.pt.json (1)

Pattern src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.

src/core/i18n/ua/translation.ua.json (1)

Pattern src/**/*.json: Review the JSON files for correct syntax and structure.
Ensure that the configuration and data are accurate and follow the project's standards.
Check for sensitive data exposure and ensure that the data is properly validated.

src/core/ui/forms/DatePicker/AlkemioTimePicker.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/core/ui/forms/DatePicker/FormikDurationMinutes.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/core/ui/icon/RoundedBadge.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/core/utils/time/utils.ts (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/domain/timeline/calendar/CalendarEventsContainer.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/domain/timeline/calendar/calendarQueries.graphql (1)

Pattern src/**/*.{graphql,gql}: Review the GraphQL schema and queries for best practices, potential bugs, and adherence to the project's GraphQL standards.
Ensure that the schema is well-defined and queries are optimized.
Check for security vulnerabilities.

src/domain/timeline/calendar/components/FullCalendar.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/domain/timeline/calendar/views/CalendarEventBadge.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/domain/timeline/calendar/views/CalendarEventForm.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/domain/timeline/calendar/views/CalendarEventView.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/domain/timeline/calendar/views/CalendarEventsList.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/domain/timeline/calendar/views/EventCardHeader.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/main/ui/platformNavigation/PlatformNavigationBar.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
🪛 Biome
src/domain/timeline/calendar/components/FullCalendar.tsx

[error] 250-250: Don't use '{}' as a type.

Prefer explicitly define the object shape. '{}' means "any non-nullable value".

(lint/complexity/noBannedTypes)

src/main/ui/platformNavigation/PlatformNavigationBar.tsx

[error] 107-107: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)


[error] 108-108: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

🔇 Additional comments (17)
src/core/ui/icon/RoundedBadge.tsx (1)

2-2: LGTM: Import statement updated correctly.

The addition of SxProps and Theme to the import statement is consistent with the changes in the component props and implementation. This allows for proper typing of the new sx prop.

src/domain/timeline/calendar/views/CalendarEventBadge.tsx (3)

5-5: LGTM: Import statement updates are appropriate.

The new imports for formatBadgeDate and formatLongDateTimeString align with the component's updated logic. Consolidating imports from the same utility file is a good practice for maintainability.


16-22: LGTM: Component function signature updates are correct.

The function signature has been properly updated to use the new prop names, and the props are now destructured in the function parameters. This aligns with the updated prop interface and follows common React patterns.


25-26: LGTM: useMemo hook updates are correct.

The useMemo hook has been properly updated to use the renamed startDate prop. The dependency array has been correctly adjusted to reflect this change. The logic remains consistent, comparing the start date to the current date.

src/domain/timeline/calendar/views/CalendarEventView.tsx (1)

11-12: LGTM: Interface update aligns with PR objectives

The addition of durationDays and durationMinutes to the CalendarEventViewProps interface is a good change. It aligns with the PR objectives to support multi-day events and more precise time steps (15-minute intervals). The use of the Pick type is a good TypeScript practice for selecting specific properties from a larger type.

src/core/i18n/ua/translation.ua.json (2)

98-98: Change aligns with application-wide updates.

The modification of defaultEventDescription to an empty string is consistent with the standardization mentioned in the summary. This change likely reflects an update in how event descriptions are handled in the application.


Line range hint 1-2046: Overall translation file quality is good.

The Ukrainian translation file is comprehensive, covering a wide range of application features. The JSON structure is correct, and the translations seem to address various aspects of the application, including authentication, community features, and UI elements. This thoroughness contributes to a well-localized user experience for Ukrainian users.

src/core/i18n/bg/translation.bg.json (1)

98-98: Approved: Simplified default event description

The change from a template string to an empty string for defaultEventDescription has been implemented correctly. This aligns with the standardization mentioned in the PR summary.

However, be aware that this change may affect how new calendar events are created or displayed in the Bulgarian version of the application. The previous structure (location, URL, description) is no longer provided by default.

src/core/i18n/es/translation.es.json (1)

98-98: Simplified default event description

The defaultEventDescription has been changed to an empty string, removing the previous placeholders for location, URL, and description. This change simplifies the event creation process and allows users to start with a blank description.

src/core/i18n/pt/translation.pt.json (1)

Line range hint 1-3144: The overall structure of the translation file is well-organized and consistent.

The JSON structure is properly formatted with nested objects for different sections of the application, making it easy to navigate and maintain.

src/core/i18n/nl/translation.nl.json (1)

98-98: LGTM! Verify impact on calendar functionality.

The change to set defaultEventDescription to an empty string looks good. This will allow users to input their own descriptions for calendar events without having to clear a predefined value. However, please ensure that this change doesn't negatively impact any existing calendar functionality that might rely on a default description.

To confirm that this change doesn't break any existing functionality, please run the following script:

src/core/i18n/de/translation.de.json (1)

98-98: LGTM! Note the potential impact on default event descriptions.

The change to set defaultEventDescription to an empty string is approved. This modification aligns with the AI-generated summary and is likely intentional. Be aware that this change may affect how default event descriptions are displayed in the calendar feature of the platform.

src/core/i18n/en/translation.en.json (1)

84-84: Verify the impact of removing default event description template.

The defaultEventDescription has been changed to an empty string, removing the previous template that included placeholders for location, URL, and description. While this simplifies the initial state, consider the following:

  1. Ensure this change doesn't break any existing functionality that might have relied on these placeholders.
  2. Verify if this affects the user experience, as users no longer have a guide for what information to include in the event description.
  3. Update any related documentation or user guides that might reference the old default description format.
✅ Verification successful

The impact of removing the default event description template has been successfully verified and no issues were found.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any code that might be using the old defaultEventDescription format
rg --type typescript --type javascript 'defaultEventDescription.*\$t\(common\.location\)|defaultEventDescription.*\$t\(common\.url\)|defaultEventDescription.*\$t\(common\.description\)'

Length of output: 222


Script:

#!/bin/bash
# Search for any code that might be using the old defaultEventDescription format
rg --glob '*.ts' --glob '*.tsx' --glob '*.js' --glob '*.jsx' 'defaultEventDescription.*\$t\(common\.location\)|defaultEventDescription.*\$t\(common\.url\)|defaultEventDescription.*\$t\(common\.description\)'

Length of output: 209

src/domain/timeline/calendar/views/EventCardHeader.tsx (1)

23-23: 🛠️ Refactor suggestion

Simplify optional property types in the interface

The optional properties durationDays and wholeDay include | undefined, which is unnecessary since the ? operator already makes them possibly undefined. Removing | undefined simplifies the code without changing its functionality.

Update the interface as follows:

Change to:

Likely invalid or redundant comment.

src/core/ui/forms/DatePicker/FormikDurationMinutes.tsx (1)

Line range hint 41-59: Well-structured logic in updateDurationMinutes function

The updateDurationMinutes function effectively updates durationMinutes based on changes to startTime, correctly handling cases where the duration might be negative. The implementation is clear and considers edge cases appropriately.

src/domain/timeline/calendar/CalendarEventsContainer.tsx (1)

125-126: Ensure 'location' data includes all necessary fields

Currently, only the city field from location is being included in profileData. If additional location information (such as country, state, or coordinates) is required by the backend or for future features, consider including those fields.

Ensure that the location field satisfies the necessary data requirements.

Also applies to: 175-176

src/domain/timeline/calendar/views/CalendarEventForm.tsx (1)

209-209: Ensure startDate is defined when setting minDate

The minDate prop for the endDate picker depends on startDate. If startDate is undefined, it could cause unexpected behavior.

Please verify that startDate is always set before rendering FormikDatePicker for endDate, or provide a fallback to prevent potential errors.

src/main/ui/platformNavigation/PlatformNavigationBar.tsx Outdated Show resolved Hide resolved
src/core/i18n/pt/translation.pt.json Show resolved Hide resolved
src/core/i18n/fr/translation.fr.json Show resolved Hide resolved
src/domain/timeline/calendar/views/CalendarEventForm.tsx Outdated Show resolved Hide resolved
src/domain/timeline/calendar/views/CalendarEventForm.tsx Outdated Show resolved Hide resolved
@valeksiev valeksiev self-requested a review October 11, 2024 07:17
valeksiev
valeksiev previously approved these changes Oct 14, 2024
Copy link
Contributor

@valeksiev valeksiev left a comment

Choose a reason for hiding this comment

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

Overall, I agree with the Bunny's comments so at least review them thoroughly.

Approving as I don't feel any of them is crucial and don't want to be blocking.

src/core/utils/time/utils.ts Outdated Show resolved Hide resolved
@valeksiev
Copy link
Contributor

image this is happening - choose a start date after the end date, then choose `All-day`. Also, image

When I close the calendar, the date is reset to 14.10

image I was not notified that I couldn't create the event because the start and end times are the same.

@bobbykolev
Copy link
Contributor Author

export const isSameDay = (startDate: Date | undefined, endDate: number | Date | undefined) => {
if (!startDate || !endDate) {
return true;
}

const startDateOnly = new Date(startDate);
const endDateOnly = new Date(endDate);

return (
startDateOnly.getFullYear() === endDateOnly.getFullYear() &&
startDateOnly.getMonth() === endDateOnly.getMonth() &&
startDateOnly.getDate() === endDateOnly.getDate()
);
};

Yes, this is hard to handle (can't think of something ATM) so let's extract it in bug so we're not delaying this and other priorities.
@Comoque1 FYI

@bobbykolev bobbykolev requested a review from valeksiev October 14, 2024 09:18
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 7

🧹 Outside diff range and nitpick comments (3)
src/domain/timeline/calendar/views/CalendarEventForm.tsx (3)

75-97: LGTM: Improved initialValues logic

The new logic for calculating initialEndDate and the addition of endDate to initialValues improve the form's initialization. The use of useMemo for performance optimization is a good practice.

Consider extracting the initialEndDate calculation into a separate function for better readability:

const calculateInitialEndDate = (event: Partial<CalendarEventDetailData> | undefined, dateNow: Date) => {
  if (!event?.startDate) {
    return dateNow;
  }

  if (event.durationMinutes) {
    return new Date(new Date(event.startDate).getTime() + event.durationMinutes * 60000);
  }

  return dateNow;
};

const initialEndDate = useMemo(() => calculateInitialEndDate(event, dateNow), [event, dateNow]);

158-164: LGTM: New getMinTime function

The getMinTime function is a good addition to ensure that the end time is always after the start time when the dates are the same, improving user experience.

Consider simplifying the function using a ternary operator:

const getMinTime = (startDate: DateType, endDate: number | DateType) =>
  startDate && isSameDay(startDate, endDate) ? dayjs(startDate) : undefined;

This version is more concise and eliminates the need for an early return.


Line range hint 1-274: Overall improvements with some suggestions for optimization

The CalendarEventForm component has been significantly enhanced to handle more complex event creation and editing scenarios. The changes align well with the PR objectives, including support for multi-day events and the addition of a location field.

Key improvements:

  1. More flexible event duration handling
  2. Enhanced validation logic
  3. Improved form structure with conditional rendering

To further improve the component, consider the following:

  1. Implement the suggested refactorings for the validateDuration function and validationSchema to improve maintainability and performance.
  2. Extract complex logic (e.g., initialEndDate calculation) into separate utility functions.
  3. Ensure all hardcoded strings are localized.
  4. Consider breaking down the large render function into smaller, reusable components to improve readability and maintainability.

These optimizations will make the component more robust and easier to maintain in the long run.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between f3f8531 and f4b571b.

⛔ Files ignored due to path filters (2)
  • src/core/apollo/generated/apollo-hooks.ts is excluded by !**/generated/**
  • src/core/apollo/generated/graphql-schema.ts is excluded by !**/generated/**
📒 Files selected for processing (5)
  • src/core/i18n/en/translation.en.json (1 hunks)
  • src/core/ui/forms/DatePicker/AlkemioTimePicker.tsx (2 hunks)
  • src/core/utils/time/utils.ts (3 hunks)
  • src/domain/timeline/calendar/views/CalendarEventForm.tsx (4 hunks)
  • src/main/ui/platformNavigation/PlatformNavigationBar.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/core/i18n/en/translation.en.json
  • src/core/ui/forms/DatePicker/AlkemioTimePicker.tsx
  • src/main/ui/platformNavigation/PlatformNavigationBar.tsx
🧰 Additional context used
📓 Path-based instructions (2)
src/core/utils/time/utils.ts (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
src/domain/timeline/calendar/views/CalendarEventForm.tsx (1)

Pattern src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Ensure sufficient error handling and logging is present.
Check for common security vulnerabilities such as:

  • SQL Injection
  • XSS (Cross-Site Scripting)
  • CSRF (Cross-Site Request Forgery)
  • Insecure dependencies
  • Sensitive data exposure
🔇 Additional comments (5)
src/core/utils/time/utils.ts (3)

23-28: Well-structured type definition for BadgeDateProps

The BadgeDateProps type is well-defined and provides a clear structure for date formatting options. It includes all necessary properties and allows for flexibility in usage.


67-74: Well-defined longDayFormatOptions constant

The longDayFormatOptions constant is well-defined and improves code readability. It correctly uses the Intl.DateTimeFormatOptions type and provides a consistent format for long date strings throughout the application.


143-149: Well-implemented formatTime function

The formatTime function is well-implemented:

  1. It correctly handles undefined input by returning null.
  2. It uses the predefined timeFormatOptions for consistent time formatting across the application.
  3. The function is concise and focused on a single responsibility.
src/domain/timeline/calendar/views/CalendarEventForm.tsx (2)

5-5: LGTM: New imports and constants

The new imports (FormControlLabel, Switch, dayjs, isSameDay) and the constant DEFAULT_DURATION_MINUTES are appropriate for the added functionality in the component. The DateType type alias improves code readability.

Also applies to: 25-31


194-252: ⚠️ Potential issue

LGTM: Improved form structure with new fields

The new form structure provides more flexibility for event creation and editing. The conditional rendering of duration or end time based on whether the event is on the same day is a good UX decision.

There's a hardcoded string that should be localized:

- label={'All Day'}
+ label={t('fields.allDay')}

Make sure to add the corresponding translation key 'fields.allDay' in your localization files.

src/core/utils/time/utils.ts Show resolved Hide resolved
src/core/utils/time/utils.ts Show resolved Hide resolved
src/core/utils/time/utils.ts Show resolved Hide resolved
src/core/utils/time/utils.ts Show resolved Hide resolved
src/core/utils/time/utils.ts Show resolved Hide resolved
@valeksiev valeksiev deleted the client-3912-calendar branch October 14, 2024 11:52
This was referenced Jan 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants