Newscout_Mobile/src/screens/News/NewsDetailPage.js

import {
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback,
  ScrollView,
  Image,
  Linking,
} from 'react-native';
import React, { useCallback } from 'react';
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import colors from '../../constants/colors';
import {
  horizontalScale,
  moderateScale,
  verticalScale,
} from '../../constants/metrics';
import {
  getArticleBySlug,
  getCommentByArticleID,
  getRecommendationByArticleID,
} from '../../api/data';
import LoadingScreen from '../../components/organisms/Sections/LoadingScreen';
import {
  getTimestamp,
  navigateToArticle,
  useConstructor,
} from '../../utils/functions';
import fonts from '../../constants/fonts';
import BookmarkButton from '../../components/atoms/Buttons/BookmarkButton';
import ShareButton from '../../components/atoms/Buttons/ShareButton';
import IonIcon from 'react-native-vector-icons/Ionicons';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetView,
  BottomSheetScrollView,
} from '@gorhom/bottom-sheet';
import ButtonWrapper from '../../components/atoms/Buttons/ButtonWrapper';
import images from '../../assets/images/images';
import SectionHeader from '../../components/molecules/Header/SectionHeader';
import VerticalNewsCard from '../../components/molecules/Cards/VerticalNewsCard';
import { TextInput } from 'react-native-paper';
import FormTextInput from '../../components/atoms/Input/FormTextInput';
import OctiIcon from 'react-native-vector-icons/Octicons'

