Refactor project structure and integrate Redux for state management. Update configuration files for new project name and add Webpack plugins for environment variables. Implement user authentication with Keycloak and create a context for challenge management. Add various components for user interaction, including dashboards and task workspaces. Enhance API integration and add error handling utilities. Introduce analytics and polling mechanisms for improved user experience.

src/__data__/api/api.ts

@@ -0,0 +1,139 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { getConfigValue } from '@brojs/cli'
+
+import type {
+  ChallengeAuthResponse,
+  ChallengeChain,
+  ChallengeSubmitPayload,
+  ChallengeSubmitResponse,
+  ChallengeSubmission,
+  ChallengeTask,
+  QueueStatus,
+  SystemStats,
+  UserStats,
+} from '../types'
+import { keycloak } from '../kc'
+
+const normalizeBaseUrl = (url: string) => (url.endsWith('/') ? url.slice(0, -1) : url)
+const backendBaseUrl = normalizeBaseUrl(getConfigValue('challenge.api'))
+const challengeBaseUrl = `${backendBaseUrl}/challenge`
+
+export const api = createApi({
+  reducerPath: 'challengeApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: challengeBaseUrl,
+    fetchFn: async (
+      input: RequestInfo | URL,
+      init?: RequestInit,
+    ) => {
+      const response = await fetch(input, init)
+
+      if (response.status === 403) keycloak.login()
+
+      return response
+    },
+    prepareHeaders: (headers) => {
+      headers.set('Content-Type', 'application/json;charset=utf-8')
+
+      if (keycloak?.token) {
+        headers.set('Authorization', `Bearer ${keycloak.token}`)
+      }
+
+      return headers
+    },
+  }),
+  tagTypes: ['Chains', 'Chain', 'UserStats', 'SystemStats', 'Submissions', 'Queue'],
+  endpoints: (builder) => ({
+    authUser: builder.mutation<ChallengeAuthResponse, { nickname: string }>({
+      query: (body) => ({
+        url: '/auth',
+        method: 'POST',
+        body,
+      }),
+    }),
+    getChains: builder.query<ChallengeChain[], void>({
+      query: () => ({
+        url: '/chains',
+        method: 'GET',
+      }),
+      providesTags: ['Chains'],
+    }),
+    getChain: builder.query<ChallengeChain, string>({
+      query: (chainId) => ({
+        url: `/chain/${chainId}`,
+        method: 'GET',
+      }),
+      providesTags: (_result, _error, arg) => [{ type: 'Chain', id: arg }],
+    }),
+    submitSolution: builder.mutation<ChallengeSubmitResponse, ChallengeSubmitPayload>({
+      query: (body) => ({
+        url: '/submit',
+        method: 'POST',
+        body,
+      }),
+      invalidatesTags: ['Queue', 'Submissions', 'UserStats'],
+    }),
+    checkQueueStatus: builder.query<QueueStatus, string>({
+      query: (queueId) => ({
+        url: `/check-status/${queueId}`,
+        method: 'GET',
+      }),
+      providesTags: (_result, _error, arg) => [{ type: 'Queue', id: arg }],
+    }),
+    getUserStats: builder.query<UserStats, string>({
+      query: (userId) => ({
+        url: `/user/${userId}/stats`,
+        method: 'GET',
+      }),
+      providesTags: (_result, _error, arg) => [{ type: 'UserStats', id: arg }],
+    }),
+    getUserSubmissions: builder.query<ChallengeSubmission[], { userId: string; taskId?: string }>({
+      query: ({ userId, taskId }) => ({
+        url: `/user/${userId}/submissions${taskId ? `?taskId=${taskId}` : ''}`,
+        method: 'GET',
+      }),
+      providesTags: (_result, _error, arg) => [{ type: 'Submissions', id: arg.userId }],
+    }),
+    getSystemStats: builder.query<SystemStats, void>({
+      query: () => ({
+        url: '/stats',
+        method: 'GET',
+      }),
+      providesTags: ['SystemStats'],
+    }),
+    getTask: builder.query<ChallengeTask, string>({
+      query: (taskId) => ({
+        url: `/task/${taskId}`,
+        method: 'GET',
+      }),
+      providesTags: (_result, _error, arg) => [{ type: 'Submissions', id: `task-${arg}` }],
+    }),
+    getAllSubmissions: builder.query<ChallengeSubmission[], void>({
+      query: () => ({
+        url: '/submissions',
+        method: 'GET',
+      }),
+      providesTags: ['Submissions'],
+    }),
+  }),
+})
+
+export const {
+  useAuthUserMutation,
+  useGetChainsQuery,
+  useLazyGetChainsQuery,
+  useGetChainQuery,
+  useSubmitSolutionMutation,
+  useCheckQueueStatusQuery,
+  useLazyCheckQueueStatusQuery,
+  useGetUserStatsQuery,
+  useLazyGetUserStatsQuery,
+  useGetUserSubmissionsQuery,
+  useLazyGetUserSubmissionsQuery,
+  useGetSystemStatsQuery,
+  useLazyGetSystemStatsQuery,
+  useGetTaskQuery,
+  useLazyGetTaskQuery,
+  useGetAllSubmissionsQuery,
+  useLazyGetAllSubmissionsQuery,
+} = api