fix: header navigation #24
Conversation
chraebsli
commented
Feb 18, 2024
chraebsli
commented
- fix: header navigation
- remove percentage in skills
- fix & cleanup: timeline
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Type: Enhancement
PR Summary: This pull request introduces several enhancements and fixes to the application. It focuses on improving the header navigation by integrating react-scroll for smoother navigation and updating the navigation links to use keys from the Sections type directly. Additionally, it removes the display of percentage values in the skills component and makes adjustments to the timeline component to be more responsive based on the device's screen size. The PR also includes minor adjustments such as adding a disabled text color to the theme and reintroducing a visual separator in the Section component.
Decision: Comment
📝 Type: 'Enhancement' - not supported yet.
- Sourcery currently only approves 'Typo fix' PRs.
✅ Issue addressed: this change correctly addresses the issue or implements the desired feature.
No details provided.
📝 Complexity: the changes are too large or complex for Sourcery to approve.
- Unsupported files: the diff contains files that Sourcery does not currently support during reviews.
General suggestions:
- Ensure that the use of
@ts-ignorefor importingreact-scrollis absolutely necessary. If possible, define the types or find an alternative solution that does not suppress TypeScript's type checking. - Review the visual and functional changes in the header navigation to ensure they align with the intended user experience and design specifications.
- Confirm that the removal of percentage display in the skills component and the responsive adjustments in the timeline component enhance the user interface without reducing the information quality or accessibility.
- Consider the impact of theme changes, such as the addition of a disabled text color, on the overall consistency and appearance of the application.
src/components/common/Header.tsx: The code change introduces unnecessary complexity and potential maintainability issues by adding a custom `NavLink` component and bypassing TypeScript checks, suggesting a more integrated approach could simplify the implementation.
While the new features introduced in this change, such as smooth scrolling and the custom NavLink component, add interesting functionality, they also significantly increase the complexity of the code. Here are a few points to consider:
-
The use of
// @ts-ignoreto bypass TypeScript's type checking can lead to potential issues down the line. It's generally best to address the type errors directly to maintain the robustness that TypeScript offers. -
The introduction of the custom
NavLinkcomponent, while adding reusability, also adds another layer of abstraction. This increases the overall codebase and complexity, especially when the added functionality (like smooth scrolling) could potentially be integrated more directly with existing components. -
The modifications to the
sectionsstructure and the embedded styling and behavior in theNavLinkcomponent mix concerns that could be kept separate. This can make the code harder to maintain and understand. -
The added properties (
spy,smooth,offset,duration) in theLinkcomponent from "react-scroll" are valuable for the smooth scrolling feature but also increase the cognitive load required to understand the component's behavior.
A simpler approach might involve enhancing the existing Nav.Link components directly with the necessary functionality, minimizing changes to the overall architecture. This would keep the codebase cleaner and more maintainable, focusing on integrating new features with minimal alterations to the existing structure.
Thanks for using Sourcery. We offer it for free for open source projects and would be very grateful if you could help us grow. If you like it, would you consider sharing Sourcery on your favourite social media? ✨
| @@ -5,14 +5,16 @@ import { LanguageSwitcher } from "./LanguageSwitcher"; | |||
| import { useTranslation } from "react-i18next"; | |||
| import { Image } from "./Text"; | |||
| import { Sections } from "../../type/page"; | |||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | |||
| // @ts-ignore | |||
| import { Link } from "react-scroll"; | |||
There was a problem hiding this comment.
issue (llm): Using @ts-ignore to bypass TypeScript checks can lead to runtime errors if the types change in future versions of react-scroll. Consider defining the types or using a different approach that doesn't suppress type checking.
