comments and subscribe button for no members

AvilaKevin · Apr 13, 2023 · 445dea8 · 445dea8
1 parent 9e2be26
commit 445dea8
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 14 deletions.
diff --git a/YouTubeClone/src/components/Comments.jsx b/YouTubeClone/src/components/Comments.jsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import Comment from './Comment'
+import { Link } from 'react-router-dom';
 
 const Container = styled.div`
 
@@ -31,6 +32,18 @@ const Input = styled.input`
  color: ${({ theme }) => theme.text};
 `;
 
+const Prueba = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 10px;
+`;
+
+const StyledLink = styled(Link)`
+ width: 100%;
+ gap: 10px;
+ text-decoration: none;
+`;
+
 function Comments({ videoId }) {
  // Para acceder a las propiedades de nuestro estado, se hace uso de useSelector, en este caso se esta accediendo a currentUser que esta dentro de user para extraer algunas de sus propiedades
  const { currentUser } = useSelector((state) => state.user);
@@ -58,13 +71,25 @@ function Comments({ videoId }) {
  return (
  <Container>
  <NewComment>
- <Avatar src={currentUser.img} />
- <Input placeholder='Add a comment...' />
+ {currentUser ?
+ <>
+ <Avatar src={currentUser.img} />
+ <Input placeholder='Add a comment...' />
+ </>
+ :
+ <StyledLink to="/Signin">
+ <Prueba>
+ <Avatar src={"https://yt3.ggpht.com/a/default-user=s48-c-k-c0x00ffffff-no-rj"} />
+ <Input placeholder='Add a comment...' />
+ </Prueba>
+ </StyledLink>}
  </NewComment>
- {comments.map(comment => (
- <Comment key={comment._id} comment={comment} />
- ))}
- </Container>
+ {
+ comments.map(comment => (
+ <Comment key={comment._id} comment={comment} />
+ ))
+ }
+ </Container >
  )
 };
 

diff --git a/YouTubeClone/src/pages/Signin.jsx b/YouTubeClone/src/pages/Signin.jsx
@@ -42,7 +42,7 @@ const Input = styled.input`
  padding: 10px;
  background-color: transparent;
  width: 100%;
- color: white;
+ color: ${({ theme }) => theme.text};
 `;
 
 const Button = styled.button`
@@ -81,6 +81,12 @@ const MsError = styled.p`
  font-weight: 300;
 `;
 
+const Hr = styled.hr`
+ width: 100%;
+ margin: 15px 0px;
+ border: 0.5px solid ${({ theme }) => theme.soft};
+`;
+
 const Signin = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
@@ -144,6 +150,8 @@ const Signin = () => {
  <SubTitle>or</SubTitle>
  <Button onClick={signInWithGoogle}>Signin with Google</Button>
 
+ <Hr />
+
  <Title>Sign up</Title>
  <Input placeholder='username' onChange={e => setName(e.target.value)} />
  <Input placeholder='email' onChange={e => setEmail(e.target.value)} />

diff --git a/YouTubeClone/src/pages/Video.jsx b/YouTubeClone/src/pages/Video.jsx
@@ -6,7 +6,7 @@ import ReplyOutlinedIcon from "@mui/icons-material/ReplyOutlined";
 import AddTaskOutlinedIcon from "@mui/icons-material/AddTaskOutlined";
 import Comments from "../components/Comments";
 import { useDispatch, useSelector } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import axios from "axios";
 import { dislike, fetchSuccess, like } from "../redux/videoSlice";
 import { format } from "timeago.js";
@@ -119,6 +119,13 @@ const VideoFrame = styled.video`
  object-fit: cover;
 `;
 
+const StyledLink = styled(Link)`
+ width: 100%;
+ gap: 10px;
+ text-decoration: none;
+ color: white;
+`;
+
 
 const Video = () => {
  // Para acceder a las propiedades de nuestro estado, se hace uso de useSelector, en este caso se esta accediendo a currentUser que esta dentro de user para extraer algunas de sus propiedades
@@ -231,12 +238,22 @@ const Video = () => {
  </Description>
  </ChannelDetail>
  </ChannelInfo>
- <Subscribe onClick={handleSub}>
- {/* Si dentro de la propiedad subscribedUsers de nuestro estado currentUser esta el id del canal, entonces: */}
- {currentUser.subscribedUsers?.includes(channel._id)
- ? "SUBSCRIBED"
- : "SUBSCRIBE"}
- </Subscribe>
+
+ {currentUser ?
+ <Subscribe onClick={handleSub}>
+ {/* Si dentro de la propiedad subscribedUsers de nuestro estado currentUser esta el id del canal, entonces: */}
+ {currentUser.subscribedUsers?.includes(channel._id)
+ ? "SUBSCRIBED"
+ : "SUBSCRIBE"}
+ </Subscribe>
+ :
+ <Subscribe>
+ <StyledLink to="/Signin">
+ SUBSCRIBE
+ </StyledLink>
+ </Subscribe>
+ }
+
  </Channel>
  <Hr />
  <Comments videoId={currentVideo._id} />