atrilabs-engine
atrilabs-engine copied to clipboard
Refactor the UI and data structure of `@atrilabs/app-page-layer`
Steps:
- Read the developer documentation.
- Go through the hooks already implemented in the
@atrilabs/app-page-layer/src/hooks
. The hooks will explain how to interact with the editor's state machine and also how to usecanvasApi.navigate
. You won't need to change the code in the hook. - Inside the
@atrilabs/app-page-layer/src/PageTree.tsx
:
- Write a code to format the
pageInfo
data received into a tree format suited for use with this tree component from ant design. - Use this tree component from ant design.
How to detect if a route is a directory too?
If the equation unixFilepath = routeObjectPath + "/index.(js|jsx|ts|tsx)"
holds true, then, there is a directory at routeObjectPath
.
Sample Tree
pages
[page_icon ] \ # /pages/index.jsx file
[page_icon ] careers # /pages/careers.jsx file
[folder_icon] offices # a folder without an index.jsx file
[page_icon] India # /pages/offices/India.jsx file
[page_icon] USA # /pages/offices/USA.jsx file
[folder_icon] blogs # a folder with index.jsx file
[page_icon ] \ # index.js route
[page_icon ] react # /pages/blogs/react.jsx file
[folder_icon] atri # /pages/blogs/atri.jsx file
[page_icon ] ui
[page_icon ] python backend