const NewsDetailPage = props => {
  const { navigation, route } = props;
  const { id, slug } = route.params;

  const [isLoading, setLoading] = React.useState(true);
  const [article, setArticle] = React.useState({});
  const [comments, setComments] = React.useState({
    total_article_likes: 0,
    results: [],
  });
  const [recommendations, setRecommendations] = React.useState([]);

  const mainPageRef = React.useRef(null);
  const bottomSheetModalRef = React.useRef('');

  // Comments Modal
  const snapPoints = React.useMemo(() => ['70%', '100%'], []);
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handleCloseModalPress = () => bottomSheetModalRef.current.close();
  const handleSheetChanges = useCallback(index => {
    console.log('handleSheetChanges', index);
  }, []);

  const fetchArticle = slug => {
    getArticleBySlug(slug)
      .then(res => {
        console.log(res.data);
        setArticle(res.data.body.article);
        setLoading(false);
      })
      .catch(error => console.log(error));
  };

  const fetchComments = id => {
    getCommentByArticleID(id)
      .then(res => {
        console.log(res.data.body);
        setComments(res.data.body);
      })
      .catch(err => console.log(err));
  };

  const fetchRecommendations = id => {
    getRecommendationByArticleID(id)
      .then(res => setRecommendations(res.data.body.results))
      .catch(err => console.log(err));
  };

  useConstructor(function () {
    fetchArticle(slug);
    fetchComments(id);
    fetchRecommendations(id);
  });

  const styles = StyleSheet.create({
    container: { backgroundColor: colors().dominant, minHeight: '100%' },
    newsContainer: { paddingHorizontal: horizontalScale(16) },
    newsTitle: {
      fontFamily: fonts.type.semibold,
      color: colors().recessive,
      fontSize: moderateScale(16),
    },
    hashTags: {
      paddingVertical: verticalScale(8),
      flexDirection: 'row',
      gap: horizontalScale(8)
    },
    hashTag: {
      color: colors().primaryColor,
      backgroundColor: colors().dominant_variant,
      padding: moderateScale(4),
      paddingHorizontal: horizontalScale(8),
      fontFamily: fonts.type.semibold,
      borderRadius: moderateScale(8),
      fontSize: moderateScale(10)
    },
    newsDescriptorContainer: {
      flexDirection: 'row',
      gap: horizontalScale(8),
    },
    newsDescriptor: {
      color: colors().recessive,
      fontFamily: fonts.type.semibold,
      fontSize: moderateScale(12),
    },
    imagesContainer: {
      width: 'auto',
      height: verticalScale(200),
      marginTop: verticalScale(16),
    },
    image: {
      borderRadius: moderateScale(4),
      width: '100%',
      height: '100%',
    },
    buttonStyle: {
      padding: moderateScale(8),
    },
    commentSection: {
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',
      gap: moderateScale(8),
      paddingLeft: horizontalScale(4),
    },
    commentText: {
      fontFamily: fonts.type.regular,
      color: colors().grayShade_200,
    },
    commentInputContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingVertical: verticalScale(4),
    },
    profileImage: {
      height: 42,
      width: 42,
      borderRadius: 32,
      marginRight: horizontalScale(16),
      marginVertical: verticalScale(8),
      backgroundColor: colors().primaryColor
    },
    commentInput: {
      marginVertical: verticalScale(16),
      alignItems: 'stretch',
      flexDirection: 'row',
      flex: 1
    },
    utilButtons: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      paddingVertical: verticalScale(4),
    },
    newsText: {
      color: colors().recessive_variant,
      fontFamily: fonts.type.regular,
      lineHeight: verticalScale(24),
      paddingVertical: verticalScale(4),
    },
    backToTop: {
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: verticalScale(16),
      paddingBottom: verticalScale(8),
    },
    backToTopText: {
      color: colors().primaryColor,
      fontFamily: fonts.type.medium,
      textDecorationLine: 'underline',
      fontSize: moderateScale(16),
    },
    recommendationContainer: {
      paddingHorizontal: horizontalScale(16),
      gap: moderateScale(4),
      paddingBottom: verticalScale(16),
      backgroundColor: colors().dominant,
      flexDirection: 'row',
    },
    heading: {
      flexDirection: 'row',
      gap: horizontalScale(8)
    }
  });

  return (
    <BottomSheetModalProvider>
      <ScrollView ref={mainPageRef} contentContainerStyle={styles.container}>
        <NewscoutTitleHeader headerStyle={{elevation: 0}}
          backButtonShown
          onBackClick={() => navigation.goBack()}>
          <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
            <OctiIcon name="three-bars" color={colors().primaryColor} size={moderateScale(24)} />
          </TouchableWithoutFeedback>
        </NewscoutTitleHeader>
        {isLoading === true ? (
          <LoadingScreen />
        ) : (
          <View style={styles.newsContainer}>
            <Text style={styles.newsTitle}
              onPress={() => Linking.openURL(article.source_url)}
            >{article.title}</Text>
            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.hashTags}>
              {
                article.hash_tags.map(item => <Text style={styles.hashTag}>#{item}</Text>)
              }
            </ScrollView>
            <View style={styles.newsDescriptorContainer}>
              <Text style={styles.newsDescriptor}>
                {getTimestamp(article.published_on)}
              </Text>
              {(article.author !== undefined || article.author.length <= 0) ?? (
                <Text style={styles.newsDescriptor}>By {article.author}</Text>
              )}
              <Text style={styles.newsDescriptor}>{article.source}</Text>
            </View>
            <View style={styles.imagesContainer}>
              <Image source={{ uri: article.cover_image }} style={styles.image} />
            </View>
            <View style={styles.utilButtons}>
              <TouchableWithoutFeedback onPress={handlePresentModalPress}>
                <View style={styles.commentSection}>
                  <IonIcon
                    name="chatbubble-outline"
                    size={moderateScale(20)}
                    color={colors().primaryColor}
                  />
                  <Text style={styles.commentText}>
                    {comments.results.length ?? 0} COMMENTS
                  </Text>
                </View>
              </TouchableWithoutFeedback>
              <View style={{ flexDirection: 'row' }}>
                <BookmarkButton
                  buttonStyle={styles.buttonStyle}
                  iconSize={20}
                  onPress={true}
                />
                <ShareButton
                  buttonStyle={styles.buttonStyle}
                  iconSize={20}
                  onPress={true}
                />
              </View>
            </View>
            <Text style={styles.newsText}>{article.blurb}</Text>
            <View style={styles.backToTop}>
              <TouchableWithoutFeedback
                onPress={() =>
                  mainPageRef.current.scrollTo({
                    y: 0,
                  })
                }>
                <Text style={styles.backToTopText}>Back To Top</Text>
              </TouchableWithoutFeedback>
            </View>

            <>
              <BottomSheetModal
                ref={bottomSheetModalRef}
                index={1}
                snapPoints={snapPoints}
                onChange={handleSheetChanges}
                backgroundStyle={{
                  backgroundColor: colors().dominant,
                  minHeight: '100%',
                }}
                handleStyle={{
                  backgroundColor: colors().dominant,

                }}>
                <BottomSheetScrollView>
                  <BottomSheetView
                    style={{
                      paddingHorizontal: horizontalScale(24),
                    }}>
                    <BottomSheetView style={styles.commentInputContainer}>
                      <BottomSheetView style={styles.heading}>
                        <Text
                          style={{
                            fontFamily: fonts.type.semibold,
                            color: colors().recessive,
                            fontSize: moderateScale(16),
                          }}>
                          Comments
                        </Text>
                        <Text
                          style={{
                            fontFamily: fonts.type.semibold,
                            color: colors().recessive,
                            fontSize: moderateScale(16),
                            color: colors().primaryColor
                          }}>
                          {comments.results.length}
                        </Text>
                        </BottomSheetView>
                        <ButtonWrapper onPress={handleCloseModalPress}>
                          <IonIcon
                            name="close-sharp"
                            size={moderateScale(20)}
                            color={colors().recessive}
                          />
                        </ButtonWrapper>
                      
                    </BottomSheetView>
                    <BottomSheetView style={styles.commentInput}>
                      <Image
                        source={images.imageCard}
                        style={[styles.profileImage]}
                      />
                      
                      <TextInput
                        multiline
                        mode="outlined"
                        placeholder='Add your Comment Here'
                        placeholderTextColor={colors().grayShade_400}
                        dense
                        style={{
                          backgroundColor: colors().dominant,
                          height: verticalScale(64),
                        
                          flexGrow: 1

                        }}
                        contentStyle={{
                          color: colors().recessive,
                          fontFamily: fonts.type.regular,
                          fontSize: moderateScale(16),

                        }}
                        outlineStyle={{
                          borderRadius: moderateScale(16),
                          borderColor: colors().secondaryColor
                        }}
                        cursorColor={colors().primaryColor}
                      />
                    </BottomSheetView>
                    <>
                      <Text
                        style={{
                          fontFamily: fonts.type.medium,
                          color: colors().recessive,
                          paddingBottom: verticalScale(8),
                        }}>
                        View all Comments({comments.results.length})
                      </Text>
                    </>
                    <BottomSheetView style={{ gap: moderateScale(16) }}>
                      {comments.results.length <= 0 ? (
                        <LoadingScreen />
                      ) : (
                        comments.results.map(() => <CommentCard />)
                      )}
                    </BottomSheetView>
                  </BottomSheetView>
                </BottomSheetScrollView>
              </BottomSheetModal>
            </>
          </View>
        )}
        <SectionHeader label={'Recommendations'} isButtonShown={false}/>
        <ScrollView
          horizontal
          contentContainerStyle={styles.recommendationContainer}
          style={{ flexDirection: 'row' }}
          showsHorizontalScrollIndicator={false}>
          {recommendations.map(item => (
            <VerticalNewsCard
              image={{ uri: item.cover_image }}
              headline={item.title}
              timestamp={item.published_on}
              onPress={() => navigateToArticle(navigation, item.id, item.slug)}
            />
          ))}
        </ScrollView>
      </ScrollView>
    </BottomSheetModalProvider>
  );
};

export default NewsDetailPage;