16 | {auth === 'LOGIN' ?
20 | )
21 | }
22 |
23 | export default Auth
24 |
--------------------------------------------------------------------------------
/src/components/Auth/Login.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import { toast } from "react-toastify";
3 |
4 | import ThemeButton from '../ThemeButton/ThemeButton'
5 | import TextBody from '../Text/body'
6 | import TextTitle from '../Text/title'
7 | import { Twitter } from '../icons'
8 | import Button from '../Button/Button'
9 |
10 | import { UserContext } from "../../context/UserContext";
11 | import { client } from '../../utils'
12 |
13 | function Login({ setAuth }) {
14 |
15 | const { setUser } = useContext(UserContext);
16 |
17 |
18 | const [username, setUsername] = useState("")
19 | const [password, setPassword] = useState("")
20 |
21 | const [loading, setLoading] = useState(false)
22 |
23 | const handleLogin = async (e) => {
24 |
25 | e.preventDefault()
26 |
27 | if (
28 | !username ||
29 | !password
30 | ) {
31 | return toast.error("You need to fill in all the fields");
32 | }
33 |
34 |
35 | const body = { username: username, password: password };
36 | setLoading(true)
37 | try {
38 | const { token } = await client("/auth/login", { body });
39 | localStorage.setItem("token", token);
40 | } catch (err) {
41 | return toast.error(err.message);
42 | } finally {
43 | setLoading(false)
44 | }
45 | const user = await client("/auth/me");
46 | localStorage.setItem("user", JSON.stringify(user.data));
47 | setUser(user.data);
48 |
49 |
50 | setUsername('')
51 | setPassword('')
52 | }
53 |
54 | return (
55 | <>
56 |
90 |
91 | )
92 | }
93 |
94 | export default Login
95 |
--------------------------------------------------------------------------------
/src/components/Auth/Register.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react'
2 | import { toast } from "react-toastify";
3 |
4 | import ThemeButton from '../ThemeButton/ThemeButton'
5 | import TextBody from '../Text/body'
6 | import TextTitle from '../Text/title'
7 | import { Twitter } from '../icons'
8 | import Button from '../Button/Button'
9 |
10 | import { UserContext } from "../../context/UserContext";
11 | import { client } from '../../utils'
12 |
13 | function Register({ setAuth }) {
14 |
15 |
16 | const { setUser } = useContext(UserContext);
17 |
18 |
19 | const [username, setUsername] = useState("")
20 | const [password, setPassword] = useState("")
21 |
22 | const [loading, setLoading] = useState(false)
23 |
24 | const handleLogin = async (e) => {
25 |
26 | e.preventDefault()
27 |
28 |
29 | if (
30 | !username ||
31 | !password
32 | ) {
33 | return toast.error("You need to fill in all the fields");
34 | }
35 |
36 |
37 | const body = { username: username, password: password };
38 | setLoading(true)
39 | try {
40 | const { token } = await client("/auth/signup", { body });
41 | localStorage.setItem("token", token);
42 | } catch (err) {
43 | return toast.error(err.message);
44 | } finally {
45 | setLoading(false)
46 | }
47 |
48 | const user = await client("/auth/me");
49 | setUser(user.data);
50 |
51 | localStorage.setItem("user", JSON.stringify(user.data));
52 |
53 |
54 | setUsername('')
55 | setPassword('')
56 | }
57 |
58 |
59 | return (
60 | <>
61 |
95 |
96 | )
97 | }
98 |
99 | export default Register
100 |
--------------------------------------------------------------------------------
/src/components/Avatar/Avatar.css:
--------------------------------------------------------------------------------
1 | .avatar {
2 | flex-shrink: 0;
3 | cursor: pointer;
4 | }
5 | .avatar img {
6 | display: block;
7 | width: 100%;
8 | border-radius: 990px;
9 | }
10 | .avatar--small {
11 | width: 39px;
12 | height: 39px;
13 | }
14 | .avatar--medium {
15 | width: 49px;
16 | height: 49px;
17 | }
18 | .avatar--large {
19 | width: 59px;
20 | height: 59px;
21 | }
22 | .avatar--large {
23 | width: 59px;
24 | height: 59px;
25 | }
26 | .avatar--xlarge {
27 | width: 134px;
28 | height: 134px;
29 | }
30 |
31 | .avatar-border img {
32 | border: 5px solid #fff;
33 | }
--------------------------------------------------------------------------------
/src/components/Avatar/Avatar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types';
3 |
4 | import './Avatar.css'
5 |
6 | function Avatar({ className, border, size, src = "https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png", alt, ...props }) {
7 | return (
8 |
9 | 
10 |
11 | )
12 | }
13 |
14 | Avatar.propTypes = {
15 | size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
16 | alt: PropTypes.string,
17 | };
18 |
19 | Avatar.defaultProps = {
20 | size: 'small',
21 | alt: "Profile photo"
22 | };
23 |
24 |
25 | export default Avatar
26 |
--------------------------------------------------------------------------------
/src/components/Avatar/Avatar.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Avatar from './Avatar';
4 |
5 | export default {
6 | title: 'Example/Avatar',
7 | component: Avatar,
8 | argTypes: {
9 | },
10 | };
11 |
12 | const Template = (args) =>
14 |
23 |
24 |
25 | )
26 | }
27 |
28 | export default Comment
29 |
--------------------------------------------------------------------------------
/src/components/Follow/Follow.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import { client } from "../../utils";
3 | import ThemeButton from '../ThemeButton/ThemeButton'
4 | import { useLocation as locations } from "react-router-dom";
5 | import { FeedContext } from "../../context/FeedContext";
6 |
7 | const Follow = ({ nobtn, isFollowing, incFollowers, decFollowers, userId, username }) => {
8 | let router = locations();
9 | const { feed, setFeed, setWhoFollow } = useContext(FeedContext);
10 |
11 | const [followingState, setFollowingState] = useState(isFollowing);
12 |
13 | useEffect(
14 | () => setFollowingState(isFollowing),
15 | [isFollowing]);
16 |
17 | const handleFollow = () => {
18 |
19 | if (followingState) {
20 | setFollowingState(false);
21 | if (decFollowers) {
22 | decFollowers();
23 | }
24 | client(`/users/${userId}/unfollow`);
25 | } else {
26 | setFollowingState(true);
27 | if (incFollowers) {
28 | incFollowers();
29 | }
30 | client(`/users/${userId}/follow`);
31 |
32 | //
33 | if (router.pathname === '/' && username) {
34 | client(`/users/${username}`)
35 | .then((res) => {
36 | setFeed([...res.data.posts, ...feed]);
37 | })
38 | .catch((err) => console.log(err));
39 | }
40 | }
41 |
42 |
43 | // update follow and following
44 | setTimeout(() => {
45 | client("/users")
46 | .then((response) => {
47 | setWhoFollow(response.data.filter((user) => !user.isFollowing));
48 | });
49 | }, 2500);
50 |
51 |
52 | };
53 |
54 | if (followingState) {
55 | return (
56 | <>
57 | {nobtn ? (
58 | handleFollow()}
62 | >
63 | Following
64 |
65 | ) : (
66 |
15 | @{comment.user.username}
16 | {timeSince(comment.createdAt)}
17 |
18 |
19 | 20 | {comment.text} 21 |
22 |
13 |
15 | );
16 |
--------------------------------------------------------------------------------
/src/components/FollowSuggestion/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link, useHistory } from 'react-router-dom'
3 |
4 | import Avatar from '../Avatar/Avatar'
5 | import TextBody from '../Text/body'
6 |
7 |
8 | import './FollowSuggestion.css';
9 | import Follow from '../Follow/Follow';
10 |
11 | function FollowSuggestion({ user, icon = true }) {
12 | const history = useHistory()
13 |
14 |
15 | return (
16 |
17 |
29 | Takip
30 |
31 | }
32 |
33 |
34 | )
35 | }
36 |
37 | export default FollowSuggestion
38 |
--------------------------------------------------------------------------------
/src/components/Header/Header.css:
--------------------------------------------------------------------------------
1 | .timeline-header {
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 |
6 | height: 53px;
7 |
8 | padding-left: 15px;
9 | padding-right: 15px;
10 | }
11 | .timeline-header.border {
12 | border-bottom: 1px solid rgb(230, 236, 240);
13 | }
--------------------------------------------------------------------------------
/src/components/Header/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Button from '../Button/Button'
4 | import TextTitle from '../Text/title'
5 |
6 | import './Header.css'
7 |
8 | function Header({ children, border, className }) {
9 | return (
10 |
18 | history.push(`/${user.username}`)} />
19 |
20 |
27 | {icon &&
28 |
21 |
22 | {user.username}
23 |
24 | {user.fullname ?? user.username}
25 |
26 |
11 | {children}
12 |
13 | )
14 | }
15 |
16 | export default Header
17 |
--------------------------------------------------------------------------------
/src/components/Header/Header.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Header from './Header';
4 | import { Home } from '../icons';
5 |
6 | export default {
7 | title: 'Example/Header',
8 | component: Header,
9 | argTypes: {
10 | },
11 | };
12 |
13 | const Template = (args) => (
14 |
15 |
17 | );
18 |
19 | export const Small = Template.bind({});
20 | Small.args = {
21 | title: 'Home',
22 | icon:
45 |
46 | {router.pathname !== '/explore' &&
78 | -
50 | {tags.slice(0, 4).map((tag) => (
51 |
70 | {!whoFollow &&
73 |
74 | }
75 |
76 |
77 |
23 | asd
24 |
25 | );
26 | export const LayoutSidebar = TemplateSidebar.bind({});
27 | LayoutSidebar.args = {
28 | };
29 |
30 |
31 | const TemplateTimeLine = (args) => (
32 |
33 | asd
34 |
35 | );
36 | export const LayoutTimeLine = TemplateTimeLine.bind({});
37 | LayoutTimeLine.args = {
38 | };
39 |
40 |
41 | const TemplateExtra = (args) => (
42 |
43 | asd
44 |
45 | );
46 | export const LayoutExtra = TemplateExtra.bind({});
47 | LayoutExtra.args = {
48 | };
49 |
50 |
--------------------------------------------------------------------------------
/src/components/Layout/Sidebar.css:
--------------------------------------------------------------------------------
1 | .sidebar {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 |
6 | position: sticky;
7 | top: 0;
8 |
9 |
10 | height: 100vh;
11 | overflow-y: auto;
12 | overflow-x: hidden;
13 | }
14 |
15 | .sidebar__tweet {
16 | margin-top: 16px;
17 | margin-bottom: 20px;
18 | }
19 | .sidebar__profile {
20 | width: 90%;
21 | margin-top: auto;
22 | margin-bottom: 14px;
23 | }
24 |
25 | @media (min-width: 1270px) {
26 | .sidebar {
27 | align-items: flex-start;
28 | width: 250px;
29 | padding-left: 10px;
30 | padding-right: 10px;
31 | }
32 | .sidebar__tweet {
33 | width: 80%;
34 | }
35 |
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/Layout/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 |
3 | import './Sidebar.css'
4 |
5 | import Navigation from '../Navigation/Navigation'
6 | import ThemeButton from '../ThemeButton/ThemeButton'
7 | import ProfileBox from '../ProfileBox/ProfileBox'
8 | import Menu from '../Menu/Menu'
9 | import { Tweet } from '../icons'
10 | import FollowSuggestion from '../FollowSuggestion'
11 |
12 | import { UserContext } from "../../context/UserContext";
13 |
14 | function Sidebar({ flat }) {
15 |
16 | const { setUser, user } = useContext(UserContext);
17 |
18 | const handleLogout = () => {
19 | setUser(null)
20 | localStorage.removeItem('user')
21 | localStorage.removeItem('token')
22 | }
23 |
24 | return (
25 |
26 |
44 | )
45 | }
46 |
47 | export default Sidebar
48 |
--------------------------------------------------------------------------------
/src/components/Layout/TimeLine.css:
--------------------------------------------------------------------------------
1 | .time-line {
2 | width: min(601px, 100%);
3 |
4 |
5 | }
6 | @media (min-width: 500px){
7 | .time-line {
8 | border-left: 1px solid var(--c-border-color);
9 | border-right: 1px solid var(--c-border-color);
10 | }
11 | }
--------------------------------------------------------------------------------
/src/components/Layout/TimeLine.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import './TimeLine.css'
4 |
5 | function TimeLine({ children }) {
6 | return (
7 |
29 |
30 | {flat ?
32 |
33 |
34 |
35 |
36 | }
38 | >
39 |
43 |
8 | {children}
9 |
10 | )
11 | }
12 |
13 | export default TimeLine
14 |
--------------------------------------------------------------------------------
/src/components/Layout/index.css:
--------------------------------------------------------------------------------
1 | .layout {
2 | height: 100%;
3 | max-width: 100%;
4 | margin-left: auto;
5 | margin-right: auto;
6 |
7 | display: flex;
8 | justify-content: center;
9 | }
10 |
11 | @media (min-width: 980px){
12 | .layout {
13 | max-width: 1060px;
14 | }
15 | }
16 | @media (min-width: 1270px){
17 | .layout{
18 | max-width: 1280px;
19 | }
20 | }
--------------------------------------------------------------------------------
/src/components/Layout/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 |
3 | import CONST from '../../constants'
4 | import useWindowSize from '../../hooks/useWindowSize'
5 |
6 | import Extra from './Extra'
7 | import Sidebar from './Sidebar'
8 | import TimeLine from './TimeLine'
9 |
10 | import './index.css'
11 | import MobileSidebar from '../MobileSidebar'
12 |
13 | function Layout({ children }) {
14 | const size = useWindowSize()
15 |
16 | return (
17 |
18 | {size.width <= 500 && {children}
21 | {size.width > CONST.TABLET_SIZE &&
23 | )
24 | }
25 |
26 | export default Layout
27 |
--------------------------------------------------------------------------------
/src/components/List/List.css:
--------------------------------------------------------------------------------
1 | .list {
2 | display: flex;
3 | flex-direction: column;
4 | background: var(--extra-back);
5 | border-radius: 14px;
6 | margin-bottom: 20px;
7 | cursor: pointer;
8 | }
9 |
10 |
11 |
12 | .list .list__item,.list__body > * {
13 | padding: 10px 16px;
14 | }
15 | .list__body > *:hover {
16 | background-color: var(--trends-hover-bg);
17 | }
18 | .list__body > * + div{
19 | border-top: 1px solid var(--c-border-color);
20 | }
21 | .list__body > *:last-child{
22 | padding-bottom: 17px;
23 | }
24 | .list .list__item {
25 | padding-top: 13px;
26 | }
27 |
28 |
29 |
30 |
31 |
32 |
33 | .list .list__title {
34 | display: flex;
35 | align-items: center;
36 | justify-content: space-between;
37 | font-weight: bold;
38 | font-size: 19px;
39 | }
40 | .list .list__title button {
41 | color: var(--c-theme);
42 | }
43 |
44 | .list .trend-more {
45 | padding: 15px;
46 | cursor: pointer;
47 | border-bottom-left-radius: 14px;
48 | border-bottom-right-radius: 14px;
49 | }
50 | .list .trend-more a {
51 | color: #1da1f2;
52 | text-decoration: none;
53 | font-size: 15px;
54 | }
55 | .list .trend-more:hover {
56 | background: rgba(255, 255, 255, 0.03);
57 | transition: all 0.2s ease-out;
58 | outline-style: none;
59 | }
--------------------------------------------------------------------------------
/src/components/List/List.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import FollowSuggestion from '../FollowSuggestion';
3 | import News from '../News';
4 | import { More } from '../icons';
5 |
6 | import List from './';
7 |
8 | export default {
9 | title: 'Example/List',
10 | };
11 |
12 | const Template = (args) => (
13 |
14 |
30 | );
31 |
32 | export const FollowList = Template.bind({});
33 | FollowList.args = {
34 | };
35 |
36 |
37 | const Template2 = (args) => (
38 |
39 |
52 | );
53 |
54 | export const TrendingList = Template2.bind({});
55 | TrendingList.args = {
56 | };
57 |
--------------------------------------------------------------------------------
/src/components/List/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom';
3 | import Button from '../Button/Button';
4 |
5 | import './List.css';
6 |
7 | function List({ title, icon, children, src }) {
8 | return (
9 |
10 |
24 | )
25 | }
26 |
27 | export default List
28 |
--------------------------------------------------------------------------------
/src/components/Menu/Menu.css:
--------------------------------------------------------------------------------
1 | .menu {
2 | display: inline-block;
3 | position: relative;
4 | width: 100%;
5 | }
6 | .menu__title{
7 |
8 | }
9 | .menu__body {
10 | display: block;
11 | position: absolute;
12 |
13 | z-index: 999;
14 | top: -160px;
15 | width: 100%;
16 | border-radius: 15px;
17 | padding-top: 10px;
18 | padding-bottom: 10px;
19 |
20 | overflow: auto;
21 | box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px; z-index: 1;
22 | background-color: rgba(255,255,255,1.00);
23 | }
24 |
25 | .menu__body > * {
26 | color: var(--c-dark-gray);
27 |
28 | padding: 12px 16px;
29 | text-decoration: none;
30 | display: block;
31 |
32 | }
33 | .menu__body > *:hover:not(:first-child) {
34 | background-color: var(--c-border-color);
35 | cursor: pointer;
36 |
37 | }
38 | .menu__body > *:not(:first-child) {
39 | border-top: 1px solid var(--c-border-color);
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/Menu/Menu.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | import './Menu.css'
4 |
5 | function Menu({ title, children }) {
6 |
7 | const [open, setOpen] = useState(false);
8 |
9 | return (
10 |
11 | {title}
12 |
13 |
14 |
15 |
16 |
17 | {children}
18 |
19 |
20 |
21 | Show more
22 |
23 | setOpen(!open)} className="menu">
11 |
23 | )
24 | }
25 |
26 | export default Menu
27 |
--------------------------------------------------------------------------------
/src/components/MobileSidebar/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { useLocation as locations } from "react-router-dom";
3 |
4 | import { Home, Search, HomeFill, ProfileFill, Profile, ListsFill, Lists } from '../icons'
5 | import Button from '../Button/Button'
6 |
7 | import './style.css'
8 | import { UserContext } from '../../context/UserContext';
9 |
10 | function MobileSidebar() {
11 |
12 | let router = locations();
13 | const { user } = useContext(UserContext)
14 |
15 | return (
16 |
12 | {title}
13 |
14 |
15 | {
16 | open && (
17 |
18 | {children}
19 |
20 | )
21 | }
22 |
17 |
20 |
23 |
26 |
29 |
30 | )
31 | }
32 |
33 | export default MobileSidebar
34 |
--------------------------------------------------------------------------------
/src/components/MobileSidebar/style.css:
--------------------------------------------------------------------------------
1 | .mobile-sidebar {
2 | position: fixed;
3 | bottom: 0;
4 | left: 0;
5 | z-index: 888;
6 |
7 | background-color: var(--c-primary);
8 | width: 100%;
9 | border-top: 1px solid var(--c-border-color);
10 |
11 | display: flex;
12 | justify-content: space-between;
13 |
14 | box-sizing: border-box;
15 | padding: 8px min(40px, max(10vw, 10px));
16 | }
17 | .mobile-sidebar svg {
18 | font-size: 26px;
19 | }
20 | .s-selected{
21 | color: var(--c-theme);
22 | }
--------------------------------------------------------------------------------
/src/components/Navigation/Button.css:
--------------------------------------------------------------------------------
1 | .navButton {
2 | position: relative;
3 | padding: 10px;
4 | }
5 | .navButton.twitter {
6 | color: var(--c-theme);
7 | }
8 | .navButton:global(html:not(.light)) & {
9 | color: white;
10 | }
11 | .navButton svg {
12 | font-size: 26px;
13 | }
14 | .navButton svg + h2 {
15 | margin-left: 20px;
16 | margin-right: 15px;
17 | }
18 |
19 | .navButton-selected {
20 | color: var(--c-theme);
21 | }
22 |
23 | .notify {
24 | position: absolute;
25 | left: 20px;
26 | top: 5px;
27 | height: 17px;
28 | padding-left: 6px;
29 | padding-right: 6px;
30 | border-radius: 17px;
31 | display: flex;
32 | align-items: center;
33 | background-color: var(--c-theme);
34 | color: var(--c-primary);
35 | font-size: 11px;
36 | border: 1px solid var(--c-primary);
37 | }
--------------------------------------------------------------------------------
/src/components/Navigation/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import './Button.css';
4 |
5 | import Button from '../Button/Button';
6 |
7 | function NavButton({ notify, selected, children, className, ...props }) {
8 | return (
9 |
16 | )
17 | }
18 |
19 | export default NavButton
20 |
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.css:
--------------------------------------------------------------------------------
1 | .nav {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: flex-start;
5 |
6 | width: 100%;
7 | }
8 | .navButton:not(:first-child) {
9 | width: 90%;
10 | justify-content: flex-start;
11 | }
12 | .navButton + .navButton{
13 | margin-top: 8px;
14 | }
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useLocation as locations } from "react-router-dom";
3 |
4 | import './Navigation.css'
5 |
6 | import NavButton from './Button'
7 | import TextTitle from '../Text/title'
8 |
9 | import { MENU } from '../../constants'
10 |
11 | function Navigation({ flat }) {
12 | let router = locations();
13 |
14 | return (
15 |
34 | )
35 | }
36 |
37 | export default Navigation
38 |
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Button from './Button';
4 | import Navigation from './Navigation';
5 | import TextTitle from '../Text/title';
6 | import * as Icons from '../icons';
7 |
8 | export default {
9 | title: 'Example/Navigation',
10 | component: Button,
11 | argTypes: {
12 | },
13 | };
14 |
15 | const TemplateButton = (args) => (
16 |
20 | );
21 |
22 | export const NavButton = TemplateButton.bind({});
23 | NavButton.args = {
24 | };
25 | export const NavButtonSelected = TemplateButton.bind({});
26 | NavButtonSelected.args = {
27 | selected: true
28 | };
29 | export const NavButtonNotify = TemplateButton.bind({});
30 | NavButtonNotify.args = {
31 | notify: 5
32 | };
33 |
34 |
35 | const TemplateNav = (args) => (
36 |
15 |
17 | );
18 |
19 | export const Primary = Template.bind({});
20 | Primary.args = {
21 | };
22 |
--------------------------------------------------------------------------------
/src/components/SearchBox/SearchBox.css:
--------------------------------------------------------------------------------
1 | .search-bar {
2 | display: flex;
3 | align-items: center;
4 | justify-content: flex-start;
5 | background-color: var(--input-back);
6 | border-radius: 9999px;
7 | }
8 | .search-bar input {
9 | height: 40px;
10 | outline: none;
11 | background-color: transparent;
12 | padding-left: 20px;
13 | color: var(--c-text-color);
14 | width: 100%;
15 | }
16 |
17 | .search-bar:focus-within {
18 | background: transparent;
19 | border: 1px solid var(--c-theme-hover);
20 | }
21 | .search-bar::placeholder {
22 | color: var(--color-lightGray);
23 | }
24 |
25 | .search-bar svg {
26 | font-size: 19px;
27 | color: var(--input-icon);
28 | padding-left: 15px;
29 | }
30 |
31 |
32 |
33 | .search-bar--small {
34 |
35 | }
36 | .search-bar--medium {
37 |
38 | }
39 |
40 | .search-bar--large {
41 | width: 100%;
42 | height: 33px;
43 | margin-right: 20px;
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/SearchBox/SearchBox.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { Search } from '../icons';
4 |
5 | import './SearchBox.css';
6 |
7 | function SearchBox({ icon = true, text = "Search Twitter", className, size = 'medium', ...props }) {
8 | return (
9 |
10 | {icon &&
13 | )
14 | }
15 |
16 | export default SearchBox
17 |
--------------------------------------------------------------------------------
/src/components/SearchBox/SearchBox.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import SearchBox from './SearchBox';
4 |
5 | export default {
6 | title: 'Example/SearchBox',
7 | component: SearchBox,
8 | argTypes: {
9 | },
10 | };
11 |
12 | const Template = () => 9 | {children} 10 |
11 | ) 12 | } 13 | 14 | export default TextTitle 15 | -------------------------------------------------------------------------------- /src/components/ThemeButton/ThemeButton.css: -------------------------------------------------------------------------------- 1 | .themebutton { 2 | font-weight: bold; 3 | padding: 0 15px; 4 | 5 | } 6 | 7 | .themebutton--primary { 8 | color: #fff; 9 | background-color: var(--c-theme); 10 | } 11 | 12 | .themebutton--primary:hover { 13 | color: #fff; 14 | background-color: var(--c-theme-hover); 15 | } 16 | 17 | .themebutton--secondary { 18 | color: var(--c-theme); 19 | border: 1px solid var(--c-theme) 20 | } 21 | 22 | .themebutton--small { 23 | min-height: 30px; 24 | } 25 | .themebutton--medium { 26 | min-height: 39px; 27 | padding-left: 20px; 28 | padding-right: 20px; 29 | } 30 | .themebutton--large { 31 | min-height: 49px; 32 | } 33 | 34 | 35 | .theme-button__disabled { 36 | opacity: 0.5; 37 | } -------------------------------------------------------------------------------- /src/components/ThemeButton/ThemeButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import Button from '../Button/Button'; 5 | 6 | import './ThemeButton.css'; 7 | 8 | function ThemeButton({ type = 'button', primary, size, className, children, ...props }) { 9 | const mode = primary ? 'themebutton--primary' : 'themebutton--secondary'; 10 | return ( 11 | 18 | ); 19 | }; 20 | 21 | export default ThemeButton 22 | 23 | ThemeButton.propTypes = { 24 | primary: PropTypes.bool, 25 | size: PropTypes.oneOf(['small', 'medium', 'large']), 26 | onClick: PropTypes.func, 27 | }; 28 | 29 | ThemeButton.defaultProps = { 30 | primary: false, 31 | size: 'small', 32 | onClick: undefined, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/ThemeButton/ThemeButton.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import ThemeButton from './ThemeButton'; 4 | 5 | export default { 6 | title: 'Example/ThemeButton', 7 | component: ThemeButton, 8 | argTypes: { 9 | }, 10 | }; 11 | 12 | const Template = (args) =>
50 | {isRetweeted &&
112 | )
113 | }
114 |
115 | export default Tweet
116 |
--------------------------------------------------------------------------------
/src/components/Tweet/Tweet.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Tweet from './Tweet';
4 |
5 | export default {
6 | title: 'Example/Tweet',
7 | component: Tweet,
8 | argTypes: {
9 | },
10 | };
11 |
12 | const Template = (args) =>
53 |
54 |
111 |
55 | history.push(`/${user.username}`)} />
56 |
57 |
58 | 
81 |
82 |
83 |
84 |
110 |
59 | history.push(`/${user?.username}`)}>{user?.username}
60 | {timeSince(createdAt)} ago
61 |
62 |
63 |
64 |
65 | {caption}
66 | 67 | 68 | 69 |
70 | {tags
71 | ? tags.map((tag) => (
72 |
73 | {`#${tag}`}
74 |
75 | ))
76 | : null}
77 |
78 |
79 |
80 |
85 |
109 |
86 |
89 | {comments.length > 0 && comments.length}
90 |
91 |
92 |
93 |
96 | {retweets}
97 |
98 |
99 |
100 |
103 | {likesState}
104 |
105 |
108 |
91 |
133 | )
134 | }
135 |
136 | export default TweetEditor
137 |
--------------------------------------------------------------------------------
/src/components/TweetEditor/TweetEditor.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import TweetEditor from './TweetEditor';
4 |
5 | export default {
6 | title: 'Example/TweetEditor',
7 | component: TweetEditor,
8 | argTypes: {
9 | },
10 | };
11 |
12 | const Template = (args) =>
93 | {preview && (
94 | 
95 | )}
96 | setTextTweet(e.target.value)}
101 | value={textTweet}
102 | />
103 |
132 |
104 | Tweet
130 |
131 |
105 |
106 |
111 |
112 |
113 |
118 |
119 |
122 |
129 |
123 |
126 | {toggleEmoji &&
128 |
11 |
41 | );
42 |
43 | export const Iconss = Template.bind({});
44 | Iconss.args = {
45 | };
46 |
47 |
--------------------------------------------------------------------------------
/src/components/icons/Like.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgLike(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgLike
15 |
--------------------------------------------------------------------------------
/src/components/icons/LikeFill.js:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | function SvgLikeFill(props) {
4 | return (
5 |
17 | );
18 | }
19 |
20 | export default SvgLikeFill;
21 |
--------------------------------------------------------------------------------
/src/components/icons/Lists.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgLists(props) {
4 | return (
5 |
15 | )
16 | }
17 |
18 | export default SvgLists
19 |
--------------------------------------------------------------------------------
/src/components/icons/ListsFill.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgListsFill(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgListsFill
15 |
--------------------------------------------------------------------------------
/src/components/icons/Media.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgMedia(props) {
4 | return (
5 |
15 | )
16 | }
17 |
18 | export default SvgMedia
19 |
--------------------------------------------------------------------------------
/src/components/icons/Messages.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgMessages(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgMessages
15 |
--------------------------------------------------------------------------------
/src/components/icons/MessagesFill.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgMessagesFill(props) {
4 | return (
5 |
15 | )
16 | }
17 |
18 | export default SvgMessagesFill
19 |
--------------------------------------------------------------------------------
/src/components/icons/More.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgMore(props) {
4 | return (
5 |
15 | )
16 | }
17 |
18 | export default SvgMore
19 |
--------------------------------------------------------------------------------
/src/components/icons/Notification.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgNotification(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgNotification
15 |
--------------------------------------------------------------------------------
/src/components/icons/NotificationFill.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgNotificationFill(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgNotificationFill
15 |
--------------------------------------------------------------------------------
/src/components/icons/Options.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgOptions(props) {
4 | return (
5 |
15 | )
16 | }
17 |
18 | export default SvgOptions
19 |
--------------------------------------------------------------------------------
/src/components/icons/Profile.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgProfile(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgProfile
15 |
--------------------------------------------------------------------------------
/src/components/icons/ProfileFill.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgProfileFill(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgProfileFill
15 |
--------------------------------------------------------------------------------
/src/components/icons/Question.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgQuestion(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgQuestion
15 |
--------------------------------------------------------------------------------
/src/components/icons/Reply.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgReply(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgReply
15 |
--------------------------------------------------------------------------------
/src/components/icons/Retweet.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgRetweet(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgRetweet
15 |
--------------------------------------------------------------------------------
/src/components/icons/Search.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgSearch(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgSearch
15 |
--------------------------------------------------------------------------------
/src/components/icons/Share.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgShare(props) {
4 | return (
5 |
15 | )
16 | }
17 |
18 | export default SvgShare
19 |
--------------------------------------------------------------------------------
/src/components/icons/TimelineProp.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgTimelineProp(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgTimelineProp
15 |
--------------------------------------------------------------------------------
/src/components/icons/Tweet.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgTweet(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgTweet
15 |
--------------------------------------------------------------------------------
/src/components/icons/Twitter.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | function SvgTwitter(props) {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default SvgTwitter
15 |
--------------------------------------------------------------------------------
/src/components/icons/index.js:
--------------------------------------------------------------------------------
1 | export { default as ArrowBottom } from './ArrowBottom'
2 | export { default as BookmarkFill } from './BookmarkFill'
3 | export { default as Bookmark } from './Bookmark'
4 | export { default as Close } from './Close'
5 | export { default as Emoji } from './Emoji'
6 | export { default as Explore } from './Explore'
7 | export { default as ExplorerFill } from './ExplorerFill'
8 | export { default as Gif } from './Gif'
9 | export { default as HomeFill } from './HomeFill'
10 | export { default as Home } from './Home'
11 | export { default as Like } from './Like'
12 | export { default as LikeFill } from './LikeFill'
13 | export { default as ListsFill } from './ListsFill'
14 | export { default as Lists } from './Lists'
15 | export { default as Media } from './Media'
16 | export { default as MessagesFill } from './MessagesFill'
17 | export { default as Messages } from './Messages'
18 | export { default as More } from './More'
19 | export { default as NotificationFill } from './NotificationFill'
20 | export { default as Notification } from './Notification'
21 | export { default as Options } from './Options'
22 | export { default as ProfileFill } from './ProfileFill'
23 | export { default as Profile } from './Profile'
24 | export { default as Question } from './Question'
25 | export { default as Reply } from './Reply'
26 | export { default as Retweet } from './Retweet'
27 | export { default as Search } from './Search'
28 | export { default as Share } from './Share'
29 | export { default as TimelineProp } from './TimelineProp'
30 | export { default as Tweet } from './Tweet'
31 | export { default as Twitter } from './Twitter'
--------------------------------------------------------------------------------
/src/components/loading/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Loading({ size = 30, stroke = 2 }) {
4 | return (
5 |
28 | )
29 | }
30 | export default Loading
31 |
--------------------------------------------------------------------------------
/src/constants/index.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import * as Icon from '../components/icons'
3 |
4 | import { UserContext } from '../context/UserContext'
5 |
6 | export const MENU = () => {
7 |
8 | const { user } = useContext(UserContext)
9 |
10 | return [
11 | {
12 | key: 'twitter',
13 | path: '/',
14 | icon:
23 |
24 | Bookmarks
25 |
28 |
29 |
30 |
31 | )
32 | }
33 |
34 | export default Notifications
35 |
--------------------------------------------------------------------------------
/src/pages/Explore/Explore.css:
--------------------------------------------------------------------------------
1 | .explore-page__search {
2 | margin-top: 10px;
3 | margin-bottom: 10px;
4 | }
5 | .explore--tags {
6 | border-bottom: 1px solid var(--c-border-color);
7 | padding: 10px;
8 | }
9 | .explore--tags:hover {
10 | background-color: var(--trends-hover-bg);;
11 | }
--------------------------------------------------------------------------------
/src/pages/Explore/Explore.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react'
2 |
3 |
4 | import Button from '../../components/Button/Button'
5 | import Header from '../../components/Header/Header'
6 | import News from '../../components/News'
7 | import Tweet from '../../components/Tweet/Tweet'
8 | import { More } from '../../components/icons'
9 | import SearchBox from '../../components/SearchBox/SearchBox'
10 | import { client } from '../../utils'
11 |
12 | import './Explore.css'
13 | import Loading from '../../components/loading'
14 | import { FeedContext } from '../../context/FeedContext'
15 |
16 | function Explore({ location }) {
17 |
18 |
19 | const { tags } = useContext(FeedContext);
20 |
21 | const [searchText, setSearchText] = useState("")
22 | const [tagsTweet, setTagsTweet] = useState(null)
23 |
24 | const tagsFilter = () => {
25 | return tags.filter((tag => tag.toLowerCase().indexOf(searchText) !== -1))
26 | }
27 |
28 | useEffect(() => {
29 | window.scrollTo(0, 0);
30 |
31 |
32 | if (location.search) {
33 | client(`/posts${location.search}`)
34 | .then((response) => {
35 | setTagsTweet(response.data);
36 | });
37 | }
38 |
39 |
40 | }, [location.search])
41 |
42 |
43 | return (
44 | <>
45 |
46 |
60 | {!tagsTweet && location.search &&
64 |
65 | )
66 | }
67 |
68 | export default Explore
69 |
--------------------------------------------------------------------------------
/src/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .Home {
2 | color: red;
3 | }
--------------------------------------------------------------------------------
/src/pages/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react'
2 | import { toast } from 'react-toastify'
3 |
4 | import Header from '../../components/Header/Header'
5 | import Loading from '../../components/loading'
6 | import * as Icons from '../../components/icons'
7 | import Tweet from '../../components/Tweet/Tweet'
8 | import TweetEditor from '../../components/TweetEditor/TweetEditor'
9 |
10 | import { FeedContext } from '../../context/FeedContext'
11 | import { client } from '../../utils'
12 |
13 | import './Home.css'
14 | import Button from '../../components/Button/Button'
15 | import TextTitle from '../../components/Text/title'
16 |
17 | function Home() {
18 |
19 | const { feed, setFeed } = useContext(FeedContext)
20 | const [loading, setLoading] = useState(true)
21 |
22 | useEffect(() => {
23 |
24 | window.scrollTo(0, 0);
25 |
26 | setLoading(true);
27 | setFeed(null)
28 |
29 | client("/users/feed")
30 | .then((res) => {
31 | setFeed(res.data);
32 | setLoading(false);
33 | })
34 | .catch((res) => {
35 | toast.error(res)
36 | setLoading(false);
37 | });
38 |
39 | }, [])
40 |
41 | return (
42 |
43 |
44 | Home
45 |
48 |
49 |
50 |
69 | )
70 | }
71 |
72 | export default Home
73 |
--------------------------------------------------------------------------------
/src/pages/Lists/Lists.css:
--------------------------------------------------------------------------------
1 | .list__follow {
2 | padding: 10px 15px;
3 | border-bottom: 1px solid var(--c-border-color);
4 | }
5 | .list__follow:hover {
6 | background-color: var(--trends-hover-bg);
7 | }
--------------------------------------------------------------------------------
/src/pages/Lists/Lists.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect } from 'react'
2 |
3 | import { FeedContext } from '../../context/FeedContext'
4 |
5 | import Header from '../../components/Header/Header'
6 | import TextTitle from '../../components/Text/title'
7 | import FollowSuggestion from '../../components/FollowSuggestion';
8 |
9 | import './Lists.css'
10 | import Loading from '../../components/loading';
11 |
12 | function Lists() {
13 |
14 | const { whoFollow } = useContext(FeedContext);
15 |
16 | useEffect(() => {
17 | window.scrollTo(0, 0);
18 | }, [])
19 |
20 | return (
21 | <>
22 |
57 |
59 | }
60 |
61 |
62 | { feed && feed.length == 0 && !loading && (
63 |
64 | Başkalarının Gönderilerini Görmek İçin Onları Takip Et..
65 |
66 | )}
67 |
68 |
28 |
30 | ))}
31 |
32 |
33 | {!whoFollow &&
36 |
37 | )
38 | }
39 |
40 | export default Lists
41 |
--------------------------------------------------------------------------------
/src/pages/More/More.css:
--------------------------------------------------------------------------------
1 | .more-page {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 |
6 | height: 200px;
7 |
8 | }
9 | .more-page > div {
10 | display: flex;
11 | padding: 30px;
12 | border: 1px solid var(--c-border-color);
13 |
14 | box-shadow: 3px 2px 3px 3px var(--c-theme);
15 |
16 | }
17 | .more-page > div > * {
18 | margin: 10px;
19 | }
--------------------------------------------------------------------------------
/src/pages/More/More.js:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect } from 'react'
2 |
3 | import Header from '../../components/Header/Header'
4 | import TextTitle from '../../components/Text/title'
5 |
6 |
7 | import './More.css'
8 |
9 | import { ThemeContext } from '../../context/ThemeContext'
10 |
11 | import ThemeButton from '../../components/ThemeButton/ThemeButton'
12 | import Button from '../../components/Button/Button'
13 |
14 | const THEME = {
15 | light: 'Light',
16 | dim: 'Dim',
17 | dark: 'Dark'
18 | }
19 |
20 | function More() {
21 | const { theme, setTheme } = useContext(ThemeContext);
22 |
23 | const changeTheme = (theme) => {
24 | setTheme(theme)
25 | localStorage.setItem('THEME', theme)
26 | }
27 |
28 | useEffect(() => {
29 | window.scrollTo(0, 0);
30 | }, [])
31 |
32 | return (
33 |
34 | <>
35 |
40 |
41 |
57 |
58 | )
59 | }
60 |
61 | export default More
62 |
--------------------------------------------------------------------------------
/src/pages/Notifications/Notifications.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scozdev/twitter-frontend/02f83f3095b5c89984f3c76deb35c614c0017896/src/pages/Notifications/Notifications.css
--------------------------------------------------------------------------------
/src/pages/Notifications/Notifications.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 |
3 |
4 | import Button from '../../components/Button/Button'
5 | import Header from '../../components/Header/Header'
6 | import { More, Options } from '../../components/icons'
7 | import TextTitle from '../../components/Text/title'
8 |
9 | import './Notifications.css'
10 |
11 | function Notifications() {
12 |
13 | useEffect(() => {
14 | window.scrollTo(0, 0);
15 | }, [])
16 |
17 | return (
18 | <>
19 |
42 | {['light', 'dim', 'dark'].map((th) => (
43 |
44 | changeTheme(th)}
50 | >
51 | {THEME[th]}
52 |
53 |
54 | ))}
55 |
56 |
48 |
49 | Profile Edit
50 |
51 |
52 |
63 | )
64 | }
65 |
66 | export default EditProfile
67 |
--------------------------------------------------------------------------------
/src/pages/Profile/Profile.css:
--------------------------------------------------------------------------------
1 | .profile-page__header--body {
2 | display: flex;
3 | align-items: center;
4 | }
5 | .profile-page__container {
6 | margin-left: 10px;
7 | margin-right: 15px;
8 |
9 | margin-top: -40px;
10 |
11 | border-bottom: 1px solid rgb(230, 236, 240);
12 | }
13 | .profile-page__container > div:first-child{
14 | display: flex;
15 | align-items: center;
16 | justify-content: space-between;
17 |
18 | }
19 | .profile-page__detail {
20 | display: flex;
21 | flex-direction: column;
22 | margin-left: 10px;
23 | }
24 | .profile-page__detail :not(:first-child) {
25 | color: var(--c-gray);
26 | }
27 | .profile-page__detail--b > span:first-child {
28 | margin-right: 15px;
29 | }
30 | .bold {
31 | color: var(--c-text-color);
32 | }
--------------------------------------------------------------------------------
/src/pages/Profile/Profile.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { useParams } from 'react-router-dom'
3 |
4 | import Header from '../../components/Header/Header'
5 | import Loading from '../../components/loading'
6 | import * as Icons from '../../components/icons'
7 | import Tweet from '../../components/Tweet/Tweet'
8 | import TextTitle from '../../components/Text/title'
9 | import TextBody from '../../components/Text/body'
10 | import Follow from '../../components/Follow/Follow'
11 | import Button from '../../components/Button/Button'
12 | import Avatar from '../../components/Avatar/Avatar'
13 | import ThemeButton from '../../components/ThemeButton/ThemeButton'
14 |
15 | import { client } from '../../utils'
16 |
17 | import './Profile.css'
18 |
19 |
20 | function Profile() {
21 |
22 | const { handle } = useParams();
23 | const [profile, setProfile] = useState({});
24 | const [loading, setLoading] = useState(true);
25 | const [deadend, setDeadend] = useState(false);
26 |
27 | const [followersState, setFollowers] = useState(0);
28 | const incFollowers = () => setFollowers(followersState + 1);
29 | const decFollowers = () => setFollowers(followersState - 1);
30 |
31 | useEffect(() => {
32 | window.scrollTo(0, 0);
33 | client(`/users/${handle}`)
34 | .then((res) => {
35 | setLoading(false);
36 | setDeadend(false);
37 | setProfile(res.data);
38 | })
39 | .catch((err) => setDeadend(true));
40 | }, [handle]);
41 |
42 | if (!deadend && loading) {
43 | return (
44 |
53 |
54 | setFullname(e.target.value)} icon={false} text="Full Name" />
55 |
56 | setBio(e.target.value)} icon={false} text="Biyografi" />
57 |
58 |
59 | Güncelle
60 |
61 |
62 |
45 |
47 | )
48 | }
49 |
50 | if (deadend) {
51 | return (
52 | Sorry, this page isn't available
53 | );
54 | }
55 | return (
56 |
57 |
58 |
59 |
73 |
74 |
75 |
76 |
119 | )
120 | }
121 |
122 | export default Profile
123 |
--------------------------------------------------------------------------------
/src/pages/TweetDetail/TweetDetail.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scozdev/twitter-frontend/02f83f3095b5c89984f3c76deb35c614c0017896/src/pages/TweetDetail/TweetDetail.css
--------------------------------------------------------------------------------
/src/pages/TweetDetail/TweetDetail.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { useHistory, useParams } from 'react-router-dom'
3 | import { toast } from 'react-toastify';
4 |
5 | import { client } from '../../utils';
6 |
7 | import Tweet from '../../components/Tweet/Tweet';
8 | import Header from '../../components/Header/Header';
9 | import TextTitle from '../../components/Text/title';
10 | import Loading from '../../components/loading'
11 | import SearchBox from '../../components/SearchBox/SearchBox';
12 | import Comment from '../../components/Comment/Comment';
13 |
14 |
15 | function TweetDetail({ }) {
16 | const params = useParams()
17 |
18 | const [tweet, setTweet] = useState(null);
19 | const [comments, setComments] = useState(null);
20 | const [commentText, setCommentText] = useState("");
21 |
22 |
23 | const handleAddComment = (e) => {
24 | if (e.key === 'Enter') {
25 | e.preventDefault();
26 |
27 | if (!commentText) return toast.error('Önce yorum yaz..:)')
28 |
29 | client(`/posts/${tweet._id}/comments`, {
30 | body: { text: commentText },
31 | }).then((resp) => {
32 | setComments([...comments, resp.data]);
33 | toast.success('Yorum yapıldı.')
34 | });
35 |
36 | setCommentText('')
37 | }
38 | }
39 |
40 | useEffect(() => {
41 | window.scrollTo(0, 0);
42 | client(`/posts/${params.tweetId}`)
43 | .then((res) => {
44 | setTweet(res.data)
45 | setComments(res.data.comments)
46 | })
47 | .catch((err) => toast.error(err))
48 |
49 | }, [params.tweetId])
50 |
51 | return (
52 |
60 |
63 |
72 |
64 | {profile.fullname ?? profile.username}
65 |
66 | {profile?.posts?.length
67 | ? `${profile.posts.length} Tweets`
68 | : "No Tweets"}
69 |
70 |
71 |
77 |
78 |
111 |
112 |
113 | {profile?.posts && profile.posts.map((post) => (
114 |
79 |
99 |
100 |
83 |
87 | Edit Profile
88 |
89 |
90 | ) : (
91 |
101 | {profile.fullname ?? profile?.username}
102 | @{profile?.username}
103 | {profile.createdAt}
104 |
109 |
110 |
105 | {profile.followingCount} following
106 | {profile.followersCount} followers
107 |
108 |
53 |
54 |
55 | Tweet
56 |
57 | {tweet ?
58 | (
59 | <>
60 | setCommentText(e.target.value)}
65 | value={commentText}
66 | onKeyPress={handleAddComment}
67 | />
68 |
69 |
82 | )
83 | }
84 |
85 | export default TweetDetail
86 |
--------------------------------------------------------------------------------
/src/styles/index.css:
--------------------------------------------------------------------------------
1 | @import './veriables.css';
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | border: 0;
7 | outline: 0;
8 | font: inherit;
9 | color: inherit;
10 | }
11 | a {
12 | text-decoration: none;
13 | }
14 | html {
15 | font-size: 15px;
16 | }
17 |
18 | body {
19 | font-size: 1rem;
20 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
21 | Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
22 | background-color: var(--c-primary);
23 | color: var(--c-text-color);
24 | }
25 |
26 | @media (min-width: 1000px){
27 | body {
28 | overflow-y: scroll;
29 | }
30 | }
31 |
32 | .loading {
33 | height: 300px;
34 | display: flex;
35 | align-items: center;
36 | justify-content: center;
37 | }
38 |
39 | .green:hover svg {
40 | color: rgb(23, 191, 69);
41 | }
42 | .green:hover {
43 | background-color: rgba(23, 191, 99, 0.1)
44 | }
45 | .red:hover svg {
46 | color: rgb(224, 36, 94);
47 | }
48 | .red:hover {
49 | background-color: rgba(224, 36, 94, 0.1);
50 | }
--------------------------------------------------------------------------------
/src/styles/veriables.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --c-primary: #fff;
3 | --c-text-color: #000;
4 | --c-border-color: rgb(230, 236, 240);
5 | --c-gray: #6e767d;
6 | --c-dark-gray: #202327;
7 |
8 | --input-back:#e6ecf0;
9 | --extra-back: rgb(245, 248, 250);
10 | --trends-hover-bg: rgba(0, 0, 0, 0.03);
11 |
12 | --c-theme: rgba(29, 161, 242, 1);
13 | --c-theme-hover: rgba(26, 145, 218, 1);
14 | --c-theme-hover2: rgb(29, 161, 242);
15 | --c-theme-10: rgba(29, 161, 242, 0.1);
16 | --fade: 120ms;
17 |
18 | --tweet-text: rgb(20, 23, 26);
19 |
20 | --input-icon :rgb(101, 119, 134);
21 |
22 | --color-lightGray: #8899a6;
23 | --profile-top: rgb(204, 214, 221);
24 |
25 | --primary-line: #38444d;
26 | /* --input-primary: rgb(37, 51, 65); */
27 | --font: 15px;
28 |
29 | --small: 13px;
30 | --medium: 15px;
31 | --large: 19px;
32 |
33 | }
34 |
35 | .dim:root {
36 | --c-primary: rgb(21, 32, 43);
37 | --c-text-color: #fff;
38 | --c-border-color: #2f3336;
39 | --c-gray: #6e767d;
40 | --c-dark-gray: #202327;
41 |
42 | --input-back:rgb(37, 51, 65);
43 | --extra-back: rgb(25, 39, 52);
44 | --trends-hover-bg: rgba(255, 255, 255, 0.03);
45 | }
46 |
47 | .dark:root {
48 | --c-primary: #000;
49 | --c-text-color: #fff;
50 | --c-border-color: #2f3336;
51 | --c-gray: #6e767d;
52 | --c-dark-gray: #202327;
53 |
54 | --input-back:rgb(37, 51, 65);
55 | --extra-back: rgb(21, 24, 28);
56 | --trends-hover-bg: rgba(255, 255, 255, 0.03);
57 | }
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export const timeSince = (timestamp) => {
2 | const seconds = Math.floor((new Date() - new Date(timestamp)) / 1000);
3 |
4 | let interval = Math.floor(seconds / 31536000);
5 |
6 | if (interval > 1) {
7 | return interval + " years";
8 | }
9 |
10 | interval = Math.floor(seconds / 2592000);
11 | if (interval > 1) {
12 | return interval + " months";
13 | }
14 |
15 | interval = Math.floor(seconds / 86400);
16 | if (interval > 1) {
17 | return interval + " days";
18 | }
19 |
20 | interval = Math.floor(seconds / 3600);
21 | if (interval > 1) {
22 | return interval + " hours";
23 | }
24 |
25 | interval = Math.floor(seconds / 60);
26 | if (interval > 1) {
27 | return interval + " minutes";
28 | }
29 |
30 | return Math.floor(seconds) + " seconds";
31 | };
32 |
33 | export const client = (endpoint, { body, ...customConfig } = {}) => {
34 | const token = localStorage.getItem("token");
35 | const headers = { "Content-Type": "application/json" };
36 |
37 | if (token) {
38 | headers.Authorization = `Bearer ${token}`;
39 | }
40 |
41 | const config = {
42 | method: body ? "POST" : "GET",
43 | ...customConfig,
44 | headers: {
45 | ...headers,
46 | ...customConfig.headers,
47 | },
48 | };
49 |
50 | if (body) {
51 | config.body = JSON.stringify(body);
52 | }
53 |
54 | return fetch(`${process.env.REACT_APP_BACKEND_URL}${endpoint}`, config).then(
55 | async (res) => {
56 | const data = await res.json();
57 |
58 | if (res.ok) {
59 | return data;
60 | } else {
61 | return Promise.reject(data);
62 | }
63 | }
64 | );
65 | };
66 |
67 | export const uploadImage = (file) => {
68 | const data = new FormData();
69 | data.append("file", file);
70 | data.append("upload_preset", "mtzhxnqp");
71 |
72 | return fetch(process.env.REACT_APP_CLOUDINARY_URL, {
73 | method: "POST",
74 | body: data,
75 | }).then((res) => res.json());
76 | };
77 |
78 |
--------------------------------------------------------------------------------
70 | {comments?.map(comment => (
71 |
74 |
75 | ) :
76 |
77 |
79 | }
80 |
81 |