feat(): ADDING article support

ar1603 · ar1603 · commit 7aeff71451a3 · 2025-02-06T11:20:32.000+05:30
diff --git a/craco.config.js b/craco.config.js
@@ -6,6 +6,7 @@ module.exports = {
       '@assets': path.resolve(__dirname, './src/assets'),
       '@assets/*': path.resolve(__dirname, './src/assets/*'),
       '@data': path.resolve(__dirname, './src/data'),
+      '@services': path.resolve(__dirname, './src/services'),
       '@hooks': path.resolve(__dirname, './src/hooks'),
       '@localization': path.resolve(__dirname, './src/localization'),
       '@components': path.resolve(__dirname, './src/components'),
diff --git a/jest.config.js b/jest.config.js
@@ -27,6 +27,7 @@ module.exports = {
     '@assets/(.*)': '<rootDir>/src/assets/$1',
     '@assets': '<rootDir>/src/assets',
     '@screens': '<rootDir>/src/screens',
+    '@services': '<rootDir>/src/services',
     '@screens/(.*)': '<rootDir>/src/screens/$1',
     '@data': '<rootDir>/src/data',
     '@hooks': '<rootDir>/src/hooks',
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.12.2",
   "description": "Amit Raikwar Portfolio website",
   "main": "index.tsx",
+  "proxy": "http://static.amitraikwar.in",
   "scripts": {
     "start": "craco start",
     "build": "craco build",
@@ -32,6 +33,8 @@
     "@react-three/fiber": "^8.17.12",
     "@react-three/postprocessing": "^2.16.6",
     "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/react-query": "^5.66.0",
+    "@tanstack/react-query-devtools": "^5.66.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -42,6 +45,7 @@
     "@types/node": "^16.18.91",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
+    "axios": "^1.7.9",
     "framer-motion": "^11.1.9",
     "fuse.js": "^7.0.0",
     "gsap": "^3.12.7",
@@ -93,6 +97,7 @@
     "@craco/types": "^7.1.0",
     "@jest/globals": "^29.7.0",
     "@react-three/eslint-plugin": "^0.1.2",
+    "@tanstack/eslint-plugin-query": "^5.66.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,20 +6,32 @@ import {
 } from '@providers';
 import { HelmetProvider } from 'react-helmet-async';
 import { CursorProvider } from '@components';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 5,
+      retryDelay: 1000,
+    },
+  },
+});
 
 function App() {
   return (
-    <ThemeProvider>
-      <React.StrictMode>
-        <HelmetProvider>
-          <CursorProvider>
-            <LocalizationProvider>
-              <AppRouterProvider />
-            </LocalizationProvider>
-          </CursorProvider>
-        </HelmetProvider>
-      </React.StrictMode>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <React.StrictMode>
+          <HelmetProvider>
+            <CursorProvider>
+              <LocalizationProvider>
+                <AppRouterProvider />
+              </LocalizationProvider>
+            </CursorProvider>
+          </HelmetProvider>
+        </React.StrictMode>
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 }
 
diff --git a/src/screens/articles/ArticlesScreen.tsx b/src/screens/articles/ArticlesScreen.tsx
@@ -1,6 +1,10 @@
 import { VStack } from '@chakra-ui/react';
+import { useGetArticlesData } from '@services';
 
 const ArticlesScreen = () => {
+  const { data } = useGetArticlesData();
+  console.log(data);
+
   return (
     <VStack
       minH={'100vh'}
diff --git a/src/services/backend/client/client.ts b/src/services/backend/client/client.ts
@@ -0,0 +1,21 @@
+import axios from 'axios';
+// import { LEARNING_BACKEND_URL } from '../learnings/constants';
+
+// const instance = axios.create({
+//   baseURL: LEARNING_BACKEND_URL,
+// });
+
+export const GetRequest = async (url: string) => {
+  try {
+    const response = await axios.get(url, {
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+    });
+    return response.data;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+};
diff --git a/src/services/backend/client/index.ts b/src/services/backend/client/index.ts
@@ -0,0 +1 @@
+export { GetRequest } from './client';
diff --git a/src/services/backend/index.ts b/src/services/backend/index.ts
@@ -0,0 +1 @@
+export * from './learnings';
diff --git a/src/services/backend/learnings/constants.ts b/src/services/backend/learnings/constants.ts
@@ -0,0 +1,4 @@
+export const LEARNING_BACKEND_URL =
+  'https://static.amitraikwar.in/portfolio/articles';
+
+export const ARTICLES_URL = `/articles/portfolio/articles.json`;
diff --git a/src/services/backend/learnings/getArticlesData.ts b/src/services/backend/learnings/getArticlesData.ts
@@ -0,0 +1,8 @@
+import { GetRequest } from '../client/client';
+import { ARTICLES_URL } from './constants';
+
+const getArticlesData = async () => {
+  return await GetRequest(ARTICLES_URL);
+};
+
+export default getArticlesData;
diff --git a/src/services/backend/learnings/index.ts b/src/services/backend/learnings/index.ts
@@ -0,0 +1 @@
+export { default as getArticlesData } from './getArticlesData';
diff --git a/src/services/hooks/articles/index.ts b/src/services/hooks/articles/index.ts
@@ -0,0 +1 @@
+export { default as useGetArticlesData } from './useGetLearningData';
diff --git a/src/services/hooks/articles/useGetLearningData.tsx b/src/services/hooks/articles/useGetLearningData.tsx
@@ -0,0 +1,15 @@
+import { getArticlesData } from '../../backend';
+import { useCallQuery } from '../common';
+
+const useGetArticlesData = () => {
+  return useCallQuery({
+    method: () => {
+      return getArticlesData();
+    },
+    queryOptions: {
+      queryKey: ['articles'],
+    },
+  });
+};
+
+export default useGetArticlesData;
diff --git a/src/services/hooks/common/index.ts b/src/services/hooks/common/index.ts
@@ -0,0 +1,3 @@
+export * from './types';
+export { default as useCallQuery } from './useCallQuery';
+export { default as useCallSBMutation } from './useCallSBMutation';
diff --git a/src/services/hooks/common/types.ts b/src/services/hooks/common/types.ts
@@ -0,0 +1,25 @@
+import {
+  MutationFunction,
+  QueryFunction,
+  UseMutationOptions,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+
+export type useCallSBMutationArgs<
+  TRequest extends object,
+  TResponse extends object,
+> = {
+  method: MutationFunction<TResponse, TRequest>;
+  mutationOptions?: Omit<
+    UseMutationOptions<TResponse, Error, TRequest>,
+    'mutationFn'
+  >;
+};
+
+export type useCallSBQueryArgs<
+  TRequest extends object,
+  TResponse extends object,
+> = {
+  method: QueryFunction<TResponse>;
+  queryOptions: Omit<UseQueryOptions<TResponse, Error, TRequest>, 'queryFn'>;
+};
diff --git a/src/services/hooks/common/useCallQuery.ts b/src/services/hooks/common/useCallQuery.ts
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { useCallSBQueryArgs } from './types';
+
+/**
+ * Hook for calling a query.
+ * @param method - The method to get called once.
+ * @param mutationOptions - The options for the mutation.
+ * @returns useQuery result.
+ */
+const useCallQuery = <TRequest extends object, TResponse extends object>({
+  method,
+  queryOptions,
+}: useCallSBQueryArgs<TResponse, TRequest>) =>
+  useQuery({
+    ...queryOptions,
+    queryFn: (request) => method(request),
+  });
+
+export default useCallQuery;
diff --git a/src/services/hooks/common/useCallSBMutation.ts b/src/services/hooks/common/useCallSBMutation.ts
@@ -0,0 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
+import { useCallSBMutationArgs } from './types';
+
+const useCallSBMutation = <TRequest extends object, TResponse extends object>({
+  method,
+  mutationOptions,
+}: useCallSBMutationArgs<TResponse, TRequest>) =>
+  useMutation({
+    ...mutationOptions,
+    mutationFn: (request) => method(request),
+  });
+
+export default useCallSBMutation;
diff --git a/src/services/hooks/index.ts b/src/services/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './common';
+export * from './articles';
diff --git a/src/services/index.ts b/src/services/index.ts
@@ -0,0 +1 @@
+export * from './hooks';
diff --git a/tsconfig.path.json b/tsconfig.path.json
@@ -10,6 +10,7 @@
       "@localization": ["src/localization"],
       "@providers": ["src/providers"],
       "@router": ["src/router"],
+      "@services": ["src/services"],
       "@screens": ["src/screens"],
       "@screens/*": ["src/screens/*"],
       "@store": ["src/store"],
diff --git a/yarn.lock b/yarn.lock
