cleanup: jsdoc #21

src/Chatty.tsx

@@ -22,8 +22,8 @@ export const Chatty = React.forwardRef(
     const listRef = useRef<ListRef>();
     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);

src/List.tsx

@@ -83,10 +83,13 @@ export const List = React.forwardRef(
     const [messages, setMessages] = useState<DataProvider>(dataProvider);
     const previousMessages = usePrevious<DataProvider>(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

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) =>

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<T>(value: any): T | undefined {
   const ref = useRef();
   useEffect(() => {

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<void>;
 
 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:

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<IUrlPreviewBubble | null> => {

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({

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);
 

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
 ) {