Modern UI: Upcoming Release (1.6.0)

frontend/src/components/AppContent.tsx

@@ -1,5 +1,5 @@
 import {FirebaseProvider} from '@/hooks/FirebaseContext';
-import {useCheckTokenStatus} from '@/hooks/useGetTokenStatus';
+import {useCheckTokenStatus} from '@/src/hooks/useGetTokenStatus';
 import {useNotificationListeners} from '@/hooks/useNotificationListener';
 import {useVersionCheck} from '@/hooks/useVersionCheck';
 import {SocketProvider} from '@/SocketContext';
@@ -23,6 +23,7 @@ import {setConnected} from '../store/NetworkSlice';
 import {firebaseInit} from '../helper/firebase';
 import {cleanUpDownloads, KEYS, retrieveItem} from '../helper/Utils';
 import { setUserToken } from '../store/UserSlice';
+import axios from 'axios';
 
 export default function AppContent() {
   const navigationRef = useRef(null);
@@ -32,6 +33,7 @@ export default function AppContent() {
   };
 
   const {data: tokenRes = null, isLoading} = useCheckTokenStatus();
+
   const {visible, storeUrl} = useVersionCheck();
   const dispatch = useDispatch();
 
@@ -43,8 +45,10 @@ export default function AppContent() {
   }, [tokenRes, isLoading]);
 
   const checkToken = async () =>{
-    const token = await retrieveItem(KEYS.USER_TOKEN);
-
+     const token = await retrieveItem(KEYS.USER_TOKEN);
+     //axios.defaults.headers.
+      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+      axios.defaults.headers.common["Content-Type"] = "application/json";
       dispatch(setUserToken(token));
       initDeepLinking(navigationRef.current, tokenRes?.isValid || false);
 

frontend/src/hooks/useArticleRepost.ts

@@ -0,0 +1,18 @@
+import {useMutation, UseMutationResult} from '@tanstack/react-query';
+import {REPOST_ARTICLE} from '../helper/APIUtils';
+import axios, {AxiosError} from 'axios';
+
+export const useRepostArticle = (
+
+): UseMutationResult<any, AxiosError, number> => {
+  return useMutation({
+    mutationKey: [`repost-article`],
+    mutationFn: async ( articleId: number,) => {
+      const res = await axios.post(REPOST_ARTICLE, {
+        articleId: articleId,
+      });
+
+      return res.data as any;
+    },
+  });
+};

frontend/src/hooks/useChangePassword.ts

@@ -0,0 +1,24 @@
+import {useMutation, UseMutationResult} from '@tanstack/react-query';
+import axios, {AxiosError} from 'axios';
+import {CHANGE_PASSWORD_API} from '../helper/APIUtils';
+
+type ChangePassWordReq = {
+  email: string;
+  newPassword: string;
+};
+export const useChangePasswordMutation = (): UseMutationResult<
+  any,
+  AxiosError,
+  ChangePassWordReq
+> => {
+  return useMutation({
+    mutationKey: ['generate-new-password'],
+    mutationFn: async (req: ChangePassWordReq) => {
+      const res = await axios.post(CHANGE_PASSWORD_API, {
+        email: req.email,
+        newPassword: req.newPassword,
+      });
+      return res.data as any;
+    },
+  });
+};

frontend/src/hooks/useCheckUserHandle.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { CHECK_USER_HANDLE } from "../helper/APIUtils";
+
+export const useCheckUserHandleAvailability = (handle: string) => {
+  return useQuery({
+    queryKey: ["check-user-handle", handle],
+    queryFn: async () => {
+      const response = await axios.post(CHECK_USER_HANDLE, {
+        userHandle: handle,
+      });
+
+      return response.data;
+    },
+    enabled: handle.length > 2, 
+    retry: false,
+  });
+};

frontend/src/hooks/useGetArticleContent.ts

@@ -0,0 +1,15 @@
+import {useQuery, UseQueryResult} from '@tanstack/react-query';
+import axios, {AxiosError} from 'axios';
+import {GET_ARTICLE_CONTENT} from '../helper/APIUtils';
+
+export const useGetArticleContent = (
+  recordId: string,
+): UseQueryResult<string, AxiosError> => {
+  return useQuery({
+    queryKey: ['get-article-content', recordId],
+    queryFn: async () => {
+      const response = await axios.get(`${GET_ARTICLE_CONTENT}/${recordId}`);
+      return response.data.htmlContent as string;
+    },
+  });
+};

frontend/src/hooks/useGetArticleDetail.ts

@@ -0,0 +1,17 @@
+import {useQuery, UseQueryResult} from '@tanstack/react-query';
+import {ArticleData} from '../type';
+import axios, {AxiosError} from 'axios';
+import {GET_ARTICLE_BY_ID} from '../helper/APIUtils';
+
+export const useGetArticleDetails = (
+  articleId: number,
+): UseQueryResult<ArticleData, AxiosError> => {
+  return useQuery({
+    queryKey: ['get-article-by-id', articleId],
+    queryFn: async () => {
+      const response = await axios.get(`${GET_ARTICLE_BY_ID}/${articleId}`);
+
+      return response.data.article as ArticleData;
+    },
+  });
+};

frontend/src/hooks/useGetArticleTags.ts

@@ -0,0 +1,28 @@
+import {useQuery, UseQueryResult} from '@tanstack/react-query';
+import axios, {AxiosError} from 'axios';
+import {ARTICLE_TAGS_API, PROD_URL} from '../helper/APIUtils';
+import {Category} from '../type';
+
+const categoryFunc = async () => {
+  try{
+     const {data: categoryData} = await axios.get(
+    `${PROD_URL + ARTICLE_TAGS_API}`,
+  );
+
+  return categoryData as Category[];
+  }catch(err){
+    console.log("GET CATEGORY ERR", err);
+    return null;
+  }
+};
+
+export const useGetCategories = (isConnected: boolean): UseQueryResult<
+  Category[] | null,
+  AxiosError
+> => {
+  return useQuery({
+    queryKey: ['get-categories'],
+    queryFn: categoryFunc,
+    enabled: isConnected
+  });
+};

frontend/src/hooks/useGetImprovementById.ts

@@ -0,0 +1,17 @@
+import {useQuery, UseQueryResult} from '@tanstack/react-query';
+import {EditRequest} from '../type';
+import axios, {AxiosError} from 'axios';
+import {GET_IMPROVEMENT_BY_ID} from '../helper/APIUtils';
+
+export const useGetImprovementById = (
+  requestId: string,
+): UseQueryResult<EditRequest, AxiosError> => {
+  return useQuery({
+    queryKey: ['get-improvement-by-id', requestId],
+    queryFn: async () => {
+      const response = await axios.get(`${GET_IMPROVEMENT_BY_ID}/${requestId}`);
+
+      return response.data as EditRequest;
+    },
+  });
+};

frontend/src/hooks/useGetImprovementContent.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { GET_IMPROVEMENT_CONTENT } from '../helper/APIUtils';
+
+interface Props {
+  recordId?: string;
+  articleRecordId?: string;
+}
+
+export const useGetImprovementContent = ({
+  recordId,
+  articleRecordId,
+}: Props) => {
+  return useQuery({
+    queryKey: ['get-improvement-content', recordId, articleRecordId],
+    queryFn: async () => {
+      let url = '';
+
+      if (recordId) {
+        url = `${GET_IMPROVEMENT_CONTENT}?articleRecordId=${articleRecordId}`;
+      } else {
+        url = `${GET_IMPROVEMENT_CONTENT}?recordid=${recordId}&articleRecordId=${articleRecordId}`;
+      }
+
+      const response = await axios.get(url);
+
+      return response.data.htmlContent as string;
+    },
+    enabled: !!articleRecordId,
+  });
+};

frontend/src/hooks/useGetMonthlyReadReport.ts

@@ -0,0 +1,36 @@
+
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import axios from "axios";
+import { MonthStatus } from "../type";
+import { GET_MONTHLY_READ_REPORT } from "../helper/APIUtils";
+
+export const useGetAuthorMonthlyReadReport = (
+  user_id: string,
+  selectedMonth: number,
+  userId?: string,
+  others?: boolean,
+  isConnected?: boolean,
+
+): UseQueryResult<MonthStatus[]> => {
+
+  return useQuery<MonthStatus[]>({
+    queryKey: ["get-user-monthly-read-report", user_id, userId, others],
+
+    queryFn: async () => {
+
+        if(selectedMonth === -1){
+            return [];
+        }
+
+       let url = others
+               ? `${GET_MONTHLY_READ_REPORT}?userId=${userId}&month=${selectedMonth}`
+               : `${GET_MONTHLY_READ_REPORT}?userId=${user_id}&month=${selectedMonth}`;
+
+      const response = await axios.get(url);
+
+      return response.data.monthlyReads as MonthStatus[];
+    },
+
+    enabled: !!isConnected && !!(!userId && others) && !!(!user_id && !others),
+  });
+};

frontend/src/hooks/useGetMonthlyWriteReport.ts

@@ -0,0 +1,35 @@
+
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import axios from "axios";
+import { MonthStatus } from "../type";
+import { GET_MONTHLY_WRITES_REPORT } from "../helper/APIUtils";
+
+export const useGetAuthorMonthlyReadReport = (
+  user_id: string,
+  selectedMonth: number,
+  userId?: string,
+  others?: boolean,
+  isConnected?: boolean,
+): UseQueryResult<MonthStatus[]> => {
+
+  return useQuery<MonthStatus[]>({
+    queryKey: ["get-user-monthly-write-report", user_id, userId, others],
+
+    queryFn: async () => {
+
+        if(selectedMonth === -1){
+            return [];
+        }
+
+         let url = others
+                   ? `${GET_MONTHLY_WRITES_REPORT}?userId=${userId}&month=${selectedMonth}`
+                   : `${GET_MONTHLY_WRITES_REPORT}?userId=${user_id}&month=${selectedMonth}`;
+
+      const response = await axios.get(url);
+
+      return response.data.monthlyWrites as MonthStatus[];
+    },
+
+    enabled: !!isConnected && !!(!userId && others) && !!(!user_id && !others),
+  });
+};

frontend/src/hooks/useGetMostViewedArticle.ts

@@ -0,0 +1,30 @@
+
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import axios from "axios";
+import { ArticleData } from "../type";
+import { GET_MOSTLY_VIEWED } from "../helper/APIUtils";
+
+export const useGetAuthorMostViewedArticles = (
+  user_id: string,
+  userId?: string,
+  others?: boolean,
+  isConnected?: boolean
+): UseQueryResult<ArticleData[]> => {
+
+  return useQuery<ArticleData[]>({
+    queryKey: ["get-mostly-viewed-article", user_id, userId, others],
+
+    queryFn: async () => {
+
+      const url = others
+        ? `${GET_MOSTLY_VIEWED}${userId}`
+        : `${GET_MOSTLY_VIEWED}${user_id}`;
+
+      const response = await axios.get(url);
+
+      return response.data as ArticleData[];
+    },
+
+    enabled: !!isConnected && !!(!userId && others) && !!(!user_id && !others),
+  });
+};

frontend/src/hooks/useGetProfile.ts

@@ -0,0 +1,14 @@
+import {useQuery, UseQueryResult} from '@tanstack/react-query';
+import {User} from '../type';
+import axios, {AxiosError} from 'axios';
+import {GET_PROFILE_API} from '../helper/APIUtils';
+
+export const useGetProfile = (): UseQueryResult<User, AxiosError> => {
+  return useQuery({
+    queryKey: ['get-my-profile'],
+    queryFn: async () => {
+      const response = await axios.get(`${GET_PROFILE_API}`);
+      return response.data.profile as User;
+    },
+  });
+};

frontend/src/hooks/useGetProfileImageById.ts

@@ -0,0 +1,18 @@
+import axios, { AxiosError } from "axios";
+import { GET_PROFILE_IMAGE_BY_ID } from "../helper/APIUtils";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+
+export const useGetUserProfileImage = (authorId: string): UseQueryResult<
+ string,
+ AxiosError
+>=>{
+
+    return useQuery({
+    queryKey: ['author_profile_image', authorId],
+    queryFn: async () => {
+      const response = await axios.get(
+        `${GET_PROFILE_IMAGE_BY_ID}/${authorId}`);
+      return response.data.profile_image as string;
+    },
+  });
+}

frontend/src/hooks/useGetReportReasons.ts

@@ -0,0 +1,28 @@
+import {useQuery, UseQueryResult} from '@tanstack/react-query';
+import axios, {AxiosError} from 'axios';
+import {GET_REPORT_REASONS} from '../helper/APIUtils';
+import {ReportReason} from '../type';
+
+const reasonsFunc = async () => {
+  try{
+    const {data: categoryData} = await axios.get(
+    GET_REPORT_REASONS
+  );
+
+  return categoryData as ReportReason[];
+  }catch(err){
+    console.log("GET CATEGORY ERR", err);
+    return null;
+  }
+};
+
+export const useGetReasons = (isConnected: boolean): UseQueryResult<
+  ReportReason[] | null,
+  AxiosError
+> => {
+  return useQuery({
+    queryKey: ['get-report-reasons'],
+    queryFn: reasonsFunc,
+    enabled: isConnected
+  });
+};