浏览代码

Utility Functions Refactoring

Savio Fernando 11 月之前
父节点
当前提交
6d0d93b2bb

+ 1 - 1
src/components/molecules/Cards/CommentCard.js

@@ -6,7 +6,7 @@ import { Menu, Provider } from 'react-native-paper'
 import colors from '../../../constants/colors'
 import fonts from '../../../constants/fonts'
 import ButtonWrapper from '../../atoms/Buttons/ButtonWrapper'
-import { getTimestamp } from '../../../constants/functions'
+import { getTimestamp } from '../../../utils/functions'
 import images from '../../../assets/images/images'
 import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
 

+ 1 - 1
src/components/molecules/Cards/HorizontalNewsCard.js

@@ -2,7 +2,7 @@ import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-n
 import React from 'react'
 import images from '../../../assets/images/images'
 import ShareButton from '../Buttons/ShareButton'
-import { getTimestamp } from '../../../constants/functions'
+import { getTimestamp } from '../../../utils/functions'
 import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
 import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
 import fonts from '../../../constants/fonts'

+ 1 - 1
src/components/molecules/Cards/HorizontalNewsCardVariant.js

@@ -5,7 +5,7 @@ import ShareButton from '../../atoms/Buttons/ShareButton'
 import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
 import fonts from '../../../constants/fonts'
 import colors from '../../../constants/colors'
-import { getScreenType, getTimestamp } from '../../../constants/functions'
+import { getScreenType, getTimestamp } from '../../../utils/functions'
 import images from '../../../assets/images/images'
 import { ThemeContext } from '../../../context/theme.context'
 

+ 1 - 1
src/components/molecules/Cards/NotificationCard.js

@@ -3,7 +3,7 @@ import React from 'react'
 import images from '../../../assets/images/images'
 import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
 import colors from '../../../constants/colors'
-import { getTimestamp } from '../../../constants/functions'
+import { getTimestamp } from '../../../utils/functions'
 import fonts from '../../../constants/fonts'
 
 

+ 1 - 1
src/components/molecules/Cards/VerticalNewsCard.js

@@ -5,7 +5,7 @@ import images from '../../../assets/images/images'
 import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
 import fonts from '../../../constants/fonts'
 import { ThemeContext } from '../../../context/theme.context'
-import { getTimestamp } from '../../../constants/functions'
+import { getTimestamp } from '../../../utils/functions'
 import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
 import ShareButton from '../../atoms/Buttons/ShareButton'
 

+ 1 - 1
src/components/organisms/Sections/CategorySection.js

