Files
StevenandGitHub 4466ba436b chore(examples): use default prettier for examples/templates (#60530)
## Description
This PR ensures that the default prettier config is used for examples
and templates.

This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).

## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)

## Related

- Fixes #54402
- Closes #54409
2024-01-11 16:01:44 -07:00

84 lines
2.2 KiB
JavaScript

import { useUser, fetcher } from "../lib/hooks";
import useSWR from "swr";
function UserList() {
const { data: { users } = {} } = useSWR("/api/users", fetcher);
return (
<>
<h2>All users</h2>
{!!users?.length && (
<ul>
{users.map((user) => (
<li key={user.username}>
<pre>{JSON.stringify(user, null, 2)}</pre>
</li>
))}
<style jsx>{`
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
`}</style>
</ul>
)}
</>
);
}
export default function HomePage() {
const [user] = useUser();
return (
<>
<h1>
<a href="http://www.passportjs.org/">Passport.js</a> +{" "}
<a href="https://github.com/hoangvvo/next-connect">next-connect</a>{" "}
Example
</h1>
<h2>Steps to test the example:</h2>
<h3>Sign up</h3>
<ol>
<li>Click Sign up and enter a username and password.</li>
<li>You will be logged in and redirected home.</li>
<li>Click Logout. You will be redirected home.</li>
<li>
Try sign up again with the same username, you will see an error.
</li>
</ol>
<h3>Sign in</h3>
<ol>
<li>Click Login and login again using the same credential.</li>
<li>You will see an error if you use incorrect credential.</li>
<li>Otherwise, you will be authenticated and redirected home.</li>
</ol>
<h3>Edit profile</h3>
<ol>
<li>Click Profile</li>
<li>Enter a new name and click Update profile.</li>
<li>Notice how the name in Your profile has changed.</li>
<li>Click Delete profile</li>
<li>
The user is removed and is no longer shown in All users section in
Home
</li>
</ol>
{user && (
<>
<p>Currently logged in as:</p>
<pre>{JSON.stringify(user, null, 2)}</pre>
</>
)}
<UserList />
<style jsx>{`
li {
margin-bottom: 0.5rem;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
`}</style>
</>
);
}