Add major Twitter clone features: theme toggle, tweet composer, comme…

package.json

@@ -19,8 +19,8 @@
  "typescript": "~3.7.2"
  },
  "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
+ "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
  },

src/App.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 
 import Layout from './components/Layout';
 import GlobalStyles from './styles/GlobalStyles';
+import { ThemeProvider } from './contexts/ThemeContext';
 
 function App() {
  return (
- <>
+ <ThemeProvider>
  <Layout />
  <GlobalStyles />
- </>
+ </ThemeProvider>
  );
 }
 

src/components/Comments/index.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import {
+ Container,
+ CommentItem,
+ Avatar,
+ Content,
+ Header,
+ Author,
+ Time,
+ Text,
+ CommentForm,
+ TextArea,
+ SubmitButton,
+ ShowCommentsButton,
+ CommentsCount,
+} from './styles';
+
+interface Comment {
+ id: string;
+ author: string;
+ avatar: string;
+ text: string;
+ time: string;
+}
+
+interface CommentsProps {
+ tweetId: string;
+ commentsCount: number;
+ onCommentAdd: (tweetId: string, comment: Comment) => void;
+ comments: Comment[];
+ isExpanded: boolean;
+ onToggleComments: () => void;
+}
+
+const Comments: React.FC<CommentsProps> = ({
+ tweetId,
+ commentsCount,
+ onCommentAdd,
+ comments,
+ isExpanded,
+ onToggleComments,
+}) => {
+ const [commentText, setCommentText] = useState('');
+ const [showForm, setShowForm] = useState(false);
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (commentText.trim()) {
+ const newComment: Comment = {
+ id: Date.now().toString(),
+ author: 'Elton Lazzarin',
+ avatar: 'https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4',
+ text: commentText.trim(),
+ time: 'now',
+ };
+
+ onCommentAdd(tweetId, newComment);
+ setCommentText('');
+ setShowForm(false);
+ }
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+ handleSubmit(e);
+ }
+ };
+
+ return (
+ <Container>
+ {commentsCount > 0 && (
+ <ShowCommentsButton onClick={onToggleComments}>
+ <CommentsCount>
+ {isExpanded ? 'Hide' : 'Show'} {commentsCount} comment{commentsCount !== 1 ? 's' : ''}
+ </CommentsCount>
+ </ShowCommentsButton>
+ )}
+
+ {isExpanded && (
+ <>
+ {comments.map((comment) => (
+ <CommentItem key={comment.id}>
+ <Avatar>
+ <img src={comment.avatar} alt={comment.author} />
+ </Avatar>
+ <Content>
+ <Header>
+ <Author>{comment.author}</Author>
+ <Time>{comment.time}</Time>
+ </Header>
+ <Text>{comment.text}</Text>
+ </Content>
+ </CommentItem>
+ ))}
+ </>
+ )}
+
+ {showForm ? (
+ <CommentForm onSubmit={handleSubmit}>
+ <Avatar>
+ <img
+ src="https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4"
+ alt="Your avatar"
+ />
+ </Avatar>
+ <div style={{ flex: 1 }}>
+ <TextArea
+ value={commentText}
+ onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setCommentText(e.target.value)}
+ onKeyDown={handleKeyDown}
+ placeholder="Tweet your reply"
+ autoFocus
+ />
+ <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '8px' }}>
+ <button
+ type="button"
+ onClick={() => {
+ setShowForm(false);
+ setCommentText('');
+ }}
+ style={{
+ background: 'transparent',
+ border: '1px solid var(--outline)',
+ color: 'var(--white)',
+ padding: '6px 16px',
+ borderRadius: '20px',
+ cursor: 'pointer',
+ }}
+ >
+ Cancel
+ </button>
+ <SubmitButton type="submit" disabled={!commentText.trim()}>
+ Reply
+ </SubmitButton>
+ </div>
+ </div>
+ </CommentForm>
+ ) : (
+ <ShowCommentsButton onClick={() => setShowForm(true)}>
+ <CommentsCount>Add a comment...</CommentsCount>
+ </ShowCommentsButton>
+ )}
+ </Container>
+ );
+};
+
+export default Comments;

src/components/Comments/styles.ts

