---
# System prepended metadata

title: Client redesign v2

---

# Client redesign v2

## Authorization
Needs deeper discussion!

## Routing + Context
Combine routing and context because they are tightly coupled
- [ ] Clean up routing 
    - [ ] move loading logic from routes to containers, contexts or hooks (overlaps with the [components split](#Components)). Keep in mind the breadcrumb updates.
    - [ ] split the `/identity` route from rest of the application.
        - [ ] Do not load uneccessary data.
        - [ ] Do not show left side navigation bar.
        - [ ] Navigation to `Home` can be done by clicking on the `Alkemio logo`
  
- [ ] Optimize dataloading. To be identified when a context is needed (most work here is done)
    - [ ] Configuration context
    - [ ] Authentication/kratos context
    - [ ] Graphql context
    - [ ] User context (currently logged user)
    - [ ] Ecoverses (plural) context
    - [ ] Ecoverse (singular) context
    - [ ] Organization context
    - [ ] Challenge context
    - [ ] Opportunity context

- [ ] Improve breadcrumb

## Components + Pages

- [ ] Split big components to:
    - [ ] business logic - containers or hooks
    - [ ] presentational components
- [ ] Combine splitted components into views
- [ ] Reuse views in pages


**Example:** `pages/Admin/Community/CommunityUpdatesPage.tsx`

*NS>> Best here to have a list of the key ones to be refactored, and we prioritise each? This is currently open ended.*

## SEO Optimizations (new)
- [ ] [React Helmet](https://www.npmjs.com/package/react-helmet) 

## MUI (Formerly Material UI)

- [ ] Upgrade to MUI 5.0 With MUI 5 unstyled compnents are shipped which allows create complete theme from srach. The default MUI theme is still available. The actuall upgrade should be around hour. There is a [guide](https://mui.com/guides/migration-v4/) and [codemods](https://mui.com/guides/migration-v4/#run-codemods) that can be run.
*NS>> This sounds like we should just do it + not talk about it!*
- [ ] Clean up core components (UX/UI Design needed!)
    - [ ] **Typography** - start using the MUI `Typography` component
    - [ ] **makeStyles** - use `makeStyles` instead of our `createStyles` - the last one is just an export of makeStyles.
    - [ ] **Cards** - migrate basic cards to relay on MUI `Card`
    - [ ] **Button**



## Testing
- [ ] Unit testing
    - [ ] presentational components
    - [ ] composites (example: `ApplicationButton`)
    - [ ] containers
    - [ ] hooks

## Priorites:
0. Authorization discussion
1. Routing + Context
2. Components
3. SEO Optimizations 
4. MUI
5. Testing

