refact: file structure and reusablity add

src/App.tsx

@@ -1,5 +1,6 @@
 import { MiniContainer } from '@/components';
-import { Filter, Footer, Header, Issues } from '@/containers';
+import { Filter, Issues } from '@/containers';
+import { Footer, Header } from '@/containers/layout';
 
 const App = () => {
   return (

src/__tests__/hooks/useUrlValues.test.jsx

@@ -1,11 +1,11 @@
+import UrlProvider, { useUrlValues } from '@/lib/hooks/useUrlValues';
 import { composeUrl } from '@/lib/utils';
 import {
   DEFAULT_LANGUAGE,
   DEFAULT_ORDERING,
   DEFAULT_PAGE,
   DEFAULT_SORTING_TAG,
 } from '@/lib/utils/config';
-import UrlProvider, { useUrlValues } from '@/providers/urlProvider/reducer';
 import { act, render } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
 

src/components/Logo.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 
-interface Props {
+interface Props extends React.ComponentPropsWithoutRef<'h1'> {
   title: string;
-  classNme: string;
 }
 
-const Logo: React.FC<Props> = ({ title, classNme }) => {
+const Logo: React.FC<Props> = ({ title, className }) => {
   const [first, ...rest] = title.split(' ');
 
   return (
     <h1
-      className={`text-3xl font-light leading-relaxed sm:text-4xl ${classNme}`}
+      className={`text-3xl font-light leading-relaxed sm:text-4xl ${className}`}
     >
       <a href='/'>
         <span className='font-sans font-medium text-dark-1'>{first}</span>{' '}

src/containers/Issues.tsx

@@ -1,10 +1,10 @@
 import { Error, Issue, Label, Loader, Pagination } from '@/components';
 import useAsync from '@/lib/hooks/useAsync';
+import { useUrlValues } from '@/lib/hooks/useUrlValues';
 import { getTotalPages, toId } from '@/lib/utils';
 import httpGateway from '@/lib/utils/HttpGateway';
 import { MAX_ISSUES_ALLOWED } from '@/lib/utils/config';
 import { githubIssueSearchResponse } from '@/models/GithubIssueSearch';
-import { useUrlValues } from '@/providers/urlProvider/reducer';
 import { useEffect } from 'react';
 
 const Issues = () => {

src/containers/index.tsx → src/containers/index.ts

@@ -1,4 +1,2 @@
 export { default as Filter } from './Filter';
-export { default as Footer } from './Footer';
-export { default as Header } from './Header';
 export { default as Issues } from './Issues';

src/containers/layout/Provider.tsx

@@ -0,0 +1,15 @@
+import FilterProvider from '@/lib/hooks/use-filter';
+import ThemeProvider from '@/lib/hooks/use-theme';
+import UrlProvider from '@/lib/hooks/useUrlValues';
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <UrlProvider>
+        <ThemeProvider>
+          <FilterProvider>{children}</FilterProvider>
+        </ThemeProvider>
+      </UrlProvider>
+    </>
+  );
+}

src/containers/layout/index.ts

@@ -0,0 +1,3 @@
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
+export { default as Provider } from './Provider';

src/lib/hooks/use-filter.tsx

@@ -1,8 +1,8 @@
+import { useUrlValues } from '@/lib/hooks/useUrlValues';
 import { Label, sortedLabels } from '@/models/Label';
 import { Language } from '@/models/Language';
 import { Ordering } from '@/models/Ordering';
 import { SortingTag } from '@/models/SortingTag';
-import { useUrlValues } from '@/providers/urlProvider/reducer';
 import { FormEvent, createContext, useContext, useState } from 'react';
 
 type FilterContextType = {

src/main.tsx

@@ -1,20 +1,13 @@
 import App from '@/App';
+import { Provider } from '@/containers/layout';
 import '@/index.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import FilterProvider from './lib/hooks/use-filter';
-import ThemeProvider from './lib/hooks/use-theme';
-import UrlProvider from './providers/urlProvider/reducer';
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <UrlProvider>
-      <ThemeProvider>
-        <FilterProvider>
-          <App />
-        </FilterProvider>
-      </ThemeProvider>
-    </UrlProvider>
+    <Provider>
+      <App />
+    </Provider>
   </React.StrictMode>
 );