poulainv / tottem Goto Github PK

Animation TBD

Using Apollo cache as global store - for remote and local data, is very convenient.

However, while I've never used redux, I think that the most important thing about it is implementing flux: an event driven architecture in the front-end that separate logic and ensure separation of concerns.

I don't know how to implement that with Apollo. The doc says

When mutation modifies multiple entities, or if it creates or deletes entities, the Apollo Client cache is not automatically updated to reflect the result of the mutation. To resolve this, your call to useMutation can include an update function.

Adding an update function in one part of the application that handle all cache updates; by updating queries and/or fragments for the all application, is exactly what we want to avoid in Flux / Event driven architecture.

To illustrate this, let me give a single simple example. Here, we have (at least 3 linked components)

1. InboxCount
Component that show the number of Inbox items in SideNav

query getInboxCount {
    inbox {
        id
        count
    }
}

2. Inbox list items
Component that displays items in Inbox page

query getInbox {
    inbox {
        id
        items {
            ...ItemPreview
            ...ItemDetail
        }
    }
}

Both of those components read data from those GQL queries from auto generated hooks ie. const { data, loading } = useGetInboxItemsQuery()

3. AddItem
Component that creates a new item. Because it creates a new entity I need to manually update cache. So I am forced to write

(pseudo-code)

    const [addItem, { loading }] = useCreateItemMutation({
        update(cache, { data }) {
            const cachedData = cache.readQuery<GetInboxItemsQuery>({
                query: GetInboxItemsDocument,
            })

            if (cachedData?.inbox) {

                // 1. Update items list GetInboxItemsQuery
                const newItems = cachedData.inbox.items.concat(data.items)
                cache.writeQuery({
                    query: GetInboxItemsDocument,
                    data: {
                        inbox: {
                            id: 'me',
                            __typename: 'Inbox',
                            items: newItems,
                        },
                    },
                })

               // 2. Update another query wrapped into another reusable method, here
                setInboxCount(cache, newItems.length)
            }
        },
    })

Here, my AddItem component must be aware of my different other queries / fragments declared in my application 😭Moreover, as it's quite verbose, complexity is increasing very fast in update method. Especially when multiple list / queries should be updated like here

Does anyone have recommendations about implementing a more independent components? Am I wrong with how I created my queries?

We may want to download and store images on S3 via lambda

• Signing in to the platform should prompt the user to pick a username.
• A username should be unique
  The user will be pushed to the db, with empty collections for now.
  Bonus: replace the "sign in to auth0.com" inside the google login dialog
• Ask for OAuth credentials on google account
• Create the /username page on account creation

The username should be unique, the user will access its profile through tottem.app/username

It should probably be done outside of the Auth0 workflow - so we can check for username uniqueness.

What database does this project use?
Postgresql on your server?

[From an extenal user test]

When scrolling horizontally on a collection on mobile, it doesn't feel intuitive that some items are hidden (with only the first 4 displayed) and that you have to click "More" to see the rest of the items.

My proposition:

• Either, on mobile, display a "+ X more" item at the end of the scrollable div, kind of like:

(mockup done in 30s don't be harsh😛)

• Or simply let's not limit to the first 4 on mobile and allow the user to directly see the whole collection without having to click?

Available in figma

Back-end requested should be authenticated via auth0 in order to allow write operation, notably

Main layout has different margin, let's customise grommet theme to be more accurate

On Firefox 68.0.2, the cards aren't properly displayed when clicking "See More":

Also, clicking "See More" on the top section also expands the bottom section, adding a blank space:

Let's play with Auth0 and see how it goes

We should define behaviour on large and small screen when too many sections are set to fill only one line. I don't expect this on large screen soon, but on small screen is almost already an issue. I suggest that the tab names should be horizontally scrollable

Could anyone guide me how to use the next-auth package (in this source code) for Authentication instead of using the third-party authentication which is super expensive.

Only 4 items are displayed by default

A button View more should be displayed when more than 4 items are specified. Additional items are loaded on the same page after current elements and button Show less allow to hide them.

Design still to be improved

When the screen is resizing screen grommet size medium, the cover image is cropped. It should not

When I scroll down, the browser bar should be hidden

We may want to consider using Airtable, Spreedsheet, ... at first. May be using Type form to allow user enter data...

For some major profiles user can have a lot of data. Tabs allow items to be categorised into different section. I suggest to create new field section in items data in order to specify Tab names. Corner cases should be discussed. Tab system should be optional.

For now only one profile is available from static data stored in /data folder. Data structure should be defined in order to access specific profile depending on url

It's currently Tabs without state

We should have tabs component styled as specified in figma files

Awesome project! Thanks for sharing 🙏 .

I'm attempting to configure a local setup with my own Auth0 account, but have run into a few head scratchers.

Would you please describe how you configured your app and API in Auth0, including any special roles, permissions, etc? This might be something to add to the readme documentation, as well 🤷 ?

Also, I noticed a few places where 'tottem.app' URLs are hard coded.. Any reasons these don't reference env variables?

Thanks!
Ethan

Twitter card image is not displayed because meta html tag is missing

@deonclem I've written a lot of dynamic code to make it responsive with flexbox. It was quite complicated and not sure that it's easy to understand and maintain. Do you think that Grid could help for this ? I see this code example on grommet storybook.

https://storybook.grommet.io/?path=/story/grid--responsive-grid

When I resized the screen flexbox cards are wrapped but on my screen the second lines is not aligned. It's due to inserted box (because of gap parameters). I wonder if we should use Grid instead of flexbox to handle this behaviour. Wdyt?

I won't make a video but, especially on mobile the experience is not cool enough. I feel the card hover display is a bit delayed.
Moreover, there is a bug on mobile. To reproduce :

• Go home page with mobile phone
• Click on a card, see the hover card
• Change tab
• Click on a card from this new tab section, nothing happen
• Click on another card, the hover card is displayed

Expected behaviour
Once section changed the hover card should be displayed when it's clicked on mobile!

I tried an implemention with CSS & JS but I am not sure about elegance & performance. Can you take a look @deonclem ?

Images loading will probably be the major performance issue. A lot of different solution exist to manage it: size & format optimisation, LQIP, lazy loading.
Some of them are implemented in https://github.com/stereobooster/react-ideal-image for instance. It may be worth to take a look once images will be stored in own CDN.

Main interested feature of Grommet are not used anymore (ResponsiveContext, Typography Theming), since usage of SSR with NextJs
As we will soon build more complex composant (Affix, Input, ...). We should use a more robust framework

Awesome project! Thanks for sharing 🙏 .

I'm attempting to configure a local setup with my own Auth0 account, but have run into a few head scratchers.

Would you please describe how you configured your app and API in Auth0, including any special roles, permissions, etc? This might be something to add to the readme documentation, as well 🤷 ?

Also, I noticed a few places where 'tottem.app' URLs are hard coded.. Any reasons these don't reference env variables?

Thanks!
Ethan

When the author name is too long, the picto gram is so small!

Implement cards component of those components

• Movies
• Article
• Influencers
• Podcast

Then add sample data to display those fixtures in profile!

To be responsive, collections should be scrollable on mobile .