@@ -10,7 +10,7 @@ import {
   navigateToArticle,
   navigateToListViewPage,
   onShare,
-} from '../../../constants/functions';
+} from '../../../utils/functions';
 import SectionHeader from '../../molecules/Header/SectionHeader';
 import {
   horizontalScale,

+ 1 - 1
src/components/organisms/Sections/NoBookmarkSection.js

@@ -5,7 +5,7 @@ import fonts from '../../../constants/fonts'
 import colors from '../../../constants/colors'
 import { horizontalScale, moderateScale, screenHeight, verticalScale } from '../../../constants/metrics'
 import ThemedTextButton from '../../molecules/Buttons/ThemeTextButton'
-import { navigateToHomePage } from '../../../constants/functions'
+import { navigateToHomePage } from '../../../utils/functions'
 import { useNavigation } from '@react-navigation/native'
 
 

+ 1 - 1
src/components/organisms/Sections/NotificationSection.js

@@ -3,7 +3,7 @@ import React from 'react'
 import fonts from '../../../constants/fonts'
 import colors from '../../../constants/colors'
 import images from '../../../assets/images/images'
-import { getDate } from '../../../constants/functions'
+import { getDate } from '../../../utils/functions'
 import NotificationCard from '../../molecules/Cards/NotificationCard'
 import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
 

+ 1 - 1
src/components/organisms/Sections/RecentPostsSection.js

@@ -2,7 +2,7 @@ import { ScrollView, StyleSheet, Text, View } from 'react-native'
 import React, { useContext } from 'react'
 import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
 import VerticalNewsCard from '../../molecules/Cards/VerticalNewsCard'
-import { navigateToArticle, useConstructor } from '../../../constants/functions'
+import { navigateToArticle, useConstructor } from '../../../utils/functions'
 import SectionHeader from '../../molecules/Header/SectionHeader'
 import { ThemeContext } from '../../../context/theme.context'
 import colors from '../../../constants/colors'

+ 1 - 1
src/components/organisms/Sections/TrendingSection.js

@@ -2,7 +2,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import React, { useContext } from 'react';
 import Carousel from 'react-native-reanimated-carousel';
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../../constants/functions';
+import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../../utils/functions';
 import fonts from '../../../constants/fonts';
 import colors from '../../../constants/colors';
 import ImageBGCard from '../../molecules/Cards/ImageBGCard';

+ 1 - 1
src/navigation/HomePageNavigator.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { getScreenType } from '../constants/functions';
+import { getScreenType } from '../utils/functions';
 import colors from '../constants/colors';
 import SearchNavigator from './SearchNavigator';
 import MainPageNavigator from './MainPageNavigator';

+ 1 - 1
src/screens/Auth/ChooseTopicPage.js

@@ -7,7 +7,7 @@ import { horizontalScale, moderateScale, verticalScale } from '../../constants/m
 import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
 import { getCategories } from '../../api/data'
 import { Checkbox, List } from 'react-native-paper'
-import { useConstructor } from '../../constants/functions'
+import { useConstructor } from '../../utils/functions'
 import { BASE_URL } from '../../api/urls'
 
 const ChooseTopicPage = props => {

+ 1 - 1
src/screens/Help/ContactPage.js

@@ -5,7 +5,7 @@ import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitle
 import { ScrollView } from 'react-native-gesture-handler';
 import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton';
 import FormTextInput from '../../components/atoms/Input/FormTextInput';
-import { capitalize } from '../../constants/functions';
+import { capitalize } from '../../utils/functions';
 import colors from '../../constants/colors';
 
 const ContactPage = props => {

+ 1 - 1
src/screens/News/NewsDetailPage.js

@@ -26,7 +26,7 @@ import {
   getTimestamp,
   navigateToArticle,
   useConstructor,
-} from '../../constants/functions';
+} from '../../utils/functions';
 import fonts from '../../constants/fonts';
 import BookmarkButton from '../../components/atoms/Buttons/BookmarkButton';
 import ShareButton from '../../components/atoms/Buttons/ShareButton';

+ 1 - 1
src/screens/News/NewsListPage.js

@@ -1,6 +1,6 @@
 import { FlatList, ScrollView, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import React from 'react'
-import { navigateToArticle, useConstructor } from '../../constants/functions'
+import { navigateToArticle, useConstructor } from '../../utils/functions'
 import { getArticlesByCategory, getArticlesBySearch, getTrendingNews } from '../../api/data'
 import LoadingScreen from '../../components/organisms/Sections/LoadingScreen'
 import colors from '../../constants/colors'

+ 1 - 1
src/screens/Search/SearchListPage.js

@@ -2,7 +2,7 @@ import { FlatList, SafeAreaView, ScrollView, StyleSheet, Text, TouchableOpacity,
 import React, { useState } from 'react'
 import colors from '../../constants/colors'
 import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
-import { useConstructor } from '../../constants/functions'
+import { useConstructor } from '../../utils/functions'
 import IonIcon from 'react-native-vector-icons/Ionicons'
 import { Checkbox, IconButton, List, Modal, PaperProvider, Portal, ToggleButton } from 'react-native-paper'
 import { getArticlesBySearch, getMenus } from '../../api/data'

+ 1 - 1
src/screens/Search/SearchPage.js

@@ -7,7 +7,7 @@ import { Checkbox, IconButton, List, Modal, PaperProvider, Portal, TextInput, To
 import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../constants/metrics'
 import IonIcon from 'react-native-vector-icons/Ionicons'
 import fonts from '../../constants/fonts'
-import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../constants/functions'
+import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../utils/functions'
 import { getArticlesBySearch, getCategories, getMenus, getTrendingNews } from '../../api/data'
 import LoadingScreen from '../../components/organisms/Sections/LoadingScreen'
 import { PAGINATE_BY } from '../../api/urls'

+ 1 - 1
src/screens/Sidebar/SidebarPage.js

@@ -18,7 +18,7 @@ import fonts from '../../constants/fonts';
 import CircularPrimaryBackButton from '../../components/atoms/Buttons/CircularPrimaryBackButton';
 import colors from '../../constants/colors';
 import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader';
-import { navigateToListViewPage, useConstructor } from '../../constants/functions';
+import { navigateToListViewPage, useConstructor } from '../../utils/functions';
 import { getArticlesByCategory, getCategories } from '../../api/data';
 import { BASE_URL } from '../../api/urls';
 import CustomSwitch from '../../components/atoms/Switch/CustomSwitch';

+ 69 - 35
src/constants/functions.js → src/utils/functions.js

@@ -1,10 +1,10 @@
 import { useState } from "react";
-import { screenWidth } from "./metrics";
 import { Share } from "react-native";
 
-
-/*
-    Executes before Render
+/** 
+* Custom Hook to only be executed at Initial Mount. Similar to componentDidMount Lifecycle Method.
+* @param {Function} callBack - Callback Function to be executed
+* @return {null}
 */
 export const useConstructor = (callBack = () => { }) => {
     const [hasBeenCalled, setHasBeenCalled] = useState(false);
@@ -13,6 +13,9 @@ export const useConstructor = (callBack = () => { }) => {
     setHasBeenCalled(true);
 }
 
+/**
+ * Datetime Constants
+ */
 const _MS_PER_SECOND = 1000;
 const _MS_PER_MINUTE = _MS_PER_SECOND * 60;
 const _MS_PER_HOUR = _MS_PER_MINUTE * 60;
@@ -20,8 +23,19 @@ const _MS_PER_DAY = _MS_PER_HOUR * 24;
 const _MS_PER_MONTH = _MS_PER_DAY * 31;
 const _MS_PER_YEAR = _MS_PER_MONTH * 12;
 
+/** 
+* Capitilize String.
+* @param {string} str - Text String
+* @return {string} Capitalized String.
+*/
 export const capitalize = (str) => str.charAt(0).toUpperCase() + str.substring(1, str.length).toLowerCase()
 
+/** 
+* Get Difference betweenn two dates.
+* @param {Date} startDate - Start Date
+* @param {Date} endDate - End Date 
+* @return {object} Returns differences in years,months, days, hours, minutes and seconds .
+*/
 export const getDifferenceInDates = (startDate, endDate) => {
     var diff = Math.floor(startDate.getTime() - endDate.getTime());
     return {
@@ -35,8 +49,13 @@ export const getDifferenceInDates = (startDate, endDate) => {
 
 }
 
-export const getTimestamp = (iso_date_str) => {
-    let diffObj = getDifferenceInDates(new Date(), new Date(iso_date_str))
+/** 
+* get Humanized Timestamp.
+* @param {string} isoTimestamp - ISO String for Timestamp
+* @return {string} Humanized Timestamp
+*/
+export const getTimestamp = (isoTimestamp) => {
+    let diffObj = getDifferenceInDates(new Date(), new Date(isoTimestamp))
     var result = "Timestamp Not Found"
     for (const key of Object.keys(diffObj)) {
         if (diffObj[key] > 0) {
@@ -48,6 +67,11 @@ export const getTimestamp = (iso_date_str) => {
 
 }
 
+/** 
+* Get Month Name.
+* @param {string} index - Month Index Number.
+* @return {string} Month Name
+*/
 const _getMonth = (index) => {
     const months = {
         0: "January",
@@ -70,56 +94,66 @@ const _getMonth = (index) => {
         return "Month Not Found"
     }
 
-}
-
-export const getDate = (iso_date_str) => {
-    let date = new Date(iso_date_str)
+/** 
+* Get Humanized DateTime.
+* @param {string} isoTimestamp - ISO String for Timestamp.
+* @return {string} Humanized Date String
+*/}
+export const getDate = (isoTimestamp) => {
+    let date = new Date(isoTimestamp)
     return `${date.getDate()} ${_getMonth(date.getMonth())} ${date.getFullYear()}`
 }
 
-const MOBILE_SCREEN_BREAKPOINT = 480;
-const TABLET_SCREEN_BREAKPOINT = 768;
-const LARGE_SCREEN_BREAKPOINT = 1180;
-
-
-export const MOBILE_SCREEN = "Mobile"
-export const TABLET_SCREEN = "Tablet"
-export const DESKTOP_SCREEN = "Desktop"
-
-export const getScreenType = () => {
-    let screenType;
-    if (screenWidth <= MOBILE_SCREEN_BREAKPOINT) {
-        screenType = MOBILE_SCREEN
-    } else if (screenWidth <= TABLET_SCREEN_BREAKPOINT) {
-        screenType = TABLET_SCREEN
-    } else {
-        screenType = DESKTOP_SCREEN
-    }
-    return screenType
-}
-
+/** 
+* Checks if Email is valid or not.
+* @param {string} email - Email to be Validated
+* @return {boolean}.
+* For the Email Regex, Refer: {@link https://regex101.com/r/sI6yF5/1} 
+*/
 export const validateEmail = (email) => {
-    const emailRegex = "^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$"
+    const emailRegex = "/^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$/"
     return String(email).match(emailRegex)
 }
 
 
+/** 
+* Navigate to News Detail Page.
+* @param {any} navigation - Navigation Prop
+* @param {String} article_id - Article ID 
+* @param {String} article_slug - Article Slug
+* @return {null}.
+*/
 export const navigateToArticle = (navigation, article_id, article_slug) => {
-    // navigation.navigate("HomePageNav",{screen:"MainNav",params:{screen:'NewsDetailPage',params:{slug: article_slug, id: article_id}}})
-
     navigation.push("NewsDetailPage", { slug: article_slug, id: article_id })
     navigation.navigate("NewsDetailPage",  { slug: article_slug, id: article_id })
 }
 
-
+/** 
+* Navigate to List View Page with Topic Type and Type.
+* @param {any} navigation - Navigation Prop
+* @param {any} topic_type - Topic Type 
+* @param {any} topic - Topic
+* @return {null}.
+*/
 export const navigateToListViewPage = (navigation, topic_type, topic) => {
     navigation.navigate("NewsListPage",  { type: topic_type, title: topic } )
 }
 
+/** 
+* Navigate to Home Page.
+* @param {any} navigation - Navigation Prop
+* @return {null}.
+*/
 export const navigateToHomePage = (navigation) => {
     navigation.navigate("MainPage")
 }
 
+
+/** 
+* Sharing Function to share data across other apps.
+* @param {object} myOptions - Parameters for Sharing Modal.
+* @return {null}.
+*/
 export const onShare = async (myOptions) => {
     try {
       await Share.share(myOptions);