Update the todoApp to be a proper kitchen sink app
#2812
Conversation
Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>
Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>
infomiho
changed the title
todoApp to be a proper kitchen sink app
Deploying wasp-docs-on-main with
|
| Latest commit: |
0615b42
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5f064aad.wasp-docs-on-main.pages.dev |
| Branch Preview URL: | https://miho-kitchen-sink.wasp-docs-on-main.pages.dev |
waspc/examples/todoApp/src/features/auth/pages/CustomSignupPage.tsx
Outdated
Show resolved
Hide resolved
| "Value of user.isOnAfterLoginHookCalled is true.", | ||
| ); | ||
| await expect( | ||
| page.getByTestId("hook-status-onAfterSignup").getByTestId("status"), |
There was a problem hiding this comment.
I've found out about data-testid helpers which enable us to be really precise when writing selectors in headless tests.
| const variantStyles: Record<ButtonVariant, string> = { | ||
| primary: | ||
| "bg-primary-500 hover:bg-primary-400 text-gray-800 border-transparent shadow-sm hover:shadow-md", | ||
| secondary: | ||
| "bg-gray-600 hover:bg-gray-700 text-white border-transparent shadow-sm hover:shadow-md", | ||
| outline: | ||
| "bg-transparent hover:bg-primary-50 text-primary-600 border-primary-300 hover:border-primary-400", | ||
| ghost: "bg-transparent hover:bg-gray-100 text-gray-700 border-transparent", | ||
| danger: | ||
| "bg-red-600 hover:bg-red-700 text-white border-transparent shadow-sm hover:shadow-md", | ||
| success: | ||
| "bg-green-600 hover:bg-green-700 text-white border-transparent shadow-sm hover:shadow-md", | ||
| warning: | ||
| "bg-amber-600 hover:bg-amber-700 text-white border-transparent shadow-sm hover:shadow-md", | ||
| }; |
There was a problem hiding this comment.
Not all variants are used now - but they should be useful for the future.
| import { Link, type Routes } from "wasp/client/router"; | ||
| import { cn } from "../cn"; | ||
|
|
||
| export function FeatureContainer({ children }: React.PropsWithChildren<{}>) { |
There was a problem hiding this comment.
This is wrapper for most demo pages which renders a sidebar with the list of the features on the left and the demo content on the right.
| } from "wasp/server/api"; | ||
|
|
||
| export const fooBar: FooBar = (_req, res, context) => { | ||
| if (!context.user) { |
There was a problem hiding this comment.
I found it better to do this (and easier to test in headless tests) than to return Hello, undefined
| @@ -0,0 +1,23 @@ | |||
| import { Link } from "wasp/client/router"; | |||
There was a problem hiding this comment.
Code stayed the same mostly, the difference is the import of customisationProps that are applied to all Auth UI components.
| @@ -0,0 +1,35 @@ | |||
| import { Link } from "wasp/client/router"; | |||
There was a problem hiding this comment.
Code stayed the same mostly, the difference is the import of customisationProps that are applied to all Auth UI components.
| @@ -0,0 +1,23 @@ | |||
| import { Link } from "wasp/client/router"; | |||
There was a problem hiding this comment.
Code stayed the same mostly, the difference is the import of customisationProps that are applied to all Auth UI components.
| @@ -0,0 +1,14 @@ | |||
| import { ForgotPasswordForm } from "wasp/client/auth"; | |||
There was a problem hiding this comment.
Code stayed the same mostly, the difference is the import of customisationProps that are applied to all Auth UI components.
| @@ -0,0 +1,45 @@ | |||
| import { FormItemGroup, SignupForm } from "wasp/client/auth"; | |||
There was a problem hiding this comment.
Code stayed the same mostly, the difference is the import of customisationProps that are applied to all Auth UI components.
| @@ -0,0 +1,99 @@ | |||
| import React, { useRef, useState } from "react"; | |||
There was a problem hiding this comment.
Code is mostly the same, just style updates and uses the new Button and Input compnents.
|
@FranjoMindek I've tried to address all of your comments, which were great and made the app much better IMHO |
| page.getByTestId("job-request").getByTestId("status"), | ||
| ).toContainText("pending"); | ||
|
|
||
| await page.waitForTimeout(2000); |
There was a problem hiding this comment.
Any other way to know how ong we need to wait here? Or to wait for something else? Waiting for fixed period of time is always fragile.
There was a problem hiding this comment.
Playwright tests usually have internal timeout and they retry the test until it passes. I put here extra 2000ms to be extra safe - but I can simply remove it and it would still work.
There was a problem hiding this comment.
But will it wait long enough? If so, sure, let's remove it. If not sure, then how do we know how long do we need to wait? How did you come up with 2s?
There was a problem hiding this comment.
I've now removed the waitForTimeout and it will work since Playwright keeps retrying for some time (5 seconds I believe, which is plenty). I've come up with 2s since that's the fake delay I added in the job to simulate longer processing.
There was a problem hiding this comment.
Ok great!
If we decided to stay with 2s, then it would be good if we at least documented why it is 2s (because of the delay in job being 2 seconds) or even better, connecting the two via code if not too hard.
This way we avoid it completely so even better.
RAW
waspc/examples/todoApp/src/features/operations/pages/TaskDetailPage.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Tested it on my local machine, gave a general look, works fine! 💪 Also, awesome job on look-and-feel, and organization 🔥
Just two things:
- the
.env.server.exampledoesn't have the SLACK_* env vars, so the app will not run if we donpm run env:pull - (see comment below)
|
@cprecioso the I'll put some dummy Slack credentials because sharing a real client ID and secret is problematic. Slack requires HTTPS even when working locally. The easiest way for me to get HTTPS is to use something like Localtunnel which gives me a way to have HTTPS for the server easily but then that URL is random (or at least you'd need to use a specific subdomain) which is then hard to share amongst team members. Having the dummy values will not crash the app, but to get functional Slack auth you'll need to get your own client ID and secret. |
|
@infomiho just a ping that there are some unresolved comments of mine, in case you missed them! |
|
@Martinsos Please take another look |
Took another look! Two main comments are resolved, great (I left comment on one for you to read and then resolve). I think one you maybe missed still: #2812 (comment) since there is no reaction (I didn't check the code though). But it is a tiny one so I won't be taking another look. I will approve now but with a "comment", not the "approve", since I reviewed only a tiny bit of a PR. |
Closes #2740
This PR touches only the
examples/todoAppand nothing in the compiler. The idea was to make it easy to see all the different demos we have in the app and make it a bit nicer visually so we can deploy it and share it with users to test Wasp features.Some screenshots
The way to think about this PR:
featuresdir. I've usedpagesto group pages at different dir levels andcomponentsto group components.ButtonandInputthat are used in most demos. I've generated them with LLMs and then minimized the code to still be useful to us.