+
+
+ );
+}
+```
+
+Then re-export this component in the feed page’s public API, the `pages/feed/index.ts` file:
+
+
+
+```ts title="pages/feed/index.ts"
+export { FeedPage } from "./ui/FeedPage";
+```
+
+Now connect it to the root route. In Remix, routing is file-based, and the route files are located in the `app/routes` folder, which nicely coincides with Feature-Sliced Design.
+
+Use the `FeedPage` component in `app/routes/_index.tsx`:
+
+```tsx title="app/routes/_index.tsx"
+import type { MetaFunction } from "@remix-run/node";
+import { FeedPage } from "pages/feed";
+
+export const meta: MetaFunction = () => {
+ return [{ title: "Conduit" }];
+};
+
+export default FeedPage;
+```
+
+Then, if you run the dev server and open the application, you should see the Conduit banner!
+
+
+
+### API client
+
+To talk to the RealWorld backend, let’s create a convenient API client in Shared. Create two segments, `api` for the client and `config` for variables like the backend base URL:
+
+```bash
+npx fsd shared --segments api config
+```
+
+Then create `shared/config/backend.ts`:
+
+```tsx title="shared/config/backend.ts"
+export const backendBaseUrl = "https://api.realworld.io/api";
+```
+
+```tsx title="shared/config/index.ts"
+export { backendBaseUrl } from "./backend";
+```
+
+Since the RealWorld project conveniently provides an [OpenAPI specification](https://github.com/gothinkster/realworld/blob/main/api/openapi.yml), we can take advantage of auto-generated types for our client. We will use [the `openapi-fetch` package](https://openapi-ts.pages.dev/openapi-fetch/) that comes with an additional type generator.
+
+Run the following command to generate up-to-date API typings:
+
+```bash
+npm run generate-api-types
+```
+
+This will create a file `shared/api/v1.d.ts`. We will use this file to create a typed API client in `shared/api/client.ts`:
+
+```tsx title="shared/api/client.ts"
+import createClient from "openapi-fetch";
+
+import { backendBaseUrl } from "shared/config";
+import type { paths } from "./v1";
+
+export const { GET, POST, PUT, DELETE } = createClient
+
+ conduit
+A place to share your knowledge.
+
+
+ );
+}
+```
+
+The like button doesn’t do anything for now, we will fix that when we get to the article reader page and implement the liking functionality.
+
+Now we can fetch the articles and render out a bunch of these cards. Fetching data in Remix is done with *loaders* — server-side functions that fetch exactly what a page needs. Loaders interact with the API on the page’s behalf, so we will put them in the `api` segment of a page:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json } from "@remix-run/node";
+
+import { GET } from "shared/api";
+
+export const loader = async () => {
+ const { data: articles, error, response } = await GET("/articles");
+
+ if (error !== undefined) {
+ throw json(error, { status: response.status });
+ }
+
+ return json({ articles });
+};
+```
+
+To connect it to the page, we need to export it with the name `loader` from the route file:
+
+```tsx title="pages/feed/index.ts"
+export { FeedPage } from "./ui/FeedPage";
+export { loader } from "./api/loader";
+```
+
+```tsx title="app/routes/_index.tsx"
+import type { MetaFunction } from "@remix-run/node";
+import { FeedPage } from "pages/feed";
+
+export { loader } from "pages/feed";
+
+export const meta: MetaFunction = () => {
+ return [{ title: "Conduit" }];
+};
+
+export default FeedPage;
+```
+
+And the final step is to render these cards in the feed. Update your `FeedPage` with the following code:
+
+```tsx title="pages/feed/ui/FeedPage.tsx"
+import { useLoaderData } from "@remix-run/react";
+
+import type { loader } from "../api/loader";
+import { ArticlePreview } from "./ArticlePreview";
+
+export function FeedPage() {
+ const { articles } = useLoaderData
+
+ 
+
+
+
+
+
+ {article.author.username}
+
+
+ {new Date(article.createdAt).toLocaleDateString(undefined, {
+ dateStyle: "long",
+ })}
+
+
+
+ {article.title}
+{article.description}
+ Read more... +-
+ {article.tagList.map((tag) => (
+
- + {tag} + + ))} +
+
+ );
+}
+```
+
+### Filtering by tag
+
+Regarding the tags, our job is to fetch them from the backend and to store the currently selected tag. We already know how to do fetching — it’s another request from the loader. We will use a convenience function `promiseHash` from a package `remix-utils`, which is already installed.
+
+Update the loader file, `pages/feed/api/loader.ts`, with the following code:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+ );
+}
+```
+
+Then we need to use the `tag` search parameter in our loader. Change the `loader` function in `pages/feed/api/loader.ts` to the following:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+
+
+
+ Popular Tags
+ + +
+
+ );
+}
+```
+
+So that’s also done. There’s also the tab list that can be similarly implemented, but let’s hold on to that until we implement authentication. Speaking of which!
+
+### Authentication
+
+Authentication involves two pages — one to login and another to register. They are mostly the same, so it makes sense to keep them in the same slice, `sign-in`, so that they can reuse code if needed.
+
+Create `RegisterPage.tsx` in the `ui` segment of `pages/sign-in` with the following content:
+
+```tsx title="pages/sign-in/ui/RegisterPage.tsx"
+import { Form, Link, useActionData } from "@remix-run/react";
+
+import type { register } from "../api/register";
+
+export function RegisterPage() {
+ const registerData = useActionData
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+
+
+
+ Popular Tags
+ + +
+
+ );
+}
+```
+
+We have a broken import to fix now. It involves a new segment, so create that:
+
+```bash
+npx fsd pages sign-in -s api
+```
+
+However, before we can implement the backend part of registering, we need some infrastructure code for Remix to handle sessions. That goes to Shared, in case any other page needs it.
+
+Put the following code in `shared/api/auth.server.ts`. This is highly Remix-specific, so don’t worry too much about it, just copy-paste:
+
+```tsx title="shared/api/auth.server.ts"
+import { createCookieSessionStorage, redirect } from "@remix-run/node";
+import invariant from "tiny-invariant";
+
+import type { User } from "./models";
+
+invariant(
+ process.env.SESSION_SECRET,
+ "SESSION_SECRET must be set for authentication to work",
+);
+
+const sessionStorage = createCookieSessionStorage<{
+ user: User;
+}>({
+ cookie: {
+ name: "__session",
+ httpOnly: true,
+ path: "/",
+ sameSite: "lax",
+ secrets: [process.env.SESSION_SECRET],
+ secure: process.env.NODE_ENV === "production",
+ },
+});
+
+export async function createUserSession({
+ request,
+ user,
+ redirectTo,
+}: {
+ request: Request;
+ user: User;
+ redirectTo: string;
+}) {
+ const cookie = request.headers.get("Cookie");
+ const session = await sessionStorage.getSession(cookie);
+
+ session.set("user", user);
+
+ return redirect(redirectTo, {
+ headers: {
+ "Set-Cookie": await sessionStorage.commitSession(session, {
+ maxAge: 60 * 60 * 24 * 7, // 7 days
+ }),
+ },
+ });
+}
+
+export async function getUserFromSession(request: Request) {
+ const cookie = request.headers.get("Cookie");
+ const session = await sessionStorage.getSession(cookie);
+
+ return session.get("user");
+}
+
+export async function requireUser(request: Request) {
+ const user = await getUserFromSession(request);
+
+ if (user === null) {
+ throw redirect("/login");
+ }
+
+ return user;
+}
+```
+
+And also export the `User` model from the `models.ts` file right next to it:
+
+```tsx title="shared/api/models.ts"
+import type { components } from "./v1";
+
+export type Article = components["schemas"]["Article"];
+export type User = components["schemas"]["User"];
+```
+
+Before this code can work, the `SESSION_SECRET` environment variable needs to be set. Create a file called `.env` in the root of the project, write `SESSION_SECRET=` and then mash some keys on your keyboard to create a long random string. You should get something like this:
+
+```bash title=".env"
+SESSION_SECRET=dontyoudarecopypastethis
+```
+
+Finally, add some exports to the public API to make use of this code:
+
+```tsx title="shared/api/index.ts"
+export { GET, POST, PUT, DELETE } from "./client";
+
+export type { Article } from "./models";
+
+export { createUserSession, getUserFromSession, requireUser } from "./auth.server";
+```
+
+Now we can write the code that will talk to the RealWorld backend to actually do the registration. We will keep that in `pages/sign-in/api`. Create a file called `register.ts` and put the following code inside:
+
+```tsx title="pages/sign-in/api/register.ts"
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+
+import { POST, createUserSession } from "shared/api";
+
+export const register = async ({ request }: ActionFunctionArgs) => {
+ const formData = await request.formData();
+ const username = formData.get("username")?.toString() ?? "";
+ const email = formData.get("email")?.toString() ?? "";
+ const password = formData.get("password")?.toString() ?? "";
+
+ const { data, error } = await POST("/users", {
+ body: { user: { email, password, username } },
+ });
+
+ if (error) {
+ return json({ error }, { status: 400 });
+ } else {
+ return createUserSession({
+ request: request,
+ user: data.user,
+ redirectTo: "/",
+ });
+ }
+};
+```
+
+```tsx title="pages/sign-in/index.ts"
+export { RegisterPage } from './ui/RegisterPage';
+export { register } from './api/register';
+```
+
+Almost done! Just need to connect the page and action to the `/register` route. Create `register.tsx` in `app/routes`:
+
+```tsx title="app/routes/register.tsx"
+import { RegisterPage, register } from "pages/sign-in";
+
+export { register as action };
+
+export default RegisterPage;
+```
+
+Now if you go to [http://localhost:3000/register](http://localhost:3000/register), you should be able to create a user! The rest of the application won’t react to this yet, we’ll address that momentarily.
+
+In a very similar way, we can implement the login page. Give it a try or just grab the code and move on:
+
+```tsx title="pages/sign-in/api/sign-in.ts"
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+
+import { POST, createUserSession } from "shared/api";
+
+export const signIn = async ({ request }: ActionFunctionArgs) => {
+ const formData = await request.formData();
+ const email = formData.get("email")?.toString() ?? "";
+ const password = formData.get("password")?.toString() ?? "";
+
+ const { data, error } = await POST("/users/login", {
+ body: { user: { email, password } },
+ });
+
+ if (error) {
+ return json({ error }, { status: 400 });
+ } else {
+ return createUserSession({
+ request: request,
+ user: data.user,
+ redirectTo: "/",
+ });
+ }
+};
+```
+
+```tsx title="pages/sign-in/ui/SignInPage.tsx"
+import { Form, Link, useActionData } from "@remix-run/react";
+
+import type { signIn } from "../api/sign-in";
+
+export function SignInPage() {
+ const signInData = useActionData
+
+
+
+
+
+ Sign up
++ Have an account? +
+ + {registerData?.error && ( +-
+ {registerData.error.errors.body.map((error) => (
+
- {error} + ))} +
+
+ );
+}
+```
+
+```tsx title="pages/sign-in/index.ts"
+export { RegisterPage } from './ui/RegisterPage';
+export { register } from './api/register';
+export { SignInPage } from './ui/SignInPage';
+export { signIn } from './api/sign-in';
+```
+
+```tsx title="app/routes/login.tsx"
+import { SignInPage, signIn } from "pages/sign-in";
+
+export { signIn as action };
+
+export default SignInPage;
+```
+
+Now let’s give the users a way to actually get to these pages.
+
+### Header
+
+As we discussed in part 1, the app header is commonly placed either in Widgets or in Shared. We will put it in Shared because it’s very simple and all the business logic can be kept outside of it. Let’s create a place for it:
+
+```bash
+npx fsd shared ui
+```
+
+Now create `shared/ui/Header.tsx` with the following contents:
+
+```tsx title="shared/ui/Header.tsx"
+import { useContext } from "react";
+import { Link, useLocation } from "@remix-run/react";
+
+import { CurrentUser } from "../api/currentUser";
+
+export function Header() {
+ const currentUser = useContext(CurrentUser);
+ const { pathname } = useLocation();
+
+ return (
+
+ );
+}
+```
+
+Export this component from `shared/ui`:
+
+```tsx title="shared/ui/index.ts"
+export { Header } from "./Header";
+```
+
+In the header, we rely on the context that’s kept in `shared/api`. Create that as well:
+
+```tsx title="shared/api/currentUser.ts"
+import { createContext } from "react";
+
+import type { User } from "./models";
+
+export const CurrentUser = createContext
+
+
+
+
+
+ Sign in
++ Need an account? +
+ + {signInData?.error && ( +-
+ {signInData.error.errors.body.map((error) => (
+
- {error} + ))} +
+
+ );
+}
+```
+
+```tsx title="pages/feed/ui/Pagination.tsx"
+import { Form, useLoaderData, useSearchParams } from "@remix-run/react";
+import { ExistingSearchParams } from "remix-utils/existing-search-params";
+
+import { LIMIT, type loader } from "../api/loader";
+
+export function Pagination() {
+ const [searchParams] = useSearchParams();
+ const { articles } = useLoaderDataPopular Tags
+ + +
+
+ );
+}
+```
+
+We also need to account for the new tab in the loader function:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET, requireUser } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+This code will send a POST request to `/article/:slug` with `_action=favorite` to mark the article as favorite. It won’t work yet, but as we start working on the article reader, we will implement this too.
+
+And with that we are officially done with the feed! Yay!
+
+### Article reader
+
+First, we need data. Let’s create a loader:
+
+```bash
+npx fsd pages article-reader -s api
+```
+
+```tsx title="pages/article-read/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import invariant from "tiny-invariant";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET, getUserFromSession } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+
+
+
+ {article.author.username}
+
+
+ {new Date(article.createdAt).toLocaleDateString(undefined, {
+ dateStyle: "long",
+ })}
+
+
+
+ {article.title}
+{article.description}
+ Read more... +-
+ {article.tagList.map((tag) => (
+
- + {tag} + + ))} +
+
+ );
+}
+```
+
+What’s more interesting is the `ArticleMeta` and `Comments`. They contain write operations such as liking an article, leaving a comment, etc. To get them to work, we first need to implement the backend part. Create `action.ts` in the `api` segment of the page:
+
+```tsx title="pages/article-read/api/action.ts"
+import { redirect, type ActionFunctionArgs } from "@remix-run/node";
+import { namedAction } from "remix-utils/named-action";
+import { redirectBack } from "remix-utils/redirect-back";
+import invariant from "tiny-invariant";
+
+import { DELETE, POST, requireUser } from "shared/api";
+
+export const action = async ({ request, params }: ActionFunctionArgs) => {
+ const currentUser = await requireUser(request);
+
+ const authorization = { Authorization: `Token ${currentUser.token}` };
+
+ const formData = await request.formData();
+
+ return namedAction(formData, {
+ async delete() {
+ invariant(params.slug, "Expected a slug parameter");
+ await DELETE("/articles/{slug}", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirect("/");
+ },
+ async favorite() {
+ invariant(params.slug, "Expected a slug parameter");
+ await POST("/articles/{slug}/favorite", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async unfavorite() {
+ invariant(params.slug, "Expected a slug parameter");
+ await DELETE("/articles/{slug}/favorite", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async createComment() {
+ invariant(params.slug, "Expected a slug parameter");
+ const comment = formData.get("comment");
+ invariant(typeof comment === "string", "Expected a comment parameter");
+ await POST("/articles/{slug}/comments", {
+ params: { path: { slug: params.slug } },
+ headers: { ...authorization, "Content-Type": "application/json" },
+ body: { comment: { body: comment } },
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async deleteComment() {
+ invariant(params.slug, "Expected a slug parameter");
+ const commentId = formData.get("id");
+ invariant(typeof commentId === "string", "Expected an id parameter");
+ const commentIdNumeric = parseInt(commentId, 10);
+ invariant(
+ !Number.isNaN(commentIdNumeric),
+ "Expected a numeric id parameter",
+ );
+ await DELETE("/articles/{slug}/comments/{id}", {
+ params: { path: { slug: params.slug, id: commentIdNumeric } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async followAuthor() {
+ const authorUsername = formData.get("username");
+ invariant(
+ typeof authorUsername === "string",
+ "Expected a username parameter",
+ );
+ await POST("/profiles/{username}/follow", {
+ params: { path: { username: authorUsername } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async unfollowAuthor() {
+ const authorUsername = formData.get("username");
+ invariant(
+ typeof authorUsername === "string",
+ "Expected a username parameter",
+ );
+ await DELETE("/profiles/{username}/follow", {
+ params: { path: { username: authorUsername } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ });
+};
+```
+
+Export that from the slice and then from the route. While we’re at it, let’s also connect the page itself:
+
+```tsx title="pages/article-read/index.ts"
+export { ArticleReadPage } from "./ui/ArticleReadPage";
+export { loader } from "./api/loader";
+export { action } from "./api/action";
+```
+
+```tsx title="app/routes/article.$slug.tsx"
+import { ArticleReadPage } from "pages/article-read";
+
+export { loader, action } from "pages/article-read";
+
+export default ArticleReadPage;
+```
+
+Now, even though we haven’t implemented the like button on the reader page yet, the like button in the feed will start working! That’s because it’s been sending “like” requests to this route. Give that a try.
+
+`ArticleMeta` and `Comments` are, again, a bunch of forms. We’ve done this before, let’s grab their code and move on:
+
+```tsx title="pages/article-read/ui/ArticleMeta.tsx"
+import { Form, Link, useLoaderData } from "@remix-run/react";
+import { useContext } from "react";
+
+import { CurrentUser } from "shared/api";
+import type { loader } from "../api/loader";
+
+export function ArticleMeta() {
+ const currentUser = useContext(CurrentUser);
+ const { article } = useLoaderData
+
+
+
+
+ {article.article.title}
+ +
+
+ +
+
+
+
+
+
+ -
+
- + {tag} + + ))} +
{article.article.body}
+ {article.article.tagList.map((tag) => ( ++ +
+
+
+
+
+
+ {currentUser !== null ? (
+
+ ) : (
+
+ );
+}
+```
+
+And with that our article reader is also complete! The buttons to follow the author, like a post, and leave a comment should now function as expected.
+
+
+
+ )}
+
+ {comments.comments.map((comment) => (
+
+
+ + Sign in + or + Sign up + to add comments on this article. +
+
+
+ ))}
+
+
+
+ {comment.body}
+
+
+ 
+
+
+
+ {comment.author.username}
+
+ {comment.createdAt}
+ {comment.author.username === currentUser?.username && (
+
+
+
+ )}
+
+
+
+ );
+}
+```
+
+This page gets the current article (unless we’re writing from scratch) and fills in the corresponding form fields. We’ve seen this before. The interesting part is `FormErrors`, because it will receive the validation result and display it to the user. Let’s take a look:
+
+```tsx title="pages/article-edit/ui/FormErrors.tsx"
+import { useActionData } from "@remix-run/react";
+import type { action } from "../api/action";
+
+export function FormErrors() {
+ const actionData = useActionData
+
+
+
+
+
+ -
+ {actionData.errors.map((error) => (
+
- {error} + ))} +
+ {tagListState.map((tag) => (
+
+
+ [" ", "Enter"].includes(e.key) && removeTag(tag)
+ }
+ onClick={() => removeTag(tag)}
+ >{" "}
+ {tag}
+
+ ))}
+
+
+ );
+}
+```
+
+Now, for the API part. The loader should look at the URL, and if it contains an article slug, that means we’re editing an existing article, and its data should be loaded. Otherwise, return nothing. Let’s create that loader:
+
+```ts title="pages/article-edit/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+
+import { GET, requireUser } from "shared/api";
+
+async function throwAnyErrorsДобро пожаловать! Этот раздел помогает бегло познакомиться с применением Feature-Sliced Design и основами методологии. Также вы поймете ключевые преимущества методологии и причины ее создания.
-## Главное {#main} - -import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" -import { RocketOutlined, BuildOutlined, PlaySquareOutlined } from "@ant-design/icons"; -
+
+
+ );
+}
+```
+
+Затем ре-экспортируйте этот компонент в публичном API страницы фида, файл `pages/feed/index.ts`:
+
+```tsx title="pages/feed/index.ts"
+export { FeedPage } from "./ui/FeedPage";
+```
+
+Теперь подключите его к корневому маршруту. В Remix маршрутизация работает на файлах, и файлы маршрутов находятся в папке `app/routes`, что хорошо сочетается с Feature-Sliced Design.
+
+Используйте компонент `FeedPage` в `app/routes/_index.tsx`:
+
+```tsx title="app/routes/_index.tsx"
+import type { MetaFunction } from "@remix-run/node";
+import { FeedPage } from "pages/feed";
+
+export const meta: MetaFunction = () => {
+ return [{ title: "Conduit" }];
+};
+
+export default FeedPage;
+```
+
+Затем, если вы запустите dev-сервер и откроете приложение, вы должны увидеть баннер Conduit!
+
+
+
+### API-клиент
+
+Чтобы общаться с бэкендом RealWorld, давайте создадим удобный API-клиент в Shared. Создайте два сегмента, `api` для клиента и `config` для таких переменных как базовый URL бэкенда:
+
+```bash
+npx fsd shared --segments api config
+```
+
+Затем создайте `shared/config/backend.ts`:
+
+```tsx title="shared/config/backend.ts"
+export const backendBaseUrl = "https://api.realworld.io/api";
+```
+
+```tsx title="shared/config/index.ts"
+export { backendBaseUrl } from "./backend";
+```
+
+Поскольку проект RealWorld предоставляет [спецификацию OpenAPI](https://github.com/gothinkster/realworld/blob/main/api/openapi.yml), мы можем автоматически сгенерировать типы для нашего API-клиента. Мы будем использовать [пакет `openapi-fetch`](https://openapi-ts.pages.dev/openapi-fetch/), в котором дополнительно есть генератор типов.
+
+Выполните следующую команду, чтобы сгенерировать актуальные типы для API:
+
+```bash
+npm run generate-api-types
+```
+
+В результате будет создан файл `shared/api/v1.d.ts`. Мы воспользуемся этим файлом в `shared/api/client.ts` для создания типизированного клиента API:
+
+```tsx title="shared/api/client.ts"
+import createClient from "openapi-fetch";
+
+import { backendBaseUrl } from "shared/config";
+import type { paths } from "./v1";
+
+export const { GET, POST, PUT, DELETE } = createClient
+
+ conduit
+A place to share your knowledge.
+
+
+ );
+}
+```
+
+Кнопка "Мне нравится" пока ничего не делает, мы исправим это, когда перейдем на страницу чтения статей и реализуем функцию "Мне нравится".
+
+Теперь мы можем получить статьи и отобразить кучу этих карточек предпросмотра. Получение данных в Remix осуществляется с помощью *загрузчиков* — серверных функций, которые собирают те данные, которые нужны странице. Загрузчики взаимодействуют с API от имени страницы, поэтому мы поместим их в сегмент `api` страницы:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json } from "@remix-run/node";
+
+import { GET } from "shared/api";
+
+export const loader = async () => {
+ const { data: articles, error, response } = await GET("/articles");
+
+ if (error !== undefined) {
+ throw json(error, { status: response.status });
+ }
+
+ return json({ articles });
+};
+```
+
+Чтобы подключить его к странице, нам нужно экспортировать его с именем `loader` из файла маршрута:
+
+```tsx title="pages/feed/index.ts"
+export { FeedPage } from "./ui/FeedPage";
+export { loader } from "./api/loader";
+```
+
+```tsx title="app/routes/_index.tsx"
+import type { MetaFunction } from "@remix-run/node";
+import { FeedPage } from "pages/feed";
+
+export { loader } from "pages/feed";
+
+export const meta: MetaFunction = () => {
+ return [{ title: "Conduit" }];
+};
+
+export default FeedPage;
+```
+
+И последний шаг — отображение этих карточек в ленте. Обновите `FeedPage` следующим кодом:
+
+```tsx title="pages/feed/ui/FeedPage.tsx"
+import { useLoaderData } from "@remix-run/react";
+
+import type { loader } from "../api/loader";
+import { ArticlePreview } from "./ArticlePreview";
+
+export function FeedPage() {
+ const { articles } = useLoaderData
+
+
+
+
+
+
+
+ {article.author.username}
+
+
+ {new Date(article.createdAt).toLocaleDateString(undefined, {
+ dateStyle: "long",
+ })}
+
+
+
+ {article.title}
+{article.description}
+ Read more... +-
+ {article.tagList.map((tag) => (
+
- + {tag} + + ))} +
+
+ );
+}
+```
+
+### Фильтрация по тегам
+
+Что касается тегов, то наша задача — получить их из бэкенда и запомнить выбранный пользователем тег. Мы уже знаем, как загружать из бэкенда — это еще один запрос от функции-загрузчика. Мы будем использовать удобную функцию `promiseHash` из пакета `remix-utils`, который уже установлен.
+
+Обновите файл загрузчика, `pages/feed/api/loader.ts`, следующим кодом:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+ );
+}
+```
+
+Затем нам нужно использовать параметр поиска тегов в нашем загрузчике. Измените функцию `loader` в `pages/feed/api/loader.ts` на следующую:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+
+
+
+ Popular Tags
+ + +
+
+ );
+}
+```
+
+Ну вот, это тоже сделали. Есть еще список вкладок, который можно реализовать аналогичным образом, но давайте повременим с этим, пока не реализуем аутентификацию. Кстати, о ней!
+
+### Аутентификация
+
+Аутентификация включает в себя две страницы — одну для входа в систему и другую для регистрации. Они, в основном, очень схожие, поэтому имеет смысл держать их в одном сегменте, `sign-in`, чтобы при необходимости можно было переиспользовать код.
+
+Создайте `RegisterPage.tsx` в сегменте `ui` в `pages/sign-in` со следующим содержимым:
+
+```tsx title="pages/sign-in/ui/RegisterPage.tsx"
+import { Form, Link, useActionData } from "@remix-run/react";
+
+import type { register } from "../api/register";
+
+export function RegisterPage() {
+ const registerData = useActionData
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+ {articles.articles.map((article) => (
+
+
+
+
+
+
+ Popular Tags
+ + +
+
+ );
+}
+```
+
+Сейчас нам нужно исправить сломанный импорт. Он обращается к новому сегменту, поэтому создайте его:
+
+```bash
+npx fsd pages sign-in -s api
+```
+
+Однако прежде чем мы сможем реализовать бэкенд-часть регистрации, нам нужен некоторый инфраструктурный код для Remix для обработки сессий. Отправим его в Shared, на случай, если он понадобится какой-либо другой странице.
+
+Поместите следующий код в `shared/api/auth.server.ts`. Этот код очень специфичен для Remix, так что не беспокойтесь, если там не все понятно, просто скопируйте и вставьте:
+
+```tsx title="shared/api/auth.server.ts"
+import { createCookieSessionStorage, redirect } from "@remix-run/node";
+import invariant from "tiny-invariant";
+
+import type { User } from "./models";
+
+invariant(
+ process.env.SESSION_SECRET,
+ "SESSION_SECRET must be set for authentication to work",
+);
+
+const sessionStorage = createCookieSessionStorage<{
+ user: User;
+}>({
+ cookie: {
+ name: "__session",
+ httpOnly: true,
+ path: "/",
+ sameSite: "lax",
+ secrets: [process.env.SESSION_SECRET],
+ secure: process.env.NODE_ENV === "production",
+ },
+});
+
+export async function createUserSession({
+ request,
+ user,
+ redirectTo,
+}: {
+ request: Request;
+ user: User;
+ redirectTo: string;
+}) {
+ const cookie = request.headers.get("Cookie");
+ const session = await sessionStorage.getSession(cookie);
+
+ session.set("user", user);
+
+ return redirect(redirectTo, {
+ headers: {
+ "Set-Cookie": await sessionStorage.commitSession(session, {
+ maxAge: 60 * 60 * 24 * 7, // 7 days
+ }),
+ },
+ });
+}
+
+export async function getUserFromSession(request: Request) {
+ const cookie = request.headers.get("Cookie");
+ const session = await sessionStorage.getSession(cookie);
+
+ return session.get("user");
+}
+
+export async function requireUser(request: Request) {
+ const user = await getUserFromSession(request);
+
+ if (user === null) {
+ throw redirect("/login");
+ }
+
+ return user;
+}
+```
+
+А также экспортируйте модель `User` из файла `models.ts`, расположенного рядом с ним:
+
+```tsx title="shared/api/models.ts"
+import type { components } from "./v1";
+
+export type Article = components["schemas"]["Article"];
+export type User = components["schemas"]["User"];
+```
+
+Прежде чем этот код заработает, необходимо установить переменную окружения `SESSION_SECRET`. Создайте файл `.env` в корне проекта, пропишите в нем `SESSION_SECRET=`, а затем пробегитесь по клавиатуре, чтобы создать длинную случайную строку. У вас должно получиться что-то вроде этого:
+
+```bash title=".env"
+SESSION_SECRET=несмейтеэтокопировать
+```
+
+Наконец, добавьте несколько экспортов в публичный API, чтобы использовать этот код:
+
+```tsx title="shared/api/index.ts"
+export { GET, POST, PUT, DELETE } from "./client";
+
+export type { Article } from "./models";
+
+export { createUserSession, getUserFromSession, requireUser } from "./auth.server";
+```
+
+Теперь мы можем написать код, который будет общаться с бэкендом RealWorld для регистрации. Мы сохраним его в `pages/sign-in/api`. Создайте файл `register.ts` и поместите в него следующий код:
+
+```tsx title="pages/sign-in/api/register.ts"
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+
+import { POST, createUserSession } from "shared/api";
+
+export const register = async ({ request }: ActionFunctionArgs) => {
+ const formData = await request.formData();
+ const username = formData.get("username")?.toString() ?? "";
+ const email = formData.get("email")?.toString() ?? "";
+ const password = formData.get("password")?.toString() ?? "";
+
+ const { data, error } = await POST("/users", {
+ body: { user: { email, password, username } },
+ });
+
+ if (error) {
+ return json({ error }, { status: 400 });
+ } else {
+ return createUserSession({
+ request: request,
+ user: data.user,
+ redirectTo: "/",
+ });
+ }
+};
+```
+
+```tsx title="pages/sign-in/index.ts"
+export { RegisterPage } from './ui/RegisterPage';
+export { register } from './api/register';
+```
+
+Почти готово! Осталось подключить страницу и действие регистрации к маршруту `/register`. Создайте `register.tsx` в `app/routes`:
+
+```tsx title="app/routes/register.tsx"
+import { RegisterPage, register } from "pages/sign-in";
+
+export { register as action };
+
+export default RegisterPage;
+```
+
+Теперь, если вы перейдете на [http://localhost:3000/register,](http://localhost:3000/register) вы сможете создать пользователя! Остальная часть приложения пока что на это не отреагирует, мы займемся этим в ближайшее время.
+
+Аналогичным образом мы можем реализовать страницу входа в систему. Попробуйте сами или просто возьмите код и двигайтесь дальше:
+
+```tsx title="pages/sign-in/api/sign-in.ts"
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+
+import { POST, createUserSession } from "shared/api";
+
+export const signIn = async ({ request }: ActionFunctionArgs) => {
+ const formData = await request.formData();
+ const email = formData.get("email")?.toString() ?? "";
+ const password = formData.get("password")?.toString() ?? "";
+
+ const { data, error } = await POST("/users/login", {
+ body: { user: { email, password } },
+ });
+
+ if (error) {
+ return json({ error }, { status: 400 });
+ } else {
+ return createUserSession({
+ request: request,
+ user: data.user,
+ redirectTo: "/",
+ });
+ }
+};
+```
+
+```tsx title="pages/sign-in/ui/SignInPage.tsx"
+import { Form, Link, useActionData } from "@remix-run/react";
+
+import type { signIn } from "../api/sign-in";
+
+export function SignInPage() {
+ const signInData = useActionData
+
+
+
+
+
+ Sign up
++ Have an account? +
+ + {registerData?.error && ( +-
+ {registerData.error.errors.body.map((error) => (
+
- {error} + ))} +
+
+ );
+}
+```
+
+```tsx title="pages/sign-in/index.ts"
+export { RegisterPage } from './ui/RegisterPage';
+export { register } from './api/register';
+export { SignInPage } from './ui/SignInPage';
+export { signIn } from './api/sign-in';
+```
+
+```tsx title="app/routes/login.tsx"
+import { SignInPage, signIn } from "pages/sign-in";
+
+export { signIn as action };
+
+export default SignInPage;
+```
+
+Теперь давайте дадим пользователям возможность попасть на эти страницы.
+
+### Хэдер
+
+Как мы уже говорили в первой части, хэдер приложения обычно размещается либо в Widgets, либо в Shared. Мы поместим его в Shared, потому что он очень прост, и вся бизнес-логика может быть сохранена за его пределами. Давайте создадим для него место:
+
+```bash
+npx fsd shared ui
+```
+
+Теперь создайте `shared/ui/Header.tsx` со следующим содержимым:
+
+```tsx title="shared/ui/Header.tsx"
+import { useContext } from "react";
+import { Link, useLocation } from "@remix-run/react";
+
+import { CurrentUser } from "../api/currentUser";
+
+export function Header() {
+ const currentUser = useContext(CurrentUser);
+ const { pathname } = useLocation();
+
+ return (
+
+ );
+}
+```
+
+Экспортируйте этот компонент из `shared/ui`:
+
+```tsx title="shared/ui/index.ts"
+export { Header } from "./Header";
+```
+
+В хэдере мы полагаемся на контекст, расположенный в `shared/api`. Создайте ещё его:
+
+```tsx title="shared/api/currentUser.ts"
+import { createContext } from "react";
+
+import type { User } from "./models";
+
+export const CurrentUser = createContext
+
+
+
+
+
+ Sign in
++ Need an account? +
+ + {signInData?.error && ( +-
+ {signInData.error.errors.body.map((error) => (
+
- {error} + ))} +
+
+ );
+}
+```
+
+```tsx title="pages/feed/ui/Pagination.tsx"
+import { Form, useLoaderData, useSearchParams } from "@remix-run/react";
+import { ExistingSearchParams } from "remix-utils/existing-search-params";
+
+import { LIMIT, type loader } from "../api/loader";
+
+export function Pagination() {
+ const [searchParams] = useSearchParams();
+ const { articles } = useLoaderDataPopular Tags
+ + +
+
+ );
+}
+```
+
+Нам также нужно учесть новую вкладку в функции-загрузчике:
+
+```tsx title="pages/feed/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET, requireUser } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+ conduit
+A place to share your knowledge.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+Этот код отправит POST-запрос на `/article/:slug` с `_action=favorite`, чтобы отметить статью как любимую. Пока это не работает, но как только мы начнем работать над читалкой статей, мы реализуем и это.
+
+И на этом мы официально закончили работу над фидом! Ура!
+
+### Читалка статей
+
+Во-первых, нам нужны данные. Давайте создадим загрузчик:
+
+```bash
+npx fsd pages article-reader -s api
+```
+
+```tsx title="pages/article-read/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import invariant from "tiny-invariant";
+import type { FetchResponse } from "openapi-fetch";
+import { promiseHash } from "remix-utils/promise";
+
+import { GET, getUserFromSession } from "shared/api";
+
+async function throwAnyErrors
+
+
+
+
+
+
+
+ {article.author.username}
+
+
+ {new Date(article.createdAt).toLocaleDateString(undefined, {
+ dateStyle: "long",
+ })}
+
+
+
+ {article.title}
+{article.description}
+ Read more... +-
+ {article.tagList.map((tag) => (
+
- + {tag} + + ))} +
+
+ );
+}
+```
+
+Более интересными являются `ArticleMeta` и `Comments`. Они содержат операции записи, такие как лайкнуть статью, оставить комментарий и т. д. Чтобы они заработали, нам сначала нужно реализовать бэкенд-часть. Создайте файл `action.ts` в сегменте `api` этой страницы:
+
+```tsx title="pages/article-read/api/action.ts"
+import { redirect, type ActionFunctionArgs } from "@remix-run/node";
+import { namedAction } from "remix-utils/named-action";
+import { redirectBack } from "remix-utils/redirect-back";
+import invariant from "tiny-invariant";
+
+import { DELETE, POST, requireUser } from "shared/api";
+
+export const action = async ({ request, params }: ActionFunctionArgs) => {
+ const currentUser = await requireUser(request);
+
+ const authorization = { Authorization: `Token ${currentUser.token}` };
+
+ const formData = await request.formData();
+
+ return namedAction(formData, {
+ async delete() {
+ invariant(params.slug, "Expected a slug parameter");
+ await DELETE("/articles/{slug}", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirect("/");
+ },
+ async favorite() {
+ invariant(params.slug, "Expected a slug parameter");
+ await POST("/articles/{slug}/favorite", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async unfavorite() {
+ invariant(params.slug, "Expected a slug parameter");
+ await DELETE("/articles/{slug}/favorite", {
+ params: { path: { slug: params.slug } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async createComment() {
+ invariant(params.slug, "Expected a slug parameter");
+ const comment = formData.get("comment");
+ invariant(typeof comment === "string", "Expected a comment parameter");
+ await POST("/articles/{slug}/comments", {
+ params: { path: { slug: params.slug } },
+ headers: { ...authorization, "Content-Type": "application/json" },
+ body: { comment: { body: comment } },
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async deleteComment() {
+ invariant(params.slug, "Expected a slug parameter");
+ const commentId = formData.get("id");
+ invariant(typeof commentId === "string", "Expected an id parameter");
+ const commentIdNumeric = parseInt(commentId, 10);
+ invariant(
+ !Number.isNaN(commentIdNumeric),
+ "Expected a numeric id parameter",
+ );
+ await DELETE("/articles/{slug}/comments/{id}", {
+ params: { path: { slug: params.slug, id: commentIdNumeric } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async followAuthor() {
+ const authorUsername = formData.get("username");
+ invariant(
+ typeof authorUsername === "string",
+ "Expected a username parameter",
+ );
+ await POST("/profiles/{username}/follow", {
+ params: { path: { username: authorUsername } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ async unfollowAuthor() {
+ const authorUsername = formData.get("username");
+ invariant(
+ typeof authorUsername === "string",
+ "Expected a username parameter",
+ );
+ await DELETE("/profiles/{username}/follow", {
+ params: { path: { username: authorUsername } },
+ headers: authorization,
+ });
+ return redirectBack(request, { fallback: "/" });
+ },
+ });
+};
+```
+
+Реэкспортируйте её из слайса, а затем из маршрута. Пока мы здесь, давайте также подключим саму страницу:
+
+```tsx title="pages/article-read/index.ts"
+export { ArticleReadPage } from "./ui/ArticleReadPage";
+export { loader } from "./api/loader";
+export { action } from "./api/action";
+```
+
+```tsx title="app/routes/article.$slug.tsx"
+import { ArticleReadPage } from "pages/article-read";
+
+export { loader, action } from "pages/article-read";
+
+export default ArticleReadPage;
+```
+
+Теперь, несмотря на то, что мы еще не реализовали кнопку лайка в читалке, кнопка лайка в ленте начнет работать! Это потому, что она тоже отправляет запросы на этот маршрут. Попробуйте лайкнуть что-нибудь.
+
+`ArticleMeta` и `Comments` — это, опять же, просто формы. Мы уже делали это раньше, давайте возьмем их код и пойдем дальше:
+
+```tsx title="pages/article-read/ui/ArticleMeta.tsx"
+import { Form, Link, useLoaderData } from "@remix-run/react";
+import { useContext } from "react";
+
+import { CurrentUser } from "shared/api";
+import type { loader } from "../api/loader";
+
+export function ArticleMeta() {
+ const currentUser = useContext(CurrentUser);
+ const { article } = useLoaderData
+
+
+
+
+ {article.article.title}
+ +
+
+ +
+
+
+
+
+
+ -
+
- + {tag} + + ))} +
{article.article.body}
+ {article.article.tagList.map((tag) => ( ++ +
+
+
+
+
+
+ {currentUser !== null ? (
+
+ ) : (
+
+ );
+}
+```
+
+А вместе с этим и наша читалка статей! Кнопки "Подписаться на автора", "Мне нравится" и "Оставить комментарий" теперь должны работать как положено.
+
+
+
+ )}
+
+ {comments.comments.map((comment) => (
+
+
+ + Sign in + or + Sign up + to add comments on this article. +
+
+
+ ))}
+
+
+
+ {comment.body}
+
+
+
+
+
+
+ {comment.author.username}
+
+ {comment.createdAt}
+ {comment.author.username === currentUser?.username && (
+
+
+
+ )}
+
+
+
+ );
+}
+```
+
+Эта страница получает текущую статью (если мы пишем статью не с нуля) и заполняет соответствующие поля формы. Мы уже видели это. Интересной частью является `FormErrors`, потому что он будет получать результат проверки и отображать его пользователю. Давайте посмотрим:
+
+```tsx title="pages/article-edit/ui/FormErrors.tsx"
+import { useActionData } from "@remix-run/react";
+import type { action } from "../api/action";
+
+export function FormErrors() {
+ const actionData = useActionData
+
+
+
+
+
+ -
+ {actionData.errors.map((error) => (
+
- {error} + ))} +
+ {tagListState.map((tag) => (
+
+
+ [" ", "Enter"].includes(e.key) && removeTag(tag)
+ }
+ onClick={() => removeTag(tag)}
+ >{" "}
+ {tag}
+
+ ))}
+
+
+ );
+}
+```
+
+Теперь перейдем к API-части. Загрузчик должен посмотреть на URL, и если в нем есть ссылка на статью, это означает, что мы редактируем существующую статью, и ее данные должны быть загружены. В противном случае ничего не возвращается. Давайте создадим этот загрузчик:
+
+```tsx title="pages/article-edit/api/loader.ts"
+import { json, type LoaderFunctionArgs } from "@remix-run/node";
+import type { FetchResponse } from "openapi-fetch";
+
+import { GET, requireUser } from "shared/api";
+
+async function throwAnyErrors