From ceb65c120d59f71f0e3cb6f63897183ef9831143 Mon Sep 17 00:00:00 2001 From: Muhammed Kaplan Date: Sun, 27 Mar 2022 21:46:00 +0200 Subject: [PATCH] cleanup: jsdoc #21 --- src/Chatty.tsx | 2 +- src/List.tsx | 12 ++++++++++-- src/hooks/useHaptic.ts | 4 ++++ src/hooks/usePrevious.ts | 5 +++++ src/utils/hapticEngine.ts | 3 +++ src/utils/helpers.ts | 17 +++++++++++++++++ src/utils/imagePicker.ts | 4 ++++ src/utils/moti.tsx | 5 +++++ src/utils/patterns.ts | 4 ++++ 9 files changed, 53 insertions(+), 3 deletions(-) diff --git a/src/Chatty.tsx b/src/Chatty.tsx index 38c63fb..7bc71f8 100644 --- a/src/Chatty.tsx +++ b/src/Chatty.tsx @@ -22,8 +22,8 @@ export const Chatty = React.forwardRef( const listRef = useRef(); const { messages } = props; + /* This is a way to scroll to the end of the list when the keyboard is shown. */ useEffect(() => { - // Scroll on keyboard show const listener = Keyboard.addListener('keyboardDidShow', () => { if (listRef.current) { listRef.current?.scrollToEnd(true); diff --git a/src/List.tsx b/src/List.tsx index 3945838..00111a1 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -83,10 +83,13 @@ export const List = React.forwardRef( const [messages, setMessages] = useState(dataProvider); const previousMessages = usePrevious(messages); + /* This is a React Hook that is used to update the messages list when new messages are added. */ useEffect(() => { setMessages(dataProvider.cloneWithRows(data)); }, [data, dataProvider]); + /* This code is listening to the event of a reply bubble being pressed. When it is pressed, it scrolls +to the replied message. */ useEffect(() => { // When reply is pressed, scroll to replied message ChatBubbleEmitter.addListener('replyBubblePressed', (messageId) => { @@ -104,6 +107,8 @@ export const List = React.forwardRef( }; }, [messages]); + /* Using the useImperativeHandle hook to expose a function to the parent component that will allow + it to manipulate the messages list. */ useImperativeHandle( ref, () => ({ @@ -146,13 +151,16 @@ export const List = React.forwardRef( } } }, + /* This is a function that is used to scroll to the bottom of the list. */ scrollToEnd: (animated?: boolean) => { recyclerlistviewRef.current?.scrollToEnd(animated); }, + /* Setting the typing status of the user. */ setIsTyping: (typing?: boolean) => { typingStatusRef.current?.setIsTyping(typing ?? false); recyclerlistviewRef.current?.scrollToEnd(true); }, + /* Removing a message from the list of messages. */ removeMessage: (id: number) => { setMessages( dataProvider.cloneWithRows( @@ -164,9 +172,9 @@ export const List = React.forwardRef( [dataProvider, messages, propsContext.enableHapticFeedback, trigger] ); + /* This code is checking if the first message in the previous messages is the same as the first message +in the current messages. If it is, then it will not scroll to the bottom. */ useEffect(() => { - // Checks if first index of messages have same id, if it is then it will not trigger scrolling - // This is because the first message is the load earlier message, and we don't want to scroll to the bottom. if ( previousMessages && previousMessages.getAllData()![0]?.id === messages.getAllData()![0]?.id diff --git a/src/hooks/useHaptic.ts b/src/hooks/useHaptic.ts index c56dee6..d73cc6b 100644 --- a/src/hooks/useHaptic.ts +++ b/src/hooks/useHaptic.ts @@ -2,6 +2,10 @@ import { useCallback } from 'react'; import type { HapticType } from '../types/Chatty.types'; import { triggerHaptic } from '../utils/hapticEngine'; +/** + * `useHaptic` returns a `trigger` function that triggers haptic feedback + * @returns A function that triggers haptic feedback. + */ export function useHaptic() { const trigger = useCallback(async (type: HapticType) => { await triggerHaptic(type).catch((err) => diff --git a/src/hooks/usePrevious.ts b/src/hooks/usePrevious.ts index 3227f6c..dffbf48 100644 --- a/src/hooks/usePrevious.ts +++ b/src/hooks/usePrevious.ts @@ -1,5 +1,10 @@ import { useEffect, useRef } from 'react'; +/** + * UsePrevious returns the previous value of a given value. + * @param {any} value - any + * @returns The previous value of the input value. + */ export function usePrevious(value: any): T | undefined { const ref = useRef(); useEffect(() => { diff --git a/src/utils/hapticEngine.ts b/src/utils/hapticEngine.ts index f1862f3..25fb86e 100644 --- a/src/utils/hapticEngine.ts +++ b/src/utils/hapticEngine.ts @@ -2,6 +2,8 @@ import { Platform } from 'react-native'; import { HapticType } from '../types/Chatty.types'; let hapticEngine: any; + +/* This is a function that returns a promise. It is used to trigger haptic feedback. */ let triggerHaptic: (type: HapticType) => Promise; try { @@ -11,6 +13,7 @@ try { hapticEngine = require('expo-haptics'); + // We're intitalizing the triggerHaptic function based on package they use. triggerHaptic = async (type: HapticType) => { switch (type) { case HapticType.Light: diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 7aa8503..fa933b2 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -1,8 +1,17 @@ import type { IUrlPreviewBubble } from 'src/types/Chatty.types'; +/** + * `wait` is a function that returns a promise that resolves after a given number of milliseconds + * @param {number} ms - number + */ export const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); +/** + * It takes a string and returns the first URL found in the string + * @param {string} string - The string to extract the URL from. + * @returns The first match of the regex. + */ export const extractUrlFromString = (string: string): string | null => { const regex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gm; @@ -15,6 +24,14 @@ export const extractUrlFromString = (string: string): string | null => { return null; }; +/** + * It takes a URL, fetches the HTML from that URL, and then parses the HTML for the og:image, og:title, + * and og:description meta tags. If all three of these meta tags are found, it returns a + * UrlPreviewBubble object with the image, title, and description. If any of these meta tags are + * missing, it returns null + * @param {string} url - The URL of the page to fetch. + * @returns An object with the following properties: + */ export const fetchMetaData = async ( url: string ): Promise => { diff --git a/src/utils/imagePicker.ts b/src/utils/imagePicker.ts index 66d8156..32f454b 100644 --- a/src/utils/imagePicker.ts +++ b/src/utils/imagePicker.ts @@ -12,6 +12,10 @@ try { } } +/** + * It launches the native image picker + * @returns The image data is being returned as a base64 string. + */ export async function selectImage() { if (imagePicker?.launchImageLibraryAsync) { return await imagePicker.launchImageLibraryAsync({ diff --git a/src/utils/moti.tsx b/src/utils/moti.tsx index 3e2bea8..0d6e33a 100644 --- a/src/utils/moti.tsx +++ b/src/utils/moti.tsx @@ -13,6 +13,11 @@ try { ); } +/** + * If the skeleton loader is enabled, then render the skeleton loader. Otherwise, render the children + * @param {any} props - any + * @returns A skeleton component / Native view object + */ export function Skeleton(props: any) { const propsContext = useContext(PropsContext); diff --git a/src/utils/patterns.ts b/src/utils/patterns.ts index 47cf2cd..b125af5 100644 --- a/src/utils/patterns.ts +++ b/src/utils/patterns.ts @@ -37,6 +37,10 @@ export const ALL_PATERNS_SHAPES = [ URL_PATTERN_SHAPE, ]; +/** + * Load all the patterns and set the onPress function + * @param onPress - (pattern: string, index: number) => void + */ export function LoadAllPaternShapes( onPress: (pattern: string, index: number) => void ) {