-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UI library implementation #89
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
UI look amazing, lots of code lots of suggestions :) happy to talk whenever you want
apps/web2/src/app/(authenticated)/insights/components/insights-grid.tsx
Outdated
Show resolved
Hide resolved
|
||
const handleRevoke = (): void => { | ||
void deAuthIntegration(props.integrationType).then(() => { | ||
router.refresh(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this seems excess, i am using a const [cardStatus, setCardStatus] = useState<IntegrationStatus>(status);
can't we do the same? unless the router.refresh is super cheap and refreshes only this card. Event then I would go with a state, but you know better
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, it was an easy to quickly make this work.
Added to the todo.
}, 0); | ||
}, []); | ||
|
||
// (backend response probably needs refactor to return object with IntegrationType as key) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
happy to oblige, let me know what do you want :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh right, this is because integrations are not dynamic (like insights) so instead of using stuff from the response's array like integrations[0], integrations[1] etc. or creating a map of integrations in the FE's code we should probably get that map from the response.
e.g.
{
"meta": {
id: 1,
.
.
},
"tiktok": {
id: 2,
.
.
}
}
apps/web2/src/app/(authenticated)/integrations/components/integrations-grid.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
one think that I did in web and I liked was that I had a suspence with fallback on the integrations. So if the user is on a slow connection it immediately paints the page with comming soon integrations and then it was repainted when the call was succeeding. You can emulate a very slow connection and see it (or I can artificially add a delay in the call and show it to you)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will look into it.
Thanks, I'll check them out later today! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2nd pass :)
apps/web2/src/app/page.tsx
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it is still there I believe :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
there are still there I believe
{props.loginProviders.length ? ( | ||
<Button | ||
component={Link} | ||
href={props.loginProviders[0].url} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
that's a bit dangerous. It couples FE/BE. What will happen if on the backend I add a new provider and I return the new one first?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
3rd pass
apps/web2/src/app/layout.tsx
Outdated
|
||
export default function RootLayout({ children }: { children: React.ReactNode }): React.ReactNode { | ||
return ( | ||
<html lang="en"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should be access this though the cookie. Also right now the correct value is en-gb, although I think we need to decouple LOCALE and Lang
Co-authored-by: Giorgos Trichopoulos <[email protected]>
Co-authored-by: Giorgos Trichopoulos <[email protected]>
Co-authored-by: Giorgos Trichopoulos <[email protected]>
Co-authored-by: Giorgos Trichopoulos <[email protected]>
Co-authored-by: Giorgos Trichopoulos <[email protected]>
Co-authored-by: Giorgos Trichopoulos <[email protected]>
Co-authored-by: Giorgos Trichopoulos <[email protected]>
0593f1e
to
53b39c4
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hype!!
Description
This is the new UI (aka web2).
It uses Mantine as its UI library for basic components, charts, forms & simple transitions.
Usage of route handlers & server actions has been implemented to handle data fetching/sending.
Known issues are:
insights?orderBy=cpm
TODO: