search

dictyBase / frontendx

BSD 2-Clause "Simplified" License
0 stars 0 forks source link

feat: content pages #596

Closed ktun95 closed 4 months ago

ktun95 commented 9 months ago

if route link is protected, logged in user should be able to go there how to expose url to properly authorized user if the link is from the dropdown, change the url in the dropdown

list of all urls that are content editable

editable page -> show edit button if authorized /edit -> the writable editor

ktun95 commented 8 months ago

Exposing Editable Routes

1. Intercept Navigation to Content Routes

A component that checks if the user is an authorized content admin, and uses react-router's useLocation to check for changes in the URL to redirect the authorized user to the /editable version of the page if:

It should not redirect the user if the location already ends in editable or edit.

Drawbacks

2. Separate Page That Lists All Editable Content

When a user is logged in, expose a button on the header that links to a page that lists the routes to all editable content. Only from there will editable pages be accessible by link.

Drawbacks

3. Replace Navbar, Header, Footer when authorized user is logged in

In FrontpageApp component, check if the user has role content-admin, and conditionally render Navbar, Header, and Footer with /editable links.

Drawbacks

cybersiddhu commented 8 months ago

No 3. is a decent idea for the entry point of dictyBase. What you have to do is have another version of Header/Footer/Navbar with authorized links. So, the plan would be to start with ...

  1. Authorized version of Footer component
  2. Authorized version of Navabr component
  3. Authorized version of Header component. This will be tricky as the header itself check for auth in the code.

So, start with the footer component, and before you write any code do a walkthrough with me to show what changes you're planning or expect to make to get an authorized version of an existing component. Remember this will be used in all of your app, not exclusive to the frontpage.

ktun95 commented 8 months ago

Footer

1. New Component in footer package: FooterContentAdmin

~~Almost the same as the normal Footer component, but instead pass footerDataContentAdmin: Array<FooterItem> to the Links's data prop.~~

Separate footer composition logic into a curried function called createFooter

Footer: () => JSX.Element

becomes

createFooter: (data: Array<FooterItems>) => () => JSX.Element

Then we call the createFooter function twice with the appropriate data, which gives us one Footer component for unauthorized users and one Footer component for authorized content-admins.

This cuts down on code duplication compared to the previous approach.

2. New File in footer package: footerDataContentAdmin.ts

Almost the same as footerData.ts, but with the appropriate links changed to have /editable

3. Changes to dicty-frontpage Component: Call useAuthorization with arg ["content-admin"] in FrontPageApp

useAuthorization will return a boolean value which we can use to match the corresponding Footer component.

Not sure how the Header and Navbar will be handled, but if both of them are conditionally rendered the same as Footer, it might be worth making separate layouts, one for content-admin and one for non-content-admins

ktun95 commented 8 months ago

Footer

  1. Add optional data prop to Footer component with the default value set to which defaults to footerData which is kept in the footer package. Use functional programming approach to resolve optional data prop to footerData if data prop is provided.
  2. An auth version of the footerData, maybe authFooterData.json will be kept on the dicty-frontpage app.
  3. Create a wrapper component FooterWithAuth in dicty-frontpage which calls the useAuthorization hook with the argument ["content-admin"] to check authorization, then use displayOnAuthorized to conditionally render the Footer with or without the authFooterData passed to the items prop.
  4. Render FooterWithAuth in FrontPageApp
ktun95 commented 8 months ago

Navbar

Similar approach to Footer:

  1. stock-center and dicty-frontpage pass the same navbarItems to the Navbar items prop, so create a file navbarItems.ts in the navbar package and use that as the default value for the items prop. Use functional programming approach to resolve optional items prop to navbarItems if no items prop is provided.
  2. In dicty-frontpage, create a file of the auth version of navbarItems, authNavbarItems.json.
  3. Create a wrapper component NavbarWithAuth in dicty-frontpage which calls the useAuthorization hook with the argument ["content-admin"] to check authorization, then use displayOnAuthorized to conditionally render the Navbar with or without the authNavbarItems passed to the items prop.
  4. Render NavbarWithAuth in FrontPageApp
ktun95 commented 8 months ago

Header

Approach 1 -- Minimal Changes

Give Header component an isAuthorized flag that is passed down to the Links component. The Links component in the header package can use that flag to conditionally use the appropriate iconItems data

Approach 2 -- Get Appropriate Array of Links components in HeaderWithAuth

instead of the Links component using iconButtonPipe to map the Array<IconItemProperty> to Array<LinksIconButton> components, do this is HeaderWithAuth instead

HeaderWithAuth becomes responsible for:

Header will take an optional links prop, and pass a default value to the Links component if it does not receive a links prop from HeaderWithAuth.

ktun95 commented 8 months ago

Front Page

Explore pages:

Research pages:

Community pages:

Other:

Stock Center:

[Order Information] /stockcenter/information/order [Deposit Informtation] /stockcenter/information/deposit [Payment Informtation] /stockcenter/information/payment [FAQ] /stockcenter/information/faq

?? [About] /stockcenter/meetings ?? [Additional Materials] ?? [Home]

ktun95 commented 6 months ago 
└── about
    └── dfp-privacy-policy.json
    └── dfp-specialthanks.json
    └── dfp-technicalsummary.json
└── history
    └── dfp-bill-listserv.json
    └── dfp-bill-loomis.json
    └── dfp-bill.json
    └── dfp-dsc.json
    └── dfp-gernot.json
    └── dfp-harry-listserv.json
    └── dfp-harry.json
    └── dfp-harrylistserv-html.json
    └── dfp-jakob.json
    └── dfp-japan-relief.json
    └── dfp-john.json
    └── dfp-masashi.json
    └── dfp-maurice.json
    └── dfp-paul.json
    └── dfp-strain-history.json
└── in place
    └── dfp-annotations.json
    └── dfp-art.json
    └── dfp-citation.json
    └── dfp-codon.json
    └── dfp-conference.json
    └── dfp-gallery.json
    └── dfp-history.json
    └── dfp-jobs.json
    └── dfp-labs.json
    └── dfp-learn.json
    └── dfp-links.json
    └── dfp-listserv.json
    └── dfp-nomenclature.json
    └── dfp-ontology.json
    └── dfp-phenotype.json
    └── dfp-teach.json
    └── dfp-techniques.json
└── techniques
    └── dfp-calcium-phosphate-precipitation.json
    └── dfp-dapi-electroporation.json
    └── dfp-development.json
    └── dfp-dicty-storage.json
    └── dfp-electroporation.json
    └── dfp-fm-medium-html.json
    └── dfp-fm-medium.json
    └── dfp-genomic-dna-extraction-csci.json
    └── dfp-genomic-dna-extraction.json
    └── dfp-growth.json
    └── dfp-low-flo-medium.json
    └── dfp-mating-types.json
    └── dfp-media.json
    └── dfp-parasexual-genetics.json
    └── dfp-quick-genomic-dna-extraction.json
    └── dfp-remi-mutagenesis.json
    └── dfp-rnai-procedure.json
    └── dfp-rt-pcr.json
    └── dfp-soft-agar.json
    └── dfp-transformation-nc4.json
    └── dfp-transformation-protocols.json
    └── dfp-transformations.json