Pulling feat/edit-page into develop #613
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
The EditableContentFlow.md file has been added to the dicty-frontpage/docs directory. It contains two flowcharts: one for unauthorized users and one for authorized users. These flowcharts visually represent the flow of content editing and viewing for each type of user.
|
Important Auto Review SkippedBot user detected. To trigger a single review, invoke the 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 (
|
Unauthorized Userflowchart TD
A["/show"]
B[Show]
C[ContentView]
D["Editor editable={false}"]
A --> B --> C --> D
Authorized Userflowchart TD
A["/editable"]
B["Editable (QUERY)"]
C[EditableView]
D["Editor editable={false}"]
E["EditButton (navigate to /edit)"]
F["/edit"]
G["Edit (QUERY)"]
H[EditView]
I["Editor editable={true}"]
A --> B -->|data| C
C -->|data| D
C --> E
F --> G -->|data|H -->|data|I
|
…ser types and add class definitions for styling The flowchart in EditableContentFlow.md has been updated to include two different user types: regular users (GREEN) and authorized users (YELLOW). The flowchart now shows the flow for both types of users, including the different components and queries involved. Class definitions have also been added to style the flowchart based on the user type, with regular users shown in green and authorized users shown in yellow.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #613 +/- ##
========================================
Coverage 93.90% 93.90%
========================================
Files 202 202
Lines 15253 15253
Branches 554 554
========================================
Hits 14324 14324
Misses 929 929
|
…ns in EditView component The EditView component now includes functionality to handle save and cancel actions. The useNavigate hook from react-router-dom is used to navigate to the appropriate route when the save or cancel actions are triggered. The onSave function is called when the save action is triggered, and it currently includes a placeholder comment for the update content mutation. The onCancel function is called when the cancel action is triggered, and it also navigates to the appropriate route.
…ContentFlow.md The stroke color for the authorizedUser class in the EditableContentFlow.md file has been changed from #f3e35d to yellow. This change improves the visual representation of the authorizedUser class in the diagram.
- Remove unused imports and variables - Replace the useParams hook with the useSlug custom hook - Move the hasNotFoundError function to a separate file for reusability The changes were made to improve code readability and maintainability. Unused imports and variables were removed to reduce clutter. The useParams hook was replaced with a custom hook called useSlug to simplify the code. The hasNotFoundError function was moved to a separate file to make it reusable in other parts of the codebase.
…arameters The useSlug hook is added to the project to generate slugs based on the route parameters. It uses the useParams hook from react-router-dom to get the name and subname parameters from the current route, and then calls the getSlug function to generate the slug. This hook can be used in components to easily generate slugs for dynamic routing.
…Error contains a NotFound error The hasNotFoundError utility function is added to the utils folder. This function takes an ApolloError as input and checks if it contains a NotFound error. It uses functional programming libraries like fp-ts to handle optional values and arrays in a more concise and expressive way. This utility function can be used to handle specific error cases in the application and provide appropriate error handling logic.
…for better code organization and reusability The useParams hook is replaced with the useSlug hook from the "../../common/utils/useSlug" module. This change improves code organization and reusability by abstracting the logic of extracting the slug from the URL into a separate hook.
The Edit component is added to handle the editing of pages in the EditablePages feature. It imports necessary dependencies such as Navigate from react-router-dom, useContentBySlugQuery from dicty-graphql-schema, and other utility functions. The component makes use of the useSlug hook to get the slug parameter from the URL. It then uses the useContentBySlugQuery to fetch the content data based on the slug. The component handles different scenarios such as loading state, successful data retrieval, error handling, and a fallback case.
The Edit component is now being used for /edit routes. The component fetches the content edit based on the slug of the URL and renders the EditView component if data is found.
…]/[subname] and [section]/[name] The show.tsx files are added to support the routes [section]/[name]/[subname]/show and [section]/[name]/show in the frontpage application. These files import the Show component from the EditablePages feature and define the access level as public using the ACCESS constant from the routes/types module. This allows the pages to be displayed publicly.
…act hook The useSlug custom React hook now includes a JSDoc comment that provides a brief description of the hook and its return value. This improves code documentation and makes it easier for other developers to understand and use the hook.
The new useSlug hook is added to the project to retrieve the slug based on the URL parameters. It uses the useParams and useLocation hooks from react-router-dom to get the necessary parameters. The hook is moved from the utils folder to the hooks folder for better organization and separation of concerns.
…ment of a path The `getLastPathSegment` utility function has been added to the `common/utils` directory. This function takes a `pathname` string as input and returns the last segment of the path. It uses functional programming libraries such as `fp-ts` to split the path, filter out empty segments, exclude specific view modes, and retrieve the last segment. If no last segment is found, an empty string is returned. This utility function can be used to extract the last part of a URL path for various purposes in the application.
…nction The getSlug function now supports an additional parameter called lastSegment. This allows for more flexibility in generating slugs by including the last segment of the route parameters in the generated slug.
…Editable.tsx, and Show.tsx The import path for the useSlug hook in Edit.tsx, Editable.tsx, and Show.tsx files has been updated to reflect the correct location of the hook in the common/hooks directory. This ensures that the hook is imported correctly and used as intended.
…e editable Three new files have been added to the about page: `edit.tsx`, `editable.tsx`, and `show.tsx`. These files are responsible for handling the editing, showing, and making the about page editable functionality. The `edit.tsx` file imports the `Edit` component from `../../features/EditablePages/Edit` and sets the access level to `ACCESS.private`. The `editable.tsx` file imports the `Editable` component from `../../features/EditablePages/Editable` and also sets the access level to `ACCESS.private`. Lastly, the `show.tsx` file imports the `Show` component from `../../features/EditablePages/Show` and sets the access level to `ACCESS.public`. These additions allow for the about page to be edited, shown, and made editable based on the access level.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.