feat(): Adding article feature

ar1603 · ar1603 · commit be66a2d4c09a · 2025-02-12T11:27:06.000+05:30
diff --git a/package.json b/package.json
@@ -3,7 +3,6 @@
   "version": "0.12.2",
   "description": "Amit Raikwar Portfolio website",
   "main": "index.tsx",
-  "proxy": "http://static.amitraikwar.in",
   "scripts": {
     "start": "craco start",
     "build": "craco build",
diff --git a/public/noise.webp b/public/noise.webp
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,7 @@ import {
   ThemeProvider,
 } from '@providers';
 import { HelmetProvider } from 'react-helmet-async';
-import { CursorProvider } from '@components';
+import { CursorProvider, Noise } from '@components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient({
@@ -25,6 +25,7 @@ function App() {
           <HelmetProvider>
             <CursorProvider>
               <LocalizationProvider>
+                <Noise />
                 <AppRouterProvider />
               </LocalizationProvider>
             </CursorProvider>
diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx
@@ -0,0 +1,68 @@
+import { Box, HStack, Img, Text } from '@chakra-ui/react';
+
+type ArticleCardProps = {
+  title: string;
+  image: string;
+  description: string;
+  group_name: string;
+  views: number;
+  likes: number;
+  last_updated: string;
+};
+
+const ArticleCard = ({
+  title,
+  last_updated,
+  image,
+  description,
+  group_name,
+  views,
+  likes,
+}: ArticleCardProps) => {
+  return (
+    <Box
+      bg={'black'}
+      padding={4}
+      borderRadius={10}
+      border={'1px solid #ffffffa0'}
+      width={'300px'}
+      color={'white'}
+    >
+      <Text fontSize="2xl" fontWeight="bold" color="brand.900" marginBottom={2}>
+        {title}
+      </Text>
+      <Img src={image} alt={title} h={'200px'} w={'100%'} />
+      <HStack justifyContent="space-between">
+        <Text
+          fontSize="xs"
+          fontWeight="500"
+          color="brand.500"
+          marginTop={2}
+          marginBottom={2}
+        >
+          {new Date(last_updated).toDateString()}
+        </Text>
+        <HStack>
+          <Text>👁️ {views}</Text>
+          <Text>📝 0</Text>
+          <Text>👍🏻 {likes}</Text>
+        </HStack>
+      </HStack>
+      <Text
+        fontSize="xs"
+        fontWeight="500"
+        color="brand.500"
+        border={'1px solid #ffffffa0'}
+        borderRadius={10}
+        padding={2}
+      >
+        {group_name}
+      </Text>
+      <Text fontSize="sm" marginTop={2}>
+        {description}
+      </Text>
+    </Box>
+  );
+};
+
+export default ArticleCard;
diff --git a/src/components/ArticleCard/index.ts b/src/components/ArticleCard/index.ts
@@ -0,0 +1 @@
+export { default as ArticleCard } from './ArticleCard';
diff --git a/src/components/LoadingSpinner/LoadingSpinner.tsx b/src/components/LoadingSpinner/LoadingSpinner.tsx
@@ -0,0 +1,24 @@
+import { Box, CircularProgress, Text } from '@chakra-ui/react';
+
+const LoadingScreen = () => {
+  return (
+    <Box
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        backgroundColor: '#000000',
+        rowGap: '1rem',
+      }}
+    >
+      <CircularProgress isIndeterminate color="violet" />
+      <Text color="white" fontSize="lg" fontWeight="bold" textAlign="center">
+        Loading...
+      </Text>
+    </Box>
+  );
+};
+
+export default LoadingScreen;
diff --git a/src/components/LoadingSpinner/index.ts b/src/components/LoadingSpinner/index.ts
@@ -0,0 +1 @@
+export { default as LoadingSpinner } from './LoadingSpinner';
diff --git a/src/components/Noise/Noise.tsx b/src/components/Noise/Noise.tsx
@@ -0,0 +1,13 @@
+const Noise = ({ type = 'bg' }: { type?: 'bg' | 'fg' }) => {
+  return (
+    <div
+      className={`${type === 'bg' ? 'absolute inset-0 w-full h-full' : 'w-[100%] h-[100%]'} transform opacity-10 [mask-image:radial-gradient(#fff,transparent,75%)]`}
+      style={{
+        backgroundImage: 'url(/noise.webp)',
+        backgroundSize: '30%',
+      }}
+    ></div>
+  );
+};
+
+export default Noise;
diff --git a/src/components/Noise/index.ts b/src/components/Noise/index.ts
@@ -0,0 +1 @@
+export { default as Noise } from './Noise';
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -29,7 +29,10 @@ const Timeline = ({
   const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
 
   return (
-    <div className="w-full bg-black font-sans md:px-10" ref={containerRef}>
+    <div
+      className="w-full bg-transparent font-sans md:px-10"
+      ref={containerRef}
+    >
       <div className="max-w-7xl mx-auto py-20 px-4 md:px-8 lg:px-10">
         <p className="text-neutral-900 dark:text-neutral-100 text-sm md:text-base max-w-xl">
           {title}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './ArticleCard';
 export * from './animateModal';
 export * from './Button';
 export * from './CardComponent';
@@ -6,8 +7,10 @@ export * from './CoverText';
 export * from './Cursor';
 export * from './DotPattern';
 export * from './Lights';
+export * from './LoadingSpinner';
 export * from './MeteorEffect';
 export * from './Marquee';
+export * from './Noise';
 export * from './Theme';
 export * from './TitleBox';
 export * from './SpotlightCard';
diff --git a/src/providers/lazyProvider/LazyComponentProvider.tsx b/src/providers/lazyProvider/LazyComponentProvider.tsx
@@ -1,31 +1,10 @@
 import * as React from 'react';
 import { LazyComponentProviderProps } from './types';
-import { Box, CircularProgress, Text } from '@chakra-ui/react';
-
-const LoadingScreen = () => {
-  return (
-    <Box
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh',
-        backgroundColor: '#000000',
-        rowGap: '1rem',
-      }}
-    >
-      <CircularProgress isIndeterminate color="violet" />
-      <Text color="white" fontSize="lg" fontWeight="bold" textAlign="center">
-        Loading...
-      </Text>
-    </Box>
-  );
-};
+import { LoadingSpinner } from '@components';
 
 const LazyComponentProvider = (props: LazyComponentProviderProps) => {
   return (
-    <React.Suspense fallback={<LoadingScreen />}>
+    <React.Suspense fallback={<LoadingSpinner />}>
       {props.children}
     </React.Suspense>
   );
diff --git a/src/screens/articles/ArticlesScreen.tsx b/src/screens/articles/ArticlesScreen.tsx
@@ -1,18 +1,30 @@
-import { VStack } from '@chakra-ui/react';
+import { VStack, Wrap } from '@chakra-ui/react';
+import { ArticleCard, LoadingSpinner } from '@components';
 import { useGetArticlesData } from '@services';
 
 const ArticlesScreen = () => {
   const { data } = useGetArticlesData();
   console.log(data);
 
+  if (!data) {
+    return <LoadingSpinner />;
+  }
+
   return (
     <VStack
       minH={'100vh'}
       id="projects"
       rowGap={20}
       bg={'black'}
+      px={'10'}
       paddingTop={20}
-    ></VStack>
+    >
+      <Wrap spacing="30px" justify="center">
+        {(data as any).data.rows.map((article: any) => (
+          <ArticleCard key={article.id} {...article} />
+        ))}
+      </Wrap>
+    </VStack>
   );
 };
 
diff --git a/src/screens/mainFlow/contents/Work.tsx b/src/screens/mainFlow/contents/Work.tsx
@@ -1,5 +1,5 @@
 import { Box, Heading, HStack, Text, Wrap } from '@chakra-ui/react';
-import { Timeline } from '@components';
+import { Noise, Timeline } from '@components';
 import { WORK_DATA } from '@data';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useState } from 'react';
@@ -132,6 +132,7 @@ const Work = () => {
       <Heading position={'sticky'} top={'10vh'} zIndex={3}>
         {t('work.title')}
       </Heading>
+      <Noise type="fg" />
       <Timeline title={t('work.description')} data={WorkUIData()} />
     </Box>
   );
diff --git a/src/services/backend/client/client.ts b/src/services/backend/client/client.ts
@@ -1,18 +1,23 @@
 import axios from 'axios';
-// import { LEARNING_BACKEND_URL } from '../learnings/constants';
+import { LEARNING_BACKEND_URL } from '../learnings/constants';
 
-// const instance = axios.create({
-//   baseURL: LEARNING_BACKEND_URL,
-// });
+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',
-      },
-    });
+    const response = await instance.get(url);
+    return response.data;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+};
+
+export const PostRequest = async (url: string, data: unknown) => {
+  try {
+    const response = await instance.post(url, data);
     return response.data;
   } catch (error) {
     // eslint-disable-next-line no-console
diff --git a/src/services/backend/client/index.ts b/src/services/backend/client/index.ts
@@ -1 +1 @@
-export { GetRequest } from './client';
+export { GetRequest, PostRequest } from './client';
diff --git a/src/services/backend/learnings/constants.ts b/src/services/backend/learnings/constants.ts
@@ -1,4 +1,12 @@
-export const LEARNING_BACKEND_URL =
-  'https://static.amitraikwar.in/portfolio/articles';
+export const LEARNING_BACKEND_URL = 'https://amitraikwar-services.onrender.com';
 
-export const ARTICLES_URL = `/articles/portfolio/articles.json`;
+// Query
+export const ALL_ARTICLES_URL = `/all_articles`;
+export const ARTICLES_URL = `/get_article`;
+export const LIKE_ARTICLE_URL = `/like_article`;
+
+// Mutation
+export const ADD_ARTICLE_URL = `/add_article`;
+export const DELETE_ARTICLE_URL = `/delete_article`;
+export const UPDATE_ARTICLE_URL = `/update_article`;
+export const ADD_COMMENT_URL = `/add_comment`;
diff --git a/src/services/backend/learnings/getAllArticlesData.ts b/src/services/backend/learnings/getAllArticlesData.ts
@@ -0,0 +1,9 @@
+import { GetRequest } from '../client/client';
+import { ALL_ARTICLES_URL } from './constants';
+import { StandardResponse } from './types';
+
+const getArticlesData = async (): Promise<StandardResponse> => {
+  return await GetRequest(ALL_ARTICLES_URL);
+};
+
+export default getArticlesData;
diff --git a/src/services/backend/learnings/getArticleData.ts b/src/services/backend/learnings/getArticleData.ts
diff --git a/src/services/backend/learnings/index.ts b/src/services/backend/learnings/index.ts
@@ -1 +1 @@
-export { default as getArticlesData } from './getArticlesData';
+export { default as getArticlesData } from './getAllArticlesData';
diff --git a/src/services/backend/learnings/likePageArticleData.ts b/src/services/backend/learnings/likePageArticleData.ts
@@ -0,0 +1,8 @@
+import { GetRequest } from '../client/client';
+import { LIKE_ARTICLE_URL } from './constants';
+
+const getArticlesData = async () => {
+  return await GetRequest(LIKE_ARTICLE_URL);
+};
+
+export default getArticlesData;
diff --git a/src/services/backend/learnings/types.ts b/src/services/backend/learnings/types.ts
@@ -0,0 +1,6 @@
+export type StandardResponse = {
+  status: 'DATA' | 'ERROR';
+  successMessage?: string;
+  errorMessage?: string;
+  data: unknown;
+};
diff --git a/src/services/hooks/articles/index.ts b/src/services/hooks/articles/index.ts
@@ -1 +1 @@
-export { default as useGetArticlesData } from './useGetLearningData';
+export { default as useGetArticlesData } from './useGetAllArticlesData';
diff --git a/src/services/hooks/articles/useGetAllArticlesData.tsx b/src/services/hooks/articles/useGetAllArticlesData.tsx
@@ -3,9 +3,7 @@ import { useCallQuery } from '../common';
 
 const useGetArticlesData = () => {
   return useCallQuery({
-    method: () => {
-      return getArticlesData();
-    },
+    method: () => getArticlesData(),
     queryOptions: {
       queryKey: ['articles'],
     },
diff --git a/src/services/hooks/articles/useGetArticleData.tsx b/src/services/hooks/articles/useGetArticleData.tsx
@@ -0,0 +1,13 @@
+import { getArticlesData } from '../../backend';
+import { useCallQuery } from '../common';
+
+const useGetArticlesData = () => {
+  return useCallQuery({
+    method: () => getArticlesData(),
+    queryOptions: {
+      queryKey: ['article'],
+    },
+  });
+};
+
+export default useGetArticlesData;
diff --git a/src/services/hooks/articles/useLikeArticleData.tsx b/src/services/hooks/articles/useLikeArticleData.tsx
@@ -0,0 +1,10 @@
+import { getArticlesData } from '../../backend';
+import { useCallSBMutation } from '../common';
+
+const useLikeArticleData = () => {
+  return useCallSBMutation({
+    method: () => getArticlesData(),
+  });
+};
+
+export default useLikeArticleData;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as ArticleCard } from './ArticleCard';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as LoadingSpinner } from './LoadingSpinner';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as Noise } from './Noise';`