feat: request other users to duel (#29)

Author: DIvanCode

src/entities/duel-configuration/api/duelConfigurationApi.ts

@@ -13,6 +13,16 @@ interface UpdateDuelConfigurationArgs {
 
 export const duelConfigurationApiSlice = apiSlice.injectEndpoints({
     endpoints: (builder) => ({
+        getDuelConfigurations: builder.query<DuelConfiguration[], void>({
+            query: () => "/configurations",
+            providesTags: (result) =>
+                result
+                    ? [
+                          ...result.map(({ id }) => ({ type: "DuelConfiguration" as const, id })),
+                          { type: "DuelConfiguration", id: "LIST" },
+                      ]
+                    : [{ type: "DuelConfiguration", id: "LIST" }],
+        }),
         createDuelConfiguration: builder.mutation<
             DuelConfiguration,
             CreateDuelConfigurationRequest
@@ -53,6 +63,7 @@ export const duelConfigurationApiSlice = apiSlice.injectEndpoints({
 });
 
 export const {
+    useGetDuelConfigurationsQuery,
     useCreateDuelConfigurationMutation,
     useUpdateDuelConfigurationMutation,
     useDeleteDuelConfigurationMutation,

src/entities/duel-configuration/index.ts

@@ -1,6 +1,7 @@
 export {
     useCreateDuelConfigurationMutation,
     useDeleteDuelConfigurationMutation,
+    useGetDuelConfigurationsQuery,
     useGetDuelConfigurationQuery,
     useUpdateDuelConfigurationMutation,
 } from "./api/duelConfigurationApi";

src/entities/duel-request/api/duelRequestApi.ts

@@ -0,0 +1,30 @@
+import { apiSlice } from "shared/api";
+
+import type { DuelRequest } from "../model/types";
+
+export const duelRequestApiSlice = apiSlice.injectEndpoints({
+    endpoints: (builder) => ({
+        getDuelRequests: builder.query<DuelRequest[], void>({
+            query: () => "/duels/requests",
+            providesTags: (result) =>
+                result
+                    ? [
+                          ...result.map((request) => ({
+                              type: "DuelRequest" as const,
+                              id: request.opponent_nickname ?? request.created_at,
+                          })),
+                          { type: "DuelRequest", id: "LIST" },
+                      ]
+                    : [{ type: "DuelRequest", id: "LIST" }],
+        }),
+        denyDuelRequest: builder.mutation<void, string>({
+            query: (nickname) => ({
+                url: `/duels/requests/${encodeURIComponent(nickname)}/deny`,
+                method: "POST",
+            }),
+            invalidatesTags: [{ type: "DuelRequest", id: "LIST" }],
+        }),
+    }),
+});
+
+export const { useGetDuelRequestsQuery, useDenyDuelRequestMutation } = duelRequestApiSlice;

src/entities/duel-request/index.ts

@@ -0,0 +1,2 @@
+export { useDenyDuelRequestMutation, useGetDuelRequestsQuery } from "./api/duelRequestApi";
+export type { DuelRequest } from "./model/types";

src/entities/duel-request/model/types.ts

@@ -0,0 +1,4 @@
+export interface DuelRequest {
+    opponent_nickname: string | null;
+    created_at: string;
+}

src/features/duel-configuration/index.ts

@@ -1 +1,2 @@
 export { DuelConfigurationManager } from "./ui/DuelConfigurationManager";
+export { DuelConfigurationPicker } from "./ui/DuelConfigurationPicker";

src/features/duel-configuration/ui/DuelConfigurationManager.module.scss

@@ -10,6 +10,19 @@
     gap: 1.25em;
 }
 
+.cardFlat {
+    width: 100%;
+    padding: 0;
+    border-radius: 0;
+    background-color: transparent;
+    box-shadow: none;
+    gap: 0.9em;
+}
+
+.cardFlat .configList {
+    gap: 0.5em;
+}
+
 .listHeader {
     display: flex;
     align-items: flex-start;
@@ -18,12 +31,38 @@
     flex-wrap: wrap;
 }
 
+.listHeaderStack {
+    flex-direction: column;
+    align-items: center;
+}
+
+.listHeaderActions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.5em;
+}
+
+.listHeaderActionsCentered {
+    align-items: center;
+}
+
+.listHeaderActionsLeft {
+    display: flex;
+    justify-content: flex-start;
+}
+
 .listHeaderText {
     display: flex;
     flex-direction: column;
     gap: 0.35em;
 }
 
+.listHeaderCentered {
+    align-items: center;
+    text-align: center;
+}
+
 .plusIcon {
     font-size: 1.1rem;
     line-height: 1;
@@ -218,6 +257,31 @@
     background-color: var(--card-secondary);
 }
 
+.configItemSelectable {
+    width: 100%;
+    border: 1px solid transparent;
+    text-align: left;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    transition:
+        border-color 0.2s ease,
+        background-color 0.2s ease;
+}
+
+.configItemSelectable:hover {
+    background-color: color-mix(in srgb, var(--card-secondary) 90%, white);
+}
+
+.configItemSelected {
+    border-color: var(--accent-primary);
+    background-color: color-mix(in srgb, var(--card-secondary) 80%, white);
+}
+
+.defaultConfigItem {
+    margin-bottom: 0.25em;
+}
+
 .configSummary {
     display: flex;
     flex-direction: column;
@@ -253,6 +317,18 @@
     font-size: 0.8rem;
 }
 
+.deleteHint {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.deleteActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75em;
+    margin-top: 1em;
+}
+
 .mutedLabel {
     cursor: default;
     color: var(--text-secondary);