Feat/history integration

messages/en.json

@@ -167,7 +167,7 @@
     "pageTitle": "History",
     "title": "You haven't executed any requests",
     "description": "It's empty here. Try:",
-    "link": "RESTful client:",
+    "link": "RESTful client",
     "analytics": "Analytics",
     "duration": "Request duration: ",
     "status": "Status code: ",

messages/ru.json

@@ -167,7 +167,7 @@
     "pageTitle": "История",
     "title": "Вы еще не выполнили ни одного запроса",
     "description": "Здесь пусто. Попробуйте:",
-    "link": "REST клиент:",
+    "link": "REST клиент",
     "analytics": "Аналитика",
     "duration": "Длительность запроса: ",
     "status": "Код статуса: ",

src/app/[locale]/(dashboard)/history/page.tsx

@@ -1,6 +1,8 @@
 import { HistoryDynamic } from '@/features/history/components/history';
-import { mockHistoryData } from '@/testing/mocks/history';
+import { fetchHistory } from '@/utils/supabase/fetch-history';
 
-export default function HistoryPage() {
-  return <HistoryDynamic historyData={mockHistoryData} />;
+export default async function HistoryPage() {
+  const data = await fetchHistory();
+
+  return <HistoryDynamic historyData={data} />;
 }

src/features/history/components/history-item.tsx

@@ -1,12 +1,15 @@
 import { cn } from '@heroui/react';
 import { StatusCodes } from 'http-status-codes';
 import { useLocale, useTranslations } from 'next-intl';
+import { parse } from 'valibot';
 
 import type { HistoryData } from '@/features/history/types/history-data';
 
 import { ChevronIcon } from '@/components/icons/chevron';
 import { ANALYTIC_KEYS } from '@/features/history/constants/analitic-keys';
+import { HeadersSchema } from '@/features/rest-client/schemas/proxy-schema';
 import { Link } from '@/i18n/navigation';
+import { formateTimestamp } from '@/utils/format-timestamp';
 import { generateRouteUrl } from '@/utils/route-generator';
 
 type AnalyticKeys = (typeof ANALYTIC_KEYS)[number];
@@ -15,17 +18,28 @@ type HistoryItemProps = {
   method: string;
   url: string;
   body?: string;
-  headers: Record<string, string>;
+  headers: string;
   analytics: Partial<{ [K in AnalyticKeys]?: HistoryData[K] }>;
 };
 
 export function HistoryItem({ method, url, body, headers, analytics }: HistoryItemProps) {
   const t = useTranslations('History');
   const locale = useLocale();
-  const routeUrl = generateRouteUrl(method, url, locale, body, headers);
+
+  let parsedHeaders: Record<string, string> = {};
+
+  try {
+    parsedHeaders = parse(HeadersSchema, JSON.parse(headers));
+  } catch {
+    parsedHeaders = {};
+  }
+
+  const routeUrl = generateRouteUrl(method, url, '', body, parsedHeaders);
   const isSuccess =
     analytics.status && analytics.status >= StatusCodes.OK && analytics.status < StatusCodes.MULTIPLE_CHOICES;
 
+  const formattedTimestamp = analytics.timestamp && formateTimestamp(locale, analytics.timestamp);
+
   return (
     <li className="mb-3">
       <Link
@@ -46,7 +60,7 @@ export function HistoryItem({ method, url, body, headers, analytics }: HistoryIt
         {ANALYTIC_KEYS.map((key) => (
           <p key={key} data-testid={`analytic-${key}`}>
             <strong>{t(key)}</strong>
-            {analytics[key] ?? '-'}
+            {key === 'timestamp' ? formattedTimestamp : (analytics[key] ?? '-')}
           </p>
         ))}
       </div>

src/features/history/components/history.test.tsx

@@ -7,6 +7,7 @@ import { HistoryData } from '@/features/history/components/history';
 import { ANALYTIC_KEYS } from '@/features/history/constants/analitic-keys';
 import { mockHistoryData } from '@/testing/mocks/history';
 import { renderWithProviders } from '@/testing/utils/render-with-providers';
+import { formateTimestamp } from '@/utils/format-timestamp';
 
 const useTranslationsMock = (key: string) => key;
 
@@ -48,9 +49,13 @@ describe('History', () => {
         expect(container.getByText(data.url)).toBeInTheDocument();
 
         ANALYTIC_KEYS.forEach((key) => {
-          const value = data[key] ?? '-';
+          let value = data[key] ?? '-';
           const keyElement = within(container.getByTestId(`analytic-${key}`));
 
+          if (key === 'timestamp') {
+            value = formateTimestamp('en', value.toString());
+          }
+
           expect(keyElement.getByText(value.toString())).toBeInTheDocument();
         });
       });

src/features/history/components/history.tsx

@@ -1,22 +1,22 @@
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
 
-import type { HistoryData } from '@/features/history/types/history-data';
+import type { HistoryData, HistoryInsertData } from '@/features/history/types/history-data';
 
 import { Loading } from '@/components/loading/loading';
 import { ROUTES } from '@/config/routes';
 import { HistoryItem } from '@/features/history/components/history-item';
 import { Link } from '@/i18n/navigation';
 
 export type HistoryProps = {
-  historyData: HistoryData[];
+  historyData: HistoryInsertData[] | null;
 };
 
 export function HistoryData({ historyData }: HistoryProps) {
   const t = useTranslations('History');
 
   const renderContent = () => {
-    if (historyData.length === 0) {
+    if (!historyData || historyData.length === 0) {
       return (
         <div className="flex h-[50vh] w-full flex-col items-center justify-center text-center">
           <h2 className="mb-2">{t('title')}</h2>

src/features/history/types/history-data.ts

@@ -13,3 +13,7 @@ export type HistoryData = {
   headers: Record<string, string>;
   body?: string;
 };
+
+export type HistoryInsertData = Omit<HistoryData, 'headers'> & {
+  headers: string;
+};

src/features/rest-client/components/http-request-form.test.tsx

@@ -8,6 +8,10 @@ import { HttpRequestForm } from './http-request-form';
 
 const mockExecuteRequest = vi.fn();
 
+vi.mock('@supabase/ssr', () => ({
+  createBrowserClient: vi.fn(),
+}));
+
 describe('HttpRequestForm', () => {
   beforeEach(() => {
     vi.clearAllMocks();

src/features/rest-client/components/request-body-editor.test.tsx

@@ -5,6 +5,10 @@ import { RequestBodyEditor } from '@/features/rest-client/components/request-bod
 import { renderWithProviders } from '@/testing/utils/render-with-providers';
 import { renderWithUserEvent } from '@/testing/utils/render-with-user-event';
 
+vi.mock('@supabase/ssr', () => ({
+  createBrowserClient: vi.fn(),
+}));
+
 describe('RequestBodyEditor', () => {
   it('should render with content', () => {
     renderWithProviders(<RequestBodyEditor body="test content" mode="text" />);

src/features/rest-client/components/response-section.test.tsx

@@ -15,6 +15,10 @@ const mockResponse = {
   responseSize: 0,
 };
 
+vi.mock('@supabase/ssr', () => ({
+  createBrowserClient: vi.fn(),
+}));
+
 describe('ResponseSection', () => {
   beforeEach(() => {
     vi.clearAllMocks();

src/features/rest-client/schemas/proxy-schema.ts

@@ -2,17 +2,19 @@ import { object, optional, record, string, number, picklist } from 'valibot';
 
 import { HTTP_METHODS } from '@/features/rest-client/constants/http-request';
 
+export const HeadersSchema = record(string(), string());
+
 export const ProxyRequestSchema = object({
   url: string(),
   method: picklist(HTTP_METHODS),
-  headers: record(string(), string()),
+  headers: HeadersSchema,
   body: optional(string()),
 });
 
 export const ProxyResponseSchema = object({
   status: number(),
   statusText: string(),
-  headers: record(string(), string()),
+  headers: HeadersSchema,
   body: string(),
   error: optional(string()),
 });

src/stores/auth-context/auth-provider.tsx

@@ -7,7 +7,7 @@ import type { UserData } from '@/stores/auth-context/types';
 
 import { useRouter } from '@/i18n/navigation';
 import { AuthContext } from '@/stores/auth-context/context';
-import { createClient } from '@/utils/supabase/client';
+import { supabase } from '@/utils/supabase/history-insert';
 
 type AuthProviderProps = {
   children: ReactNode;
@@ -19,8 +19,6 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const supabase = createClient();
-
     void supabase.auth.getSession().then(({ data: { session } }: { data: { session: Session | null } }) => {
       if (session?.user.email) {
         setUser({

src/stores/rest-client/store.test.ts

@@ -11,6 +11,8 @@ vi.mock('@/features/variables/hooks/use-replace-with-variable', () => ({
   useReplaceWithVariable: () => mockReplaceVariables,
 }));
 
+vi.mock('@/utils/supabase/history-insert', () => ({ insertHistory: vi.fn(() => ({ error: null })) }));
+
 const executeRequest = async () => {
   const { executeRequest } = useRestClientStore.getState();
 

src/stores/rest-client/store.ts

@@ -13,6 +13,7 @@ import {
   getUrlFromParams,
 } from '@/features/rest-client/utils/get-parameters';
 import { generateRouteUrl } from '@/utils/route-generator';
+import { insertHistory } from '@/utils/supabase/history-insert';
 
 type State = {
   method: string;
@@ -176,30 +177,40 @@ export const useRestClientStore = create<RestClientStore>((set, get) => ({
         body: bodyWithVariables,
       });
 
-      if (!result.ok) {
-        throw new Error(`HTTP ${result.status.toString()}: ${result.statusText}`);
-      }
-
       const data: unknown = await result.json();
       const proxyResponse = parse(ProxyResponseSchema, data);
-      const duration = performance.now() - startTime;
+      const duration = +(performance.now() - startTime).toFixed(1);
       const responseSize = new TextEncoder().encode(proxyResponse.body).length;
 
+      const dataForSave = {
+        status: proxyResponse.status,
+        headers: proxyResponse.headers,
+        body: proxyResponse.body,
+        timestamp,
+        duration,
+        requestSize,
+        responseSize,
+      };
+
+      const { error } = await insertHistory({
+        ...dataForSave,
+        headers: JSON.stringify(requestHeaders),
+        id: crypto.randomUUID(),
+        error: proxyResponse.error,
+        method,
+        url,
+      });
+
       if (proxyResponse.error) {
         throw new Error(proxyResponse.error);
       }
 
+      if (!result.ok) {
+        throw new Error(`HTTP ${result.status.toString()}: ${result.statusText}`);
+      }
+
       set({
-        response: {
-          status: proxyResponse.status,
-          statusText: getReasonPhrase(proxyResponse.status),
-          headers: proxyResponse.headers,
-          body: proxyResponse.body,
-          timestamp,
-          duration,
-          requestSize,
-          responseSize,
-        },
+        response: { ...dataForSave, statusText: getReasonPhrase(proxyResponse.status), error: error?.message },
         isLoading: false,
       });
 

src/testing/mocks/history.ts

@@ -3,24 +3,24 @@ export const mockHistoryData = [
     id: '1',
     duration: 200,
     status: 500,
-    timestamp: 'timestampMock',
+    timestamp: '2025-09-21 17:59:06.064+00',
     method: 'POST',
     requestSize: 300,
     responseSize: 300,
     error:
       'Invalid header value: Headers must contain only ASCII characters. Remove non-ASCII characters from header names and values.',
     url: 'https://api.example.com/resource',
-    headers: { 'content-type': 'application/json; charset=utf-8' },
+    headers: `{"Accept":"*/*"}`,
   },
   {
     id: '2',
     duration: 200,
     status: 200,
-    timestamp: 'timestampMock',
+    timestamp: '2025-09-21 18:09:20.336+00',
     method: 'POST',
     requestSize: 300,
     responseSize: 300,
     url: 'https://api.example.com/resource/2',
-    headers: { 'content-type': 'application/json; charset=utf-8' },
+    headers: `{"Accept":"*/*"}`,
   },
 ];

src/utils/format-timestamp.ts

@@ -0,0 +1,8 @@
+export const formateTimestamp = (locale: string, timestamp: string) =>
+  new Intl.DateTimeFormat(locale, {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(new Date(timestamp));

src/utils/supabase/fetch-history.ts

@@ -0,0 +1,27 @@
+import type { PostgrestError } from '@supabase/supabase-js';
+
+import type { HistoryInsertData } from '@/features/history/types/history-data';
+
+import { createClient } from '@/utils/supabase/server';
+
+type FetchHistoryResponse = {
+  data: HistoryInsertData[] | null;
+  error: PostgrestError | null;
+};
+
+export const fetchHistory = async () => {
+  const supabase = await createClient();
+
+  const { data, error }: FetchHistoryResponse = await supabase
+    .from('history')
+    .select('*')
+    .order('timestamp', { ascending: false });
+
+  if (error) {
+    console.error('Error fetching data:', error);
+
+    return null;
+  }
+
+  return data;
+};

src/utils/supabase/history-insert.ts

@@ -0,0 +1,7 @@
+import type { HistoryInsertData } from '@/features/history/types/history-data';
+
+import { createClient } from '@/utils/supabase/client';
+
+export const supabase = createClient();
+
+export const insertHistory = async (data: HistoryInsertData) => await supabase.from('history').insert(data).single();