@@ -0,0 +1,127 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+ margin-top: 8px;
+`;
+
+export const ShowCommentsButton = styled.button`
+ background: transparent;
+ border: none;
+ color: var(--gray);
+ cursor: pointer;
+ padding: 8px 0;
+ font-size: 13px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ text-align: left;
+
+ &:hover {
+ color: var(--twitter);
+ }
+`;
+
+export const CommentsCount = styled.span`
+ font-size: 13px;
+`;
+
+export const CommentItem = styled.div`
+ display: flex;
+ padding: 12px 0;
+ border-top: 1px solid var(--outline);
+
+ &:first-child {
+ border-top: none;
+ }
+`;
+
+export const Avatar = styled.div`
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-right: 12px;
+ flex-shrink: 0;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+`;
+
+export const Content = styled.div`
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+`;
+
+export const Header = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 4px;
+`;
+
+export const Author = styled.span`
+ font-weight: bold;
+ font-size: 14px;
+ color: var(--white);
+`;
+
+export const Time = styled.span`
+ font-size: 13px;
+ color: var(--gray);
+`;
+
+export const Text = styled.p`
+ margin: 0;
+ font-size: 14px;
+ line-height: 1.4;
+ color: var(--white);
+`;
+
+export const CommentForm = styled.form`
+ display: flex;
+ padding: 12px 0;
+ border-top: 1px solid var(--outline);
+ margin-top: 8px;
+`;
+
+export const TextArea = styled.textarea`
+ width: 100%;
+ background: transparent;
+ border: none;
+ outline: none;
+ font-size: 14px;
+ color: var(--white);
+ resize: none;
+ min-height: 40px;
+ font-family: inherit;
+ line-height: 1.4;
+
+ &::placeholder {
+ color: var(--gray);
+ }
+`;
+
+export const SubmitButton = styled.button`
+ background-color: var(--twitter);
+ color: white;
+ border: none;
+ border-radius: 20px;
+ padding: 6px 16px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ font-size: 13px;
+
+ &:hover:not(:disabled) {
+ background-color: #1a8cd8;
+ }
+
+ &:disabled {
+ background-color: rgba(29, 161, 242, 0.5);
+ cursor: not-allowed;
+ }
+`;

src/components/Feed/index.tsx

@@ -1,16 +1,87 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import Tweet from '../Tweet';
+import TweetComposer from '../TweetComposer';
+import SearchBar from '../SearchBar';
+import SearchResults from '../SearchResults';
+import data from '../../data.json';
+import { TweetType } from '../../types';
 
-import { Container, Tab, Tweets } from './styles';
+import { Container, Tab, Tweets, SearchSection } from './styles';
 
 const Feed: React.FC = () => {
+ const [tweets, setTweets] = useState<TweetType[]>(
+ data.map((tweet, index) => ({ 
+ ...tweet, 
+ id: `existing-${index}`, // Добавляем уникальные ID для существующих твитов
+ comments: [] 
+ }))
+ );
+
+ const [isSearchMode, setIsSearchMode] = useState(false);
+ const [searchQuery, setSearchQuery] = useState('');
+
+ const handleNewTweet = (newTweetData: { text: string; image?: string }) => {
+ const newTweet: TweetType = {
+ id: Date.now().toString(),
+ avatar: "https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4",
+ author: "Elton Lazzarin",
+ twitteruser: "@elton_lazzarin",
+ posttime: "now",
+ posttext: newTweetData.text,
+ postimage: newTweetData.image,
+ commentscount: 0,
+ retweetscount: 0,
+ likecount: 0,
+ retweet: false,
+ comments: [],
+ };
+
+ setTweets(prevTweets => [newTweet, ...prevTweets]);
+ };
+
+ const handleUpdateTweet = (tweetId: string, updatedData: Partial<TweetType>) => {
+ setTweets(prevTweets =>
+ prevTweets.map(tweet =>
+ tweet.id === tweetId ? { ...tweet, ...updatedData } : tweet
+ )
+ );
+ };
+
+ const handleSearch = (query: string) => {
+ setSearchQuery(query);
+ setIsSearchMode(true);
+ };
+
+ const handleBackToFeed = () => {
+ setIsSearchMode(false);
+ setSearchQuery('');
+ };
+
+ // Если в режиме поиска, показываем результаты поиска
+ if (isSearchMode) {
+ return (
+ <SearchResults
+ searchQuery={searchQuery}
+ tweets={tweets}
+ onUpdateTweet={handleUpdateTweet}
+ onBackToFeed={handleBackToFeed}
+ />
+ );
+ }
+
  return (
  <Container>
- <Tab>Tweets</Tab>
+ <Tab>Home</Tab>
+
+ <SearchSection>
+ <SearchBar onSearch={handleSearch} />
+ </SearchSection>
+
+ <TweetComposer onTweetSubmit={handleNewTweet} />
 
  <Tweets>
- <Tweet />
+ <Tweet data={tweets} onUpdateTweet={handleUpdateTweet} />
  </Tweets>
  </Container>
  );