Comments likes requests (#12)

* Connecting with appserver new endpoints for posting comments and liking videos.

* Add submit comment button.

* Remove padding to submit comment button.

* Add input in refference in comments.

* Connect like endpoints.

* Refactoring.

* Change errors in requests and add request to get videos after uploading video.

* FIx.

* Remove unnecessary console.warns

* Fix in setting header for token.

src/app/components/CommentSection/components/CommentInput/index.js

@@ -1,11 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { TextInput, View } from 'react-native';
+import { FontAwesome } from '@expo/vector-icons';
 
+import { COLORS } from '@constants/colors';
+
+import { parseComment } from './utils';
 import styles from './styles';
 
-function CommentInput() {
+function CommentInput({ onSubmit }) {
   const [comment, setComment] = useState('');
 
+  const onCommentSubmit = useCallback(() => {
+    onSubmit(parseComment(comment));
+    setComment('');
+  }, [comment, onSubmit]);
+
   return (
     <View style={styles.container}>
       <TextInput
@@ -15,6 +24,13 @@ function CommentInput() {
         label="Comment"
         placeholder="Ingrese un comentario"
       />
+      <FontAwesome.Button
+        name="send"
+        backgroundColor={COLORS.white}
+        color={COLORS.main}
+        size={20}
+        onPress={onCommentSubmit}
+      />
     </View>
   );
 }

src/app/components/CommentSection/components/CommentInput/styles.js

@@ -8,9 +8,12 @@ const styles = StyleSheet.create({
     elevation: 1,
     marginTop: 0,
     padding: 10,
+    paddingRight: 0,
     shadowColor: COLORS.black,
     shadowOffset: { width: 1, height: 2 },
-    shadowOpacity: 0.9
+    shadowOpacity: 0.9,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
   }
 });
 

src/app/components/CommentSection/components/CommentInput/utils.js

@@ -0,0 +1,10 @@
+export const parseComment = (text) =>
+  text
+    .split(' ')
+    .map((e) => {
+      if (/^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$/.test(e)) {
+        return e.replace(e, `{{${e}}}`);
+      }
+      return e;
+    })
+    .join(' ');

src/app/components/CommentSection/index.js

@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, ActivityIndicator } from 'react-native';
 
 import Comment from './components/Comment';
 import CommentInput from './components/CommentInput';
 
 import styles from './styles';
 
-function CommentSection({ comments, onRefPress }) {
+function CommentSection({ loading, comments, onRefPress, onCommentSubmit }) {
   const renderComment = useCallback(
     (item) => (
       <Comment
@@ -23,10 +23,14 @@ function CommentSection({ comments, onRefPress }) {
   return (
     <View style={styles.commentSection}>
       <Text style={styles.title}>Comentarios</Text>
-      <View style={styles.container}>
-        {comments.map((item) => renderComment(item))}
-      </View>
-      <CommentInput />
+      {loading ? (
+        <ActivityIndicator color="red" style={styles.loader} />
+      ) : (
+        <View style={styles.container}>
+          {comments.map((item) => renderComment(item))}
+        </View>
+      )}
+      <CommentInput onSubmit={onCommentSubmit} />
     </View>
   );
 }

src/app/components/CommentSection/styles.js

@@ -15,6 +15,9 @@ const styles = StyleSheet.create({
     shadowColor: COLORS.black,
     shadowOffset: { width: 1, height: 2 },
     shadowOpacity: 0.9
+  },
+  loader: {
+    margin: 15
   }
 });
 

src/app/components/LikeButton/index.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import { AntDesign } from '@expo/vector-icons';
-import { TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
+import styles from './styles';
 
-function LikeButton({ liked, onLiked }) {
+function LikeButton({ likes, liked, onLiked }) {
   return (
-    <TouchableOpacity
-      //style={[styles.button, style]}
-      onPress={() => onLiked(!liked)}>
-      <AntDesign name={liked ? 'like1' : 'like2'} size={28} color="red" />
-    </TouchableOpacity>
+    <View style={styles.container}>
+      {!!likes && <Text style={styles.count}>{likes}</Text>}
+      <TouchableOpacity onPress={onLiked}>
+        <AntDesign name={liked ? 'like1' : 'like2'} size={28} color="red" />
+      </TouchableOpacity>
+    </View>
   );
 }
 

src/app/components/LikeButton/styles.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '@constants/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  count: {
+    fontSize: 14,
+    alignSelf: 'center',
+    marginHorizontal: 5,
+    color: COLORS.main,
+    paddingBottom: 5
+  }
+});
+
+export default styles;

src/app/screens/UploadVideoScreen/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useCallback, useState } from 'react';
-import moment from 'moment';
 import {
   ScrollView,
   SafeAreaView,
@@ -24,6 +23,7 @@ import CustomButton from '@components/CustomButton';
 import { ROUTES } from '@constants/routes';
 import { COLORS } from '@constants/colors';
 import actionCreator from '@redux/users/actions';
+import { getFormatTimestamp } from '@utils/date';
 
 import styles from './styles';
 import { uploadToFirebase, getuuid } from './utils';
@@ -80,7 +80,7 @@ function UploadVideoScreen({ navigation }) {
 
   const handleSubmitVideo = useCallback(async () => {
     try {
-      const date = moment().format('MM/DD/YY HH:mm:ss');
+      const date = getFormatTimestamp();
       setTimestamp(date);
       setUploading(true);
       const uuid = getuuid(); //to upload video in unique folder

src/app/screens/VideoDetailScreen/index.js

@@ -1,19 +1,59 @@
-import React, { useState, useCallback } from 'react';
-import { ScrollView, Text, View } from 'react-native';
+import React, { useState, useCallback, useEffect } from 'react';
+import { ScrollView, Text, View, ActivityIndicator, Alert } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
 
 import VideoPlayer from '@components/VideoPlayer';
 import CommentSection from '@components/CommentSection';
 import LikeButton from '@components/LikeButton';
+import actionCreators from '@redux/videos/actions';
+import { getFormatTimestamp } from '@utils/date';
+import { updateLikedVideo, getVideoById } from '@services/VideoService';
 
-import { COMMENTS } from './constants';
 import { formatDate } from './utils';
 
 import styles from './styles';
 
 function VideoDetailScreen({ navigation, route }) {
-  const { url, title, author, description, date } = route?.params?.video;
+  const { id, url, title, author, description, date } = route?.params?.video;
+  const [loading, setLoading] = useState(false);
+  const [likes, setLikes] = useState(0);
   const [liked, setLiked] = useState(false);
   const [videoRef, setVideoRef] = useState(null);
+  const [error, setError] = useState('');
+
+  const dispatch = useDispatch();
+
+  const comments = useSelector((state) => state.videos.comments);
+  const commentsLoading = useSelector((state) => state.videos.loading);
+
+  const user = useSelector((state) => state.auth.currentUser);
+
+  useEffect(() => {
+    async function fetchData() {
+      dispatch(actionCreators.getVideoComments(id));
+      setLoading(true);
+      const response = await getVideoById(id);
+      if (response.ok) {
+        setLiked(response.data.user_related_info.is_liked);
+        setLikes(response.data.likes);
+      } else {
+        setError(response.data.reason);
+      }
+      setLoading(false);
+    }
+    fetchData();
+  }, [dispatch, id]);
+
+  useEffect(() => {
+    if (error) {
+      Alert.alert(
+        'Error',
+        error,
+        [{ text: 'OK', onPress: () => setError('') }],
+        { cancelable: false }
+      );
+    }
+  });
 
   navigation.setOptions({
     title: title
@@ -24,25 +64,56 @@ function VideoDetailScreen({ navigation, route }) {
     [videoRef]
   );
 
+  const submitComment = useCallback(
+    (comment) =>
+      dispatch(
+        actionCreators.commentVideo(id, {
+          author: user.username,
+          content: comment,
+          timestamp: getFormatTimestamp()
+        })
+      ),
+    [dispatch, user, id]
+  );
+
+  const onLikeToggle = useCallback(async () => {
+    const response = await updateLikedVideo(id, { liked: !liked });
+    if (response.ok) {
+      setLikes(likes + (liked ? -1 : 1));
+      setLiked(!liked);
+    } else {
+      setError(response.data.reason);
+    }
+  }, [id, liked, likes]);
+
   return (
     <ScrollView style={styles.scrollArea} alwaysBounceVertical>
       <VideoPlayer
         source={url}
-        style={{ alignSelf: 'center' }}
+        style={styles.videoPlayer}
         setVideoRef={setVideoRef}
       />
-      <View style={styles.videoInfo}>
-        <View style={styles.header}>
-          <View>
-            <Text style={styles.title}>{title}</Text>
-            <Text>{formatDate(date)}</Text>
+      {loading ? (
+        <ActivityIndicator color="red" style={styles.loader} />
+      ) : (
+        <View style={styles.videoInfo}>
+          <View style={styles.header}>
+            <View>
+              <Text style={styles.title}>{title}</Text>
+              <Text>{formatDate(date)}</Text>
+            </View>
+            <LikeButton liked={liked} onLiked={onLikeToggle} likes={likes} />
           </View>
-          <LikeButton liked={liked} onLiked={setLiked} />
+          <Text style={styles.subtitle}>{author && `by ${author}`}</Text>
+          <Text style={styles.desc}>{description}</Text>
+          <CommentSection
+            loading={commentsLoading}
+            comments={comments}
+            onRefPress={onRefPress}
+            onCommentSubmit={submitComment}
+          />
         </View>
-        <Text style={styles.subtitle}>{author && `by ${author}`}</Text>
-        <Text style={styles.desc}>{description}</Text>
-        <CommentSection comments={COMMENTS} onRefPress={onRefPress} />
-      </View>
+      )}
     </ScrollView>
   );
 }

src/app/screens/VideoDetailScreen/styles.js

@@ -1,13 +1,18 @@
 import { StyleSheet } from 'react-native';
-import { COLORS } from '@constants/colors';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     marginTop: 20
   },
   scrollArea: {
-    marginBottom: 10
+    //marginBottom: 10
+  },
+  videoPlayer: {
+    alignSelf: 'center'
+  },
+  loader: {
+    marginTop: 20
   },
   videoInfo: {
     margin: 15

src/config/api.js

@@ -6,4 +6,6 @@ const api = create({
   timeout: 10000
 });
 
+console.warn(API_BASE_URL);
+
 export default api;

src/redux/auth/actions.js

@@ -25,7 +25,7 @@ export const actionCreator = {
     if (response?.ok) {
       setSession(response.data);
       dispatch(actionCreator.loginSuccess(response.data));
-    } else dispatch(actionCreator.loginFailure(response?.data));
+    } else dispatch(actionCreator.loginFailure(response?.data.reason));
   },
   loginSuccess: (token) => ({
     type: actions.LOGIN_SUCCESS,
@@ -36,7 +36,7 @@ export const actionCreator = {
     payload: problem
   }),
   saveCurrentSession: (session) => {
-    api.setHeader('Authorization', session.token);
+    api.setHeader('access-token', session.token);
     return { type: actions.SAVE_CURRENT_SESSION, payload: session };
   },
   logout: () => {
@@ -48,7 +48,7 @@ export const actionCreator = {
     const response = await register(info);
     if (response.ok) {
       dispatch(actionCreator.registerSuccess());
-    } else dispatch(actionCreator.registerFailure(response.data));
+    } else dispatch(actionCreator.registerFailure(response.data.reason));
   },
   registerSuccess: () => ({
     type: actions.REGISTER_SUCCESS