├── .gitignore
├── .prettierrc.js
├── README.md
├── components
    ├── AddPostModal
    │   ├── index.js
    │   └── styles.module.scss
    ├── AppHeader
    │   ├── index.js
    │   └── styles.module.scss
    ├── AppSidebar
    │   ├── index.js
    │   └── styles.module.scss
    ├── ContactList
    │   ├── index.js
    │   └── styles.module.scss
    ├── Container.js
    ├── EditProfileBtn
    │   ├── index.js
    │   └── styles.module.scss
    ├── HomeLayout
    │   ├── index.js
    │   └── styles.module.scss
    ├── InboxScreen
    │   ├── index.js
    │   └── styles.module.scss
    ├── Loader
    │   ├── index.js
    │   └── styles.module.scss
    ├── MessageContent
    │   ├── index.js
    │   └── styles.module.scss
    ├── MessageFooter
    │   ├── index.js
    │   └── styles.module.scss
    ├── MessageHeader
    │   ├── index.js
    │   └── styles.module.scss
    ├── MessageListItem
    │   ├── index.js
    │   └── styles.module.scss
    ├── MessageSection
    │   ├── index.js
    │   └── styles.module.scss
    ├── NewMessageModal
    │   ├── index.js
    │   └── styles.module.scss
    ├── NoMessage
    │   ├── index.js
    │   └── styles.module.scss
    ├── NotFoundScreen
    │   └── index.js
    ├── Profile
    │   ├── index.js
    │   └── styles.module.scss
    ├── ProfileFollowButton
    │   ├── index.js
    │   └── styles.module.scss
    ├── SearchResults
    │   ├── index.js
    │   └── styles.module.scss
    ├── SignInScreen
    │   ├── index.js
    │   └── styles.module.scss
    ├── SignUpScreen
    │   ├── index.js
    │   └── styles.module.scss
    ├── StoriesBar
    │   ├── index.js
    │   └── styles.module.scss
    ├── StoryItem
    │   ├── index.js
    │   └── styles.module.scss
    ├── SugessionUser
    │   ├── index.js
    │   └── styles.module.scss
    ├── UserImage
    │   ├── index.js
    │   └── styles.module.scss
    ├── UserInfo
    │   ├── index.js
    │   └── styles.module.scss
    ├── UserPost
    │   ├── index.js
    │   └── styles.module.scss
    ├── UserPosts
    │   ├── index.js
    │   └── styles.module.scss
    └── UserStatistics
    │   ├── index.js
    │   └── styles.module.scss
├── hooks
    ├── usePostsFormat.js
    └── useWindowSize.js
├── icons
    ├── AddPost.js
    ├── Back.js
    ├── Bookmark.js
    ├── BookmarkFill.js
    ├── Camera.js
    ├── Close.js
    ├── Comment.js
    ├── Emoji.js
    ├── Explore.js
    ├── ExploreFill.js
    ├── Home.js
    ├── HomeFill.js
    ├── Info.js
    ├── Like.js
    ├── LikeFill.js
    ├── Loader.js
    ├── Message.js
    ├── MessageFill.js
    ├── NewMessage.js
    ├── Options.js
    ├── Photo.js
    ├── Posts.js
    ├── Preferences.js
    ├── Search.js
    ├── Tagged.js
    ├── User.js
    └── index.js
├── lib
    ├── auth.js
    ├── db.js
    └── firebase.js
├── next.config.js
├── next.config.template.js
├── package-lock.json
├── package.json
├── pages
    ├── 404.js
    ├── [username]
    │   └── [[...index]].js
    ├── _app.js
    ├── accounts
    │   └── emailsignup.js
    ├── api
    │   └── hello.js
    ├── direct
    │   └── [[...index]].js
    └── index.js
├── public
    ├── betul.jpg
    ├── bill.jpg
    ├── elon.jpg
    ├── erkan.jpg
    ├── erkan2.jpg
    ├── facebook-logo.png
    ├── favicon.ico
    ├── hasan.jpg
    ├── instagram-dark.png
    ├── instagram.png
    ├── ivana.jpg
    ├── manifest.json
    ├── mustafa.jpg
    ├── owuzan.jpg
    ├── owuzan
    │   ├── 1.jpg
    │   ├── 10.jpg
    │   ├── 11.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   ├── 5.jpg
    │   ├── 6.jpg
    │   ├── 7.jpg
    │   ├── 8.jpg
    │   └── 9.jpg
    ├── photo-example.jpg
    ├── robots.txt
    ├── ronaldo.jpg
    ├── serdar.jpg
    ├── sign-up.png
    ├── suleyman-example.jpg
    ├── suleyman.jpg
    └── user.jpg
├── styles
    └── globals.scss
├── svgs
    ├── AddPost.svg
    ├── Back.svg
    ├── Bookmark.svg
    ├── BookmarkFill.svg
    ├── Camera.svg
    ├── Close.svg
    ├── Comment.svg
    ├── Emoji.svg
    ├── Explore.svg
    ├── ExploreFill.svg
    ├── Home.svg
    ├── HomeFill.svg
    ├── Info.svg
    ├── Like.svg
    ├── LikeFill.svg
    ├── Loader.svg
    ├── Message.svg
    ├── MessageFill.svg
    ├── NewMessage.svg
    ├── Options.svg
    ├── Photo.svg
    ├── Posts.svg
    ├── Preferences.svg
    ├── Search.svg
    ├── Tagged.svg
    └── User.svg
├── utility
    ├── follow.js
    ├── isFollowing.js
    ├── linkedText.js
    ├── sendMessage.js
    └── unfollow.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | .idea
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | # testing
 8 | /coverage
 9 | 
10 | # next.js
11 | /.next/
12 | /out/
13 | 
14 | # production
15 | /build
16 | 
17 | # misc
18 | .DS_Store
19 | *.pem
20 | 
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | next.config.js
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     trailingComma: 'es5',
3 |     tabWidth: 4,
4 |     semi: false,
5 |     singleQuote: true,
6 |     bracketSpacing: true,
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/components/AddPostModal/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './styles.module.scss'
 3 | 
 4 | import UserImage from '../UserImage'
 5 | import * as Icons from '../../icons'
 6 | 
 7 | import { uploadPost } from '../../lib/db'
 8 | import { useAuth } from '../../lib/auth'
 9 | 
10 | const AddPostModal = (props) => {
11 |     const { file, setFile } = props
12 |     const user = useAuth().user
13 |     const [caption, setCaption] = React.useState('')
14 | 
15 |     const handleShare = async () => {
16 |         uploadPost(user.id, {
17 |             file,
18 |             caption,
19 |             time: new Date(),
20 |         })
21 |         setFile(null)
22 |         setCaption('')
23 |     }
24 |     if (file) {
25 |         return (
26 |             <div className={styles.newPost}>
27 |                 <header className={styles.newPostHeader}>
28 |                     <button
29 |                         className={styles.closeIcon}
30 |                         onClick={() => setFile(null)}
31 |                     >
32 |                         <Icons.Back />
33 |                     </button>
34 |                     <div className={styles.title}>Yeni Gönderi</div>
35 |                     <button
36 |                         className={styles.shareButton}
37 |                         onClick={handleShare}
38 |                     >
39 |                         Paylaş
40 |                     </button>
41 |                 </header>
42 |                 <div className={styles.postDescription}>
43 |                     <div className={styles.user}>
44 |                         <UserImage size={30} />
45 |                     </div>
46 |                     <div className={styles.caption}>
47 |                         <textarea
48 |                             onChange={(e) => setCaption(e.target.value)}
49 |                             placeholder="Bir açıklama yaz..."
50 |                         ></textarea>
51 |                     </div>
52 |                     <div className={styles.image}>
53 |                         {file ? <img src={URL.createObjectURL(file)} /> : ''}
54 |                     </div>
55 |                 </div>
56 |                 <style jsx global>{`
57 |                     body {
58 |                         overflow: hidden;
59 |                     }
60 |                 `}</style>
61 |             </div>
62 |         )
63 |     }
64 |     return <div></div>
65 | }
66 | 
67 | export default AddPostModal
68 | 


--------------------------------------------------------------------------------
/components/AddPostModal/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .newPost {
 2 |     position: fixed;
 3 |     left: 0;
 4 |     top: 0;
 5 |     bottom: 0;
 6 |     right: 0;
 7 |     background-color: var(--white);
 8 |     z-index: 10;
 9 | }
10 | .newPostHeader {
11 |     display: flex;
12 |     justify-content: space-between;
13 |     align-items: center;
14 |     padding: 0 15px;
15 |     height: 44px;
16 |     width: 100%;
17 |     box-shadow: var(--shadow);
18 |     border-bottom: 2px solid var(--border-color);
19 | }
20 | .closeIcon {
21 |     all: unset;
22 |     font-size: 24px;
23 |     cursor: pointer;
24 |     transform: rotate(-90deg);
25 | }
26 | .title {
27 |     font-weight: 500;
28 | }
29 | .shareButton {
30 |     all: unset;
31 |     cursor: pointer;
32 |     color: var(--blue);
33 |     font-style: 24px;
34 |     font-weight: 500;
35 | }
36 | .postDescription {
37 |     display: flex;
38 |     padding: 15px;
39 |     align-items: flex-start;
40 | }
41 | .user {
42 | }
43 | .caption {
44 |     flex: 1;
45 |     textarea {
46 |         width: 100%;
47 |         padding: 3px 10px;
48 |         font-size: 16px;
49 |         border: 0;
50 |         font-family: inherit;
51 |         outline: 0;
52 |         height: 100px;
53 |     }
54 | }
55 | .image {
56 |     max-width: 50px;
57 |     height: auto;
58 | 
59 |     img {
60 |         width: 100%;
61 |         height: 100%;
62 |         object-fit: contain;
63 |     }
64 | }
65 | 


--------------------------------------------------------------------------------
/components/AppHeader/styles.module.scss:
--------------------------------------------------------------------------------
  1 | header.header {
  2 |     background-color: var(--white);
  3 |     border-bottom: 1px solid var(--border-color);
  4 |     max-height: 54px;
  5 |     height: 100%;
  6 |     padding: 0 15px;
  7 |     @media (max-width: 599.98px) {
  8 |         // box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .15);
  9 |         position: fixed;
 10 |         top: 0;
 11 |         left: 0;
 12 |         right: 0;
 13 |         z-index: 10;
 14 |     }
 15 | 
 16 |     .headerInner {
 17 |         padding: 9px 0;
 18 |         display: flex;
 19 |         align-items: center;
 20 |         justify-content: space-between;
 21 |         color: var(--text-color);
 22 | 
 23 |         a {
 24 |             color: inherit;
 25 |         }
 26 |         .brand {
 27 |             @media (min-width: 600px) {
 28 |                 max-width: 360px;
 29 |             }
 30 |             width: 100%;
 31 |             height: inherit;
 32 |             display: flex;
 33 |             justify-content: space-between;
 34 | 
 35 |             a {
 36 |                 padding-top: 7px;
 37 |             }
 38 |             img {
 39 |                 object-fit: contain;
 40 |                 height: 29px;
 41 |                 width: auto;
 42 |                 // transform: translateY(7px);
 43 |             }
 44 |         }
 45 |         .searchArea {
 46 |             position: relative;
 47 |             input {
 48 |                 height: 28px;
 49 |                 width: 214px;
 50 |                 background-color: var(--input-background);
 51 |                 border: 1px solid var(--border-color);
 52 |                 border-radius: 3px;
 53 |                 outline: 0;
 54 |                 padding: 0 1rem;
 55 |                 color: inherit;
 56 | 
 57 |                 &::placeholder {
 58 |                     color: var(--border-color);
 59 |                     text-align: center;
 60 |                 }
 61 |             }
 62 | 
 63 |             button {
 64 |                 all: unset;
 65 |                 cursor: pointer;
 66 |                 position: absolute;
 67 |                 right: 5px;
 68 |                 top: 50%;
 69 |                 transform: translateY(-50%);
 70 |                 width: 1.5em;
 71 |                 height: 1.5em;
 72 |                 font-size: 12px;
 73 |                 background-color: red;
 74 |                 display: flex;
 75 |                 border-radius: 50px;
 76 |                 background-color: var(--border-color);
 77 |                 justify-content: center;
 78 |                 color: var(--white);
 79 | 
 80 |                 span {
 81 |                     --top: -2px;
 82 |                     position: absolute;
 83 |                     top: var(--top);
 84 |                     &:last-child {
 85 |                         top: calc(var(--top) + 6px);
 86 |                     }
 87 |                 }
 88 |             }
 89 |             @media (max-width: 999.98px) {
 90 |                 margin-right: 40px;
 91 |             }
 92 |             @media (max-width: 599.98px) {
 93 |                 display: none;
 94 |             }
 95 |         }
 96 |         .navbar {
 97 |             display: flex;
 98 |             flex: 1;
 99 |             justify-content: flex-end;
100 |             nav {
101 |                 svg path {
102 |                     fill: var(--text);
103 |                 }
104 |                 display: flex;
105 |                 margin-top: -22px;
106 |                 margin-left: -22px;
107 | 
108 |                 & > a,
109 |                 & > div {
110 |                     font-size: 1.5rem;
111 |                     margin-top: 22px;
112 |                     margin-left: 22px;
113 |                     display: flex;
114 |                     align-items: center;
115 |                     justify-content: center;
116 |                     position: relative;
117 |                 }
118 | 
119 |                 .profileDropdown {
120 |                     position: absolute;
121 |                     top: calc(100% + 15px);
122 |                     right: -10px;
123 |                     display: none;
124 |                     flex-direction: column;
125 |                     background-color: var(--white);
126 |                     box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.15);
127 |                     width: 230px;
128 |                     border-radius: 5px;
129 | 
130 |                     &.show {
131 |                         display: flex;
132 |                     }
133 | 
134 |                     &::before {
135 |                         content: "";
136 |                         width: 15px;
137 |                         height: 15px;
138 |                         display: block;
139 |                         transform: rotate(45deg);
140 |                         background-color: var(--white);
141 |                         top: -7px;
142 |                         right: 15px;
143 |                         position: absolute;
144 |                         z-index: 0;
145 |                         box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.15);
146 |                     }
147 | 
148 |                     a {
149 |                         z-index: 1;
150 |                         padding: 8px 16px;
151 |                         font-size: 14px;
152 |                         display: flex;
153 |                         text-decoration: none;
154 |                         align-items: center;
155 |                         background-color: var(--white);
156 | 
157 |                         &:first-child {
158 |                             border-radius: 5px 5px 0 0;
159 |                         }
160 | 
161 |                         &:last-child {
162 |                             border-radius: 0 0 5px 5px;
163 |                         }
164 | 
165 |                         &:hover {
166 |                             background-color: var(--background-color);
167 |                         }
168 | 
169 |                         div {
170 |                             margin-right: 10px;
171 |                         }
172 |                     }
173 |                 }
174 |             }
175 | 
176 |             &.mobile {
177 |                 nav {
178 |                     position: fixed;
179 |                     left: 0;
180 |                     bottom: 0;
181 |                     right: 0;
182 |                     background-color: var(--white);
183 |                     border-top: 1px solid var(--border-color);
184 |                     justify-content: space-around;
185 |                     height: 50px;
186 |                     margin: 0;
187 |                     padding: 0;
188 |                     z-index: 1;
189 | 
190 |                     a {
191 |                         margin: 0;
192 |                         flex: 1;
193 |                     }
194 |                 }
195 |             }
196 |         }
197 |     }
198 | }
199 | .logoutLink {
200 |     border-top: 2px solid var(--border-color);
201 | }
202 | 


--------------------------------------------------------------------------------
/components/AppSidebar/index.js:
--------------------------------------------------------------------------------
  1 | import styles from './styles.module.scss'
  2 | import UserImage from '../UserImage'
  3 | import SuggessionUser from '../SugessionUser'
  4 | import { getUserData } from '../../lib/db'
  5 | import { useAuth } from '../../lib/auth'
  6 | import React from 'react'
  7 | 
  8 | export default function AppSidebar() {
  9 |     const { user } = useAuth()
 10 |     const [userData, setUserData] = React.useState('')
 11 | 
 12 |     React.useEffect(async () => {
 13 |         setUserData(await getUserData(await user?.id))
 14 |     }, [user])
 15 |     return (
 16 |         <div className={styles.sidebarInner}>
 17 |             <div className={styles.changeBar}>
 18 |                 <UserImage type="story" size={56} />
 19 |                 <div className={styles.userMeta}>
 20 |                     <p>{userData.username}</p>
 21 |                     <span>{userData.name}</span>
 22 |                 </div>
 23 |                 <button>Geçiş Yap</button>
 24 |             </div>
 25 |             <div className={styles.suggested}>
 26 |                 <div className={styles.suggestedHeader}>
 27 |                     <p>Senin İçin Öneriler</p>
 28 |                     <button>Tümünü Gör</button>
 29 |                 </div>
 30 |                 <ul>
 31 |                     <li>
 32 |                         <SuggessionUser
 33 |                             username={'elonmusk'}
 34 |                             name={'Elon Musk'}
 35 |                             src={'/elon.jpg'}
 36 |                         />
 37 |                     </li>
 38 |                     <li>
 39 |                         <SuggessionUser
 40 |                             username={'ivanasert'}
 41 |                             name={'Ivana'}
 42 |                             src={'/ivana.jpg'}
 43 |                         />
 44 |                     </li>
 45 |                     <li>
 46 |                         <SuggessionUser
 47 |                             username={'mserdark'}
 48 |                             name={'M. Serdar Kuzuloglu'}
 49 |                             src={'/serdar.jpg'}
 50 |                         />
 51 |                     </li>
 52 |                     <li>
 53 |                         <SuggessionUser
 54 |                             username={'thisisbillgates'}
 55 |                             name={'Bill Gates'}
 56 |                             src={'/bill.jpg'}
 57 |                         />
 58 |                     </li>
 59 |                     <li>
 60 |                         <SuggessionUser
 61 |                             username={'betulhoca'}
 62 |                             name={'Betül Ay'}
 63 |                             src={'/betul.jpg'}
 64 |                         />
 65 |                     </li>
 66 |                 </ul>
 67 |             </div>
 68 |             <footer className={styles.instagramFooter}>
 69 |                 <ul>
 70 |                     <li>
 71 |                         <a href="#">Hakkında</a>
 72 |                     </li>
 73 |                     <li>
 74 |                         <a href="#">Yardım</a>
 75 |                     </li>
 76 |                     <li>
 77 |                         <a href="#">Basın</a>
 78 |                     </li>
 79 |                     <li>
 80 |                         <a href="#">API</a>
 81 |                     </li>
 82 |                     <li>
 83 |                         <a href="#">İş Fırsatları</a>
 84 |                     </li>
 85 |                     <li>
 86 |                         <a href="#">Gizlilik</a>
 87 |                     </li>
 88 |                     <li>
 89 |                         <a href="#">Koşullar</a>
 90 |                     </li>
 91 |                     <li>
 92 |                         <a href="#">Konumlar</a>
 93 |                     </li>
 94 |                     <li>
 95 |                         <a href="#">Başlıca Hesaplar</a>
 96 |                     </li>
 97 |                     <li>
 98 |                         <a href="#">Konu Etiketleri</a>
 99 |                     </li>
100 |                     <li>
101 |                         <a href="#">Dil</a>
102 |                     </li>
103 |                 </ul>
104 |                 <p className={styles.footerText}>
105 |                     © 2020 INSTAGRAM FROM FACEBOOK
106 |                 </p>
107 |             </footer>
108 |         </div>
109 |     )
110 | }
111 | 


--------------------------------------------------------------------------------
/components/AppSidebar/styles.module.scss:
--------------------------------------------------------------------------------
  1 | .sidebarInner {
  2 |     position: sticky;
  3 |     top: 0px;
  4 | }
  5 | 
  6 | .changeBar {
  7 |     padding-top: 18px;
  8 |     display: flex;
  9 |     justify-content: space-between;
 10 |     align-items: center;
 11 |     font-size: 14px;
 12 |     color: var(--text);
 13 | 
 14 |     .userMeta {
 15 |         width: 141px;
 16 |         display: flex;
 17 |         flex-direction: column;
 18 |         p {
 19 |             margin: 0;
 20 |             font-weight: 500;
 21 |         }
 22 |         span {
 23 |             color: var(--muted-text);
 24 |         }
 25 |     }
 26 | 
 27 |     button {
 28 |         all: unset;
 29 |         cursor: pointer;
 30 |         color: var(--blue);
 31 |         font-weight: 500;
 32 |         font-size: 12px;
 33 |     }
 34 | }
 35 | 
 36 | .suggested {
 37 |     margin-top: 12px;
 38 | 
 39 |     .suggestedHeader {
 40 |         padding-top: 12px;
 41 |         font-weight: 500;
 42 |         font-size: 12px;
 43 |         display: flex;
 44 |         align-items: center;
 45 |         justify-content: space-between;
 46 | 
 47 |         p {
 48 |             color: var(--muted-text);
 49 |             font-size: 14px;
 50 |         }
 51 | 
 52 |         button {
 53 |             all: unset;
 54 |             color: var(--text);
 55 |             cursor: pointer;
 56 |             font-weight: 500;
 57 |         }
 58 |     }
 59 | 
 60 |     ul {
 61 |         margin: 0;
 62 |         margin-top: 8px;
 63 |         padding: 8px 0;
 64 |         list-style: none;
 65 | 
 66 |         li {
 67 |             display: flex;
 68 |             align-items: center;
 69 |             justify-content: space-between;
 70 |             margin-bottom: 10px;
 71 |             padding: 2px 0;
 72 | 
 73 |             &:last-child {
 74 |                 margin-bottom: 0;
 75 |             }
 76 | 
 77 |             button {
 78 |                 all: unset;
 79 |                 cursor: pointer;
 80 |                 color: var(--blue);
 81 |                 font-size: 12px;
 82 |                 font-weight: 500;
 83 |             }
 84 |         }
 85 |     }
 86 | }
 87 | 
 88 | .instagramFooter {
 89 |     margin-top: 25px;
 90 |     font-size: 11px;
 91 |     color: #c7c7c7;
 92 | 
 93 |     a {
 94 |         color: inherit;
 95 |         text-decoration: none;
 96 |     }
 97 | 
 98 |     ul {
 99 |         list-style: none;
100 |         display: flex;
101 |         flex-wrap: wrap;
102 |         li {
103 |             &::after {
104 |                 content: "\00B7";
105 |                 margin: 0 0.25em 0 0.25em;
106 |             }
107 | 
108 |             &:last-child::after {
109 |                 content: unset;
110 |             }
111 |         }
112 |     }
113 | 
114 |     .footerText {
115 |         text-transform: uppercase;
116 |         margin-top: 20px;
117 |     }
118 | }
119 | 


--------------------------------------------------------------------------------
/components/ContactList/index.js:
--------------------------------------------------------------------------------
 1 | import styles from './styles.module.scss'
 2 | import MessageListItem from '../MessageListItem'
 3 | 
 4 | export default function ContactList(props) {
 5 |     const activeContact = props?.activeContact
 6 |     const setActiveContact = props?.setActiveContact
 7 |     const contacts = props?.contacts
 8 |     const setContacts = props?.setContacts
 9 |     const activeHandle = props?.activeHandle
10 | 
11 |     return (
12 |         <div className={styles.contactListWrapper}>
13 |             <div className={styles.contactList}>
14 |                 {contacts.map((contact, index) => {
15 |                     index++
16 |                     return (
17 |                         <div
18 |                             key={contact.id}
19 |                             onClick={(e) => activeHandle(e, contact.id)}
20 |                             className={
21 |                                 activeContact === contact.id
22 |                                     ? styles.contact +
23 |                                       ' ' +
24 |                                       styles.activeContact
25 |                                     : styles.contact
26 |                             }
27 |                         >
28 |                             <MessageListItem contact={contact} />
29 |                         </div>
30 |                     )
31 |                 })}
32 |             </div>
33 |         </div>
34 |     )
35 | }
36 | 


--------------------------------------------------------------------------------
/components/ContactList/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .contactListWrapper {
 2 |     flex: 1;
 3 |     padding: 8px 0 0 0;
 4 |     overflow-x: hidden;
 5 |     overflow-y: auto;
 6 | 
 7 |     .contactList {
 8 |         list-style: none;
 9 |         margin: 0;
10 |         padding: 0;
11 | 
12 |         .contact {
13 |             &:hover {
14 |                 background-color: var(--background-color);
15 |                 cursor: pointer;
16 |             }
17 |             &.activeContact {
18 |                 background-color: var(--border-light-color);
19 |             }
20 |         }
21 | 
22 |         a {
23 |             padding: 8px 20px;
24 |             display: flex;
25 |             align-items: center;
26 |             text-decoration: none;
27 |             overflow: hidden;
28 |         }
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/components/Container.js:
--------------------------------------------------------------------------------
1 | export default function Container({ children, ...props }) {
2 |     return (
3 |         <div className="container" {...props}>
4 |             {children}
5 |         </div>
6 |     )
7 | }
8 | 


--------------------------------------------------------------------------------
/components/EditProfileBtn/index.js:
--------------------------------------------------------------------------------
1 | import styles from './styles.module.scss'
2 | 
3 | export default function EditProfileBtn() {
4 |     return (
5 |         <button className={styles.editProfileBtn}>Profili Düzenle</button>
6 |     )
7 | }
8 | 


--------------------------------------------------------------------------------
/components/EditProfileBtn/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .editProfileBtn {
 2 |     margin-left: 20px;
 3 |     font-size: 14px;
 4 |     border: 1px solid var(--border-color);
 5 |     color: inherit;
 6 |     border-radius: 4px;
 7 |     font-weight: 600;
 8 |     padding: 5px 9px;
 9 |     background-color: var(--background-color) !important;
10 |     outline: 0;
11 | 
12 |     @media (max-width: 734.98px) {
13 |         margin: 15px;
14 |         display: block;
15 |         width: calc(100% - 30px);
16 |         background-color: var(--white) !important;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/components/HomeLayout/index.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import UserPost from '../UserPost'
 3 | import React, { useState, useEffect } from 'react'
 4 | import AppSidebar from '../AppSidebar'
 5 | import styles from './styles.module.scss'
 6 | import StoriesBar from '../StoriesBar'
 7 | import firebase from '../../lib/firebase'
 8 | import { useAuth } from '../../lib/auth'
 9 | import { getUserData } from '../../lib/db'
10 | import { ClipLoader } from 'react-spinners'
11 | import { css } from '@emotion/core'
12 | 
13 | export default function Home() {
14 |     const [posts, setPosts] = useState([])
15 |     const [loading, setLoading] = useState(true)
16 |     const firestore = firebase.firestore()
17 |     const auth = useAuth()
18 | 
19 |     useEffect(async () => {
20 |         let userPosts = []
21 |         await firestore
22 |             .collection(`users/${auth.user.id}/followings`)
23 |             .get()
24 |             .then((res) =>
25 |                 res.docs.forEach(async (user) => {
26 |                     const username = await getUserData(user.id).then(
27 |                         (res) => res.username
28 |                     )
29 |                     await firestore
30 |                         .collection(`users/${user.id}/posts`)
31 |                         .orderBy('time', 'desc')
32 |                         .limit(10)
33 |                         .get()
34 |                         .then((res) => {
35 |                             if (res.docs.length) {
36 |                                 res.docs.reverse()
37 |                                 res.docs.forEach((doc) => {
38 |                                     userPosts = [
39 |                                         ...userPosts,
40 |                                         {
41 |                                             userId: user.id,
42 |                                             username,
43 |                                             id: doc.id,
44 |                                             ...doc.data(),
45 |                                         },
46 |                                     ]
47 |                                     setPosts(userPosts)
48 |                                     setLoading(false)
49 |                                 })
50 |                             }
51 |                         })
52 |                 })
53 |             )
54 |         setLoading(false)
55 |     }, [])
56 | 
57 |     return (
58 |         <>
59 |             <div className={styles.homeLayout}>
60 |                 <div className={styles.mainLayout}>
61 |                     <StoriesBar />
62 |                     <div className={styles.posts}>
63 |                         {loading && (
64 |                             <div style={{ textAlign: 'center' }}>
65 |                                 <ClipLoader
66 |                                     css={css`
67 |                                         margin: 40px auto 0 auto;
68 |                                     `}
69 |                                 />
70 |                             </div>
71 |                         )}
72 |                         {posts.map((post, id) => {
73 |                             return <UserPost key={id} post={post} />
74 |                         })}
75 |                     </div>
76 |                 </div>
77 |                 <div className={styles.sidebar}>
78 |                     <AppSidebar />
79 |                 </div>
80 |             </div>
81 |         </>
82 |     )
83 | }
84 | 


--------------------------------------------------------------------------------
/components/HomeLayout/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .homeLayout {
 2 |     display: flex;
 3 |     flex-wrap: wrap;
 4 |     margin-left: -14px;
 5 |     margin-right: -14px;
 6 |     margin-top: 30px;
 7 |     justify-content: space-between;
 8 |     @media (max-width: 599.98px) {
 9 |         margin-top: 0;
10 |     }
11 | 
12 |     .mainLayout {
13 |         flex: 1;
14 |         max-width: 642px;
15 |         padding-left: 14px;
16 |         padding-right: 14px;
17 |         width: 100%;
18 |     }
19 | 
20 |     .sidebar {
21 |         padding-left: 14px;
22 |         padding-right: 14px;
23 |         width: 325px;
24 |     }
25 | 
26 |     @media (max-width: 999.98px) {
27 |         max-width: 600px;
28 |         margin-left: auto;
29 |         margin-right: auto;
30 |         .mainLayout {
31 |             flex: 1;
32 |             max-width: 642px;
33 |             padding: 0;
34 |         }
35 | 
36 |         .sidebar {
37 |             display: none;
38 |         }
39 |     }
40 | }
41 | 


--------------------------------------------------------------------------------
/components/InboxScreen/index.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react'
  2 | import styles from './styles.module.scss'
  3 | 
  4 | import NoMessage from '../../components/NoMessage'
  5 | import ContactList from '../../components/ContactList'
  6 | import MessageContent from '../../components/MessageContent'
  7 | import MessageHeader from '../../components/MessageHeader'
  8 | import MessageFooter from '../../components/MessageFooter'
  9 | import NewMessageModal from '../NewMessageModal'
 10 | 
 11 | import useWindowSize from '../../hooks/useWindowSize'
 12 | import NewMessage from '../../icons/NewMessage'
 13 | import firebase from '../../lib/firebase'
 14 | import { useAuth } from '../../lib/auth'
 15 | import { useRouter } from 'next/router'
 16 | 
 17 | export default function Messages() {
 18 |     const firestore = firebase.firestore()
 19 |     const router = useRouter()
 20 |     const auth = useAuth()
 21 |     const ww = useWindowSize().width
 22 |     const [activeContact, setActiveContact] = useState(null)
 23 |     const [contacts, setContacts] = useState([])
 24 |     const [showModal, setShowModal] = useState(false)
 25 |     const activeHandle = (e, id) => {
 26 |         e.preventDefault()
 27 |         setActiveContact(id)
 28 |     }
 29 |     // let messageList
 30 |     useEffect(() => {
 31 |         if (router.query.contact) {
 32 |             setActiveContact(router.query.contact)
 33 |         } else {
 34 |             router.push('/direct/inbox')
 35 |         }
 36 |         let messageList = firestore
 37 |             .collection(`users/${auth.user.id}/contacts`)
 38 |             .orderBy('time', 'desc')
 39 |             .onSnapshot((res) => {
 40 |                 let list = []
 41 |                 res.docs.forEach((lastMessage) => {
 42 |                     list.push({
 43 |                         id: lastMessage.id,
 44 |                         ...lastMessage.data(),
 45 |                     })
 46 |                 })
 47 |                 setContacts(list)
 48 |             })
 49 |         return () => {
 50 |             messageList()
 51 |         }
 52 |     }, [])
 53 | 
 54 |     // no-screen
 55 |     // no-message
 56 |     // messages
 57 |     const [contentScreen, setContentScreen] = useState('no-message')
 58 |     useEffect(() => {
 59 |         if (activeContact) {
 60 |             if (ww >= 735) {
 61 |                 setContentScreen('messages')
 62 |             } else {
 63 |                 setContentScreen('no-message')
 64 |             }
 65 |         } else {
 66 |             if (ww >= 735) {
 67 |                 setContentScreen('no-message')
 68 |             } else {
 69 |                 setContentScreen('no-screen')
 70 |             }
 71 |         }
 72 |     })
 73 | 
 74 |     useEffect(() => {
 75 |         if (activeContact) {
 76 |             router.push(`/direct/t/${activeContact}`)
 77 |         }
 78 |     }, [activeContact, contentScreen])
 79 | 
 80 |     return (
 81 |         <div className={styles.messagesPage}>
 82 |             <div className={styles.messagesWrapper}>
 83 |                 <div className={styles.messagesSidebar}>
 84 |                     <div className={styles.sidebarHeader}>
 85 |                         <div></div>
 86 |                         <div className={styles.sidebarTop}>owuzan</div>
 87 |                         <button
 88 |                             className={styles.newMessageIcon}
 89 |                             onClick={() =>
 90 |                                 setShowModal((showModal) => !showModal)
 91 |                             }
 92 |                         >
 93 |                             <NewMessage style={{ fontSize: '24' }} />
 94 |                         </button>
 95 |                     </div>
 96 |                     {/* FIXME NoMessage componentinin genişlik ayarı yapılacak */}
 97 |                     <ContactList
 98 |                         activeContact={activeContact}
 99 |                         setActiveContact={setActiveContact}
100 |                         contacts={contacts}
101 |                         setContacts={setContacts}
102 |                         activeHandle={activeHandle}
103 |                     />
104 |                 </div>
105 |                 <div className={styles.messageContent}>
106 |                     {contentScreen == 'no-message' && (
107 |                         <NoMessage setShowModal={setShowModal} />
108 |                     )}
109 |                     {contentScreen == 'messages' && (
110 |                         <>
111 |                             <MessageHeader userId={activeContact} />
112 |                             <MessageContent userId={activeContact} />
113 |                             <MessageFooter userId={activeContact} />
114 |                         </>
115 |                     )}
116 |                 </div>
117 |             </div>
118 |             {showModal && (
119 |                 <NewMessageModal
120 |                     setShowModal={setShowModal}
121 |                     setActiveContact={setActiveContact}
122 |                 />
123 |             )}
124 |         </div>
125 |     )
126 | }
127 | 


--------------------------------------------------------------------------------
/components/InboxScreen/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .messagesPage {
 2 |     height: calc(100vh - 54px);
 3 |     padding: 20px 0;
 4 |     @media (max-width: 934.98px) {
 5 |         padding: 0;
 6 |     }
 7 |     @media (max-width: 599.98px) {
 8 |         height: calc(100vh - 100px);
 9 |     }
10 | 
11 |     .messagesWrapper {
12 |         display: flex;
13 |         border: 1px solid var(--border-color);
14 |         border-radius: 3px;
15 |         height: 100%;
16 |         background-color: var(--white);
17 |         @media (max-width: 934.98px) {
18 |             border: 0;
19 |         }
20 | 
21 |         .messagesSidebar {
22 |             width: 350px;
23 |             border-right: 1px solid var(--border-color);
24 |             height: 100%;
25 |             display: flex;
26 |             flex-direction: column;
27 | 
28 |             @media (max-width: 599.98px) {
29 |                 width: 100%;
30 |             }
31 | 
32 |             .sidebarHeader {
33 |                 width: 100%;
34 |                 height: 60px;
35 |                 border-bottom: 1px solid var(--border-color);
36 |                 display: flex;
37 |                 justify-content: space-between;
38 |                 align-items: center;
39 |                 padding: 0 20px;
40 | 
41 |                 div {
42 |                     display: flex;
43 |                 }
44 | 
45 |                 .sidebarTop {
46 |                     font-weight: 500;
47 |                 }
48 | 
49 |                 .newMessageIcon {
50 |                     appearance: none;
51 |                     background: transparent;
52 |                     border: 0;
53 |                     outline: 0;
54 |                     cursor: pointer;
55 |                 }
56 |             }
57 |         }
58 | 
59 |         .messageContent {
60 |             display: flex;
61 |             flex-direction: column;
62 |             flex: 1;
63 |         }
64 |     }
65 | }
66 | 


--------------------------------------------------------------------------------
/components/Loader/index.js:
--------------------------------------------------------------------------------
 1 | import styles from './styles.module.scss'
 2 | import { ClipLoader } from 'react-spinners'
 3 | import { css } from '@emotion/core'
 4 | 
 5 | const Loader = () => {
 6 |     return (
 7 |         <div className={styles.loader}>
 8 |             <ClipLoader
 9 |                 css={css`
10 |                     margin: 40px auto 0 auto;
11 |                 `}
12 |             />
13 |         </div>
14 |     )
15 | }
16 | 
17 | export default Loader
18 | 


--------------------------------------------------------------------------------
/components/Loader/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .loader {
 2 |     position: fixed;
 3 |     z-index: 9999;
 4 |     left: 0;
 5 |     top: 0;
 6 |     right: 0;
 7 |     bottom: 0;
 8 |     background-color: var(--background-color);
 9 |     display: flex;
10 |     justify-content: center;
11 |     align-items: center;
12 | }
13 | 


--------------------------------------------------------------------------------
/components/MessageContent/index.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useCallback, useRef } from 'react'
  2 | import styles from './styles.module.scss'
  3 | import MessageSection from '../MessageSection'
  4 | import firebase from '../../lib/firebase'
  5 | import { useAuth } from '../../lib/auth'
  6 | import { getUserData } from '../../lib/db'
  7 | 
  8 | export default function MessageContent({ userId }) {
  9 |     const auth = useAuth()
 10 |     const [messageGroups, setMessageGroups] = useState([])
 11 |     const [userData, setUserData] = useState()
 12 |     const messageListBottomRef = useRef()
 13 | 
 14 |     const scrollToBottom = () => {
 15 |         messageListBottomRef?.current?.scrollIntoView({
 16 |             behavior: 'smooth',
 17 |             block: 'end',
 18 |         })
 19 |     }
 20 |     let groups = [],
 21 |         group = [],
 22 |         lastMe = null,
 23 |         getMessages = () => {}
 24 | 
 25 |     useEffect(async () => {
 26 |         const firestore = firebase.firestore()
 27 |         setUserData(await getUserData(userId))
 28 | 
 29 |         let oldMessagesQuery = await firestore
 30 |             .collection(`users/${auth.user.id}/contacts/${userId}/messages`)
 31 |             .where('time', '<', new Date())
 32 |             .limit(20)
 33 |             .orderBy('time', 'desc')
 34 |             .get()
 35 |         let oldMessages = oldMessagesQuery.docs.reverse()
 36 | 
 37 |         // userData?.id != userId && getMessages()
 38 |         getMessages = firestore
 39 |             .collection(`users/${auth.user.id}/contacts/${userId}/messages`)
 40 |             .orderBy('time', 'asc')
 41 |             .where('time', '>', new Date())
 42 |             .onSnapshot((snapshot) => {
 43 |                 // for (const doc of snapshot.docs) {
 44 |                 // snapshot.docs.forEach((doc) => {
 45 |                 // })
 46 |                 groups = []
 47 |                 let oldAndNewMessages = [...oldMessages, ...snapshot.docs]
 48 |                 oldAndNewMessages.forEach((doc, index) => {
 49 |                     const data = {
 50 |                         id: doc.id,
 51 |                         ...doc.data(),
 52 |                     }
 53 |                     if (data.me) {
 54 |                         if (lastMe || lastMe == null) {
 55 |                             group.push(data)
 56 |                             lastMe = true
 57 |                         } else {
 58 |                             groups.push(group)
 59 |                             group = []
 60 |                             group.push(data)
 61 |                             lastMe = true
 62 |                         }
 63 |                     } else {
 64 |                         if (!lastMe || lastMe == null) {
 65 |                             group.push(data)
 66 |                             lastMe = false
 67 |                         } else {
 68 |                             groups.push(group)
 69 |                             group = []
 70 |                             group.push(data)
 71 |                             lastMe = false
 72 |                         }
 73 |                     }
 74 |                 })
 75 |                 groups.push(group)
 76 |                 group = []
 77 |                 setMessageGroups(groups)
 78 |                 scrollToBottom()
 79 |             })
 80 | 
 81 |         return () => {
 82 |             userData?.id != userId && getMessages()
 83 |         }
 84 |     }, [userId])
 85 |     return (
 86 |         <div className={styles.messageContentInner}>
 87 |             <ul>
 88 |                 {messageGroups.map((messageGroup, index) => {
 89 |                     return (
 90 |                         <MessageSection
 91 |                             key={index}
 92 |                             src={userData?.img ? userData.img : '/user.jpg'}
 93 |                             list={messageGroup}
 94 |                             me={messageGroup[0]?.me && true}
 95 |                         />
 96 |                     )
 97 |                 })}
 98 |                 {scrollToBottom()}
 99 |                 <li ref={messageListBottomRef}></li>
100 |                 {/* {scrollToBottom()} */}
101 |                 {/* <MessageSection src="/suleyman.jpg" list={list1} />
102 |                 <MessageSection list={list2} me /> */}
103 |             </ul>
104 |         </div>
105 |     )
106 | }
107 | 


--------------------------------------------------------------------------------
/components/MessageContent/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .messageContentInner {
 2 |     display: flex;
 3 |     flex: 1;
 4 |     overflow-y: auto;
 5 | 
 6 |     & > ul {
 7 |         display: flex;
 8 |         flex-direction: column;
 9 |         flex: 1;
10 |         list-style: none;
11 |         margin: 0;
12 |         padding: 20px 20px 0 20px;
13 |     }
14 | }
15 | 


--------------------------------------------------------------------------------
/components/MessageFooter/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useRef, useEffect } from 'react'
 2 | import styles from './styles.module.scss'
 3 | import * as Icons from '../../icons'
 4 | import sendMessage from '../../utility/sendMessage'
 5 | import { useAuth } from '../../lib/auth'
 6 | 
 7 | export default function MessageFooter({ userId }) {
 8 |     const [input, setInput] = useState('')
 9 |     const auth = useAuth()
10 |     const inputRef = useRef(null)
11 |     const inputKeyDownHandle = (e) => {
12 |         if (e.keyCode === 13 && !e.shiftKey) {
13 |             e.preventDefault()
14 |             messageControlHandle(e)
15 |         }
16 |     }
17 |     const inputHandle = (e) => {
18 |         setInput(e.target.value)
19 |         autoResizeHandle(e)
20 |     }
21 | 
22 |     const messageControlHandle = (e) => {
23 |         let tempInput = input.trim()
24 |         if (tempInput.length > 0) {
25 |             sendMessageHandle(e)
26 |         } else {
27 |             setInput('')
28 |             e.target.setAttribute('rows', 1)
29 |         }
30 |     }
31 |     const sendMessageHandle = (e) => {
32 |         //Mesaj gönderme işlemleri
33 |         sendMessage(auth.user.id, userId, input)
34 |         setTimeout(() => {
35 |             setInput('')
36 |             e.target.setAttribute('rows', 1)
37 |         }, 0)
38 |     }
39 | 
40 |     const autoResizeHandle = (e) => {
41 |         const textarea = e.target
42 |         textarea.style.overflowY = 'hidden'
43 |         textarea.style.resize = 'none'
44 |         const rowsCount = textarea.value.split('\n').length
45 |         if (rowsCount > 5) {
46 |             textarea.setAttribute('rows', 5)
47 |             textarea.style.overflowY = 'auto'
48 |         } else {
49 |             textarea.setAttribute('rows', rowsCount)
50 |         }
51 |     }
52 | 
53 |     useEffect(() => {
54 |         inputRef.current.focus()
55 |     })
56 |     return (
57 |         <div className={styles.messageContentFooter}>
58 |             <div className={styles.messageFormWrapper}>
59 |                 <div className={styles.messageFormInner}>
60 |                     <button style={{ fontSize: '24px' }}>
61 |                         <Icons.Emoji />
62 |                     </button>
63 | 
64 |                     <textarea
65 |                         ref={inputRef}
66 |                         onKeyDown={(e) => inputKeyDownHandle(e)}
67 |                         onChange={(e) => inputHandle(e)}
68 |                         placeholder="Mesaj..."
69 |                         spellCheck="false"
70 |                         rows="1"
71 |                         value={input}
72 |                     ></textarea>
73 | 
74 |                     <button style={{ fontSize: '24px' }}>
75 |                         <Icons.Photo />
76 |                     </button>
77 |                     <button style={{ fontSize: '24px' }}>
78 |                         <Icons.Like />
79 |                     </button>
80 |                 </div>
81 |             </div>
82 |         </div>
83 |     )
84 | }
85 | 


--------------------------------------------------------------------------------
/components/MessageFooter/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .messageContentFooter {
 2 |     padding: 20px;
 3 |     background-color: var(--white);
 4 | 
 5 |     .messageFormInner {
 6 |         border: 1px solid var(--border-color);
 7 |         border-radius: 22px;
 8 |         padding: 0 8px 0 11px;
 9 |         display: flex;
10 |         align-items: center;
11 | 
12 |         button {
13 |             all: unset;
14 |             cursor: pointer;
15 |             padding: 8px;
16 |             display: flex;
17 |         }
18 | 
19 |         textarea {
20 |             flex: 1;
21 |             display: block;
22 |             font-size: 14px;
23 |             line-height: 18px;
24 |             padding: 9px;
25 |             display: flex;
26 |             align-items: center;
27 |             resize: none;
28 |             font-family: inherit;
29 |             border: 0;
30 |             outline: 0;
31 |             background-color: inherit;
32 |             color: inherit;
33 |         }
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/components/MessageHeader/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './styles.module.scss'
 3 | 
 4 | import UserUmage from '../UserImage'
 5 | import Info from '../../icons/Info'
 6 | import { getUserData } from '../../lib/db'
 7 | import Link from 'next/link'
 8 | 
 9 | export default function MessageHeader({ userId }) {
10 |     const [userData, setUserData] = React.useState('')
11 | 
12 |     React.useEffect(async () => {
13 |         setUserData(await getUserData(userId))
14 |     }, [userId])
15 | 
16 |     return (
17 |         <div className={styles.messageContentHeader}>
18 |             <div className={styles.contactInfo}>
19 |                 <Link href={`/${userData.username}`}>
20 |                     <a>
21 |                         <UserUmage src="/user.jpg" />
22 |                         <span className={styles.contactUsername}>
23 |                             {userData.username}
24 |                         </span>
25 |                     </a>
26 |                 </Link>
27 |             </div>
28 |             <button
29 |                 className={styles.userInfoButton}
30 |                 style={{ fontSize: '24px' }}
31 |             >
32 |                 <Info />
33 |             </button>
34 |         </div>
35 |     )
36 | }
37 | 


--------------------------------------------------------------------------------
/components/MessageHeader/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .messageContentHeader {
 2 |     height: 60px;
 3 |     border-bottom: 1px solid var(--border-color);
 4 |     padding: 0 20px;
 5 |     display: flex;
 6 |     align-items: center;
 7 | 
 8 |     .contactInfo {
 9 |         display: flex;
10 |         flex: 1;
11 |         align-items: center;
12 |         height: 100%;
13 |         a {
14 |             text-decoration: none;
15 |             display: inline-flex;
16 |             align-items: center;
17 |             color: var(--text-color);
18 |         }
19 | 
20 |         .contactUsername {
21 |             margin-left: 12px;
22 |             font-weight: 600;
23 |         }
24 |     }
25 | 
26 |     .userInfoButton {
27 |         all: unset;
28 |         align-self: center;
29 |         cursor: pointer;
30 |         display: flex;
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/components/MessageListItem/index.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import UserImage from '../UserImage'
 3 | import styles from './styles.module.scss'
 4 | import Link from 'next/link'
 5 | import { getUserData } from '../../lib/db'
 6 | 
 7 | export default function MessageListItem({ contact }) {
 8 |     const [user, setUser] = useState('')
 9 | 
10 |     useEffect(async () => {
11 |         const userData = await getUserData(contact.id)
12 |         setUser(userData)
13 |     }, [])
14 | 
15 |     return (
16 |         <Link href="">
17 |             <a>
18 |                 <div className={styles.messageListUserImage}>
19 |                     <UserImage size={56} status="default" src={contact.src} />
20 |                 </div>
21 |                 <div className={styles.messageListUserMeta}>
22 |                     <span>{user.username}</span>
23 |                     <p>{contact.message}</p>
24 |                 </div>
25 |             </a>
26 |         </Link>
27 |     )
28 | }
29 | 


--------------------------------------------------------------------------------
/components/MessageListItem/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .messageListUserImage {
 2 |     margin-right: 12px;
 3 | }
 4 | 
 5 | .messageListUserMeta {
 6 |     font-size: 14px;
 7 |     display: flex;
 8 |     flex: 1;
 9 |     flex-direction: column;
10 |     justify-content: center;
11 |     overflow: hidden;
12 | 
13 |     span {
14 |         color: var(--text);
15 |     }
16 |     p {
17 |         white-space: nowrap;
18 |         overflow: hidden;
19 |         text-overflow: ellipsis;
20 |         color: var(--muted-text);
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/components/MessageSection/index.js:
--------------------------------------------------------------------------------
 1 | import UserImage from '../UserImage'
 2 | import styles from './styles.module.scss'
 3 | 
 4 | export default function MessageSection({
 5 |     src = '/user.jpg',
 6 |     me = false,
 7 |     list = [],
 8 | }) {
 9 |     if (!list.length) {
10 |         return false
11 |     }
12 |     return (
13 |         <li className={me ? styles.message + ' ' + styles.me : styles.message}>
14 |             <div className={styles.messageSection}>
15 |                 <div className={styles.userImage}>
16 |                     <UserImage src={src} />
17 |                 </div>
18 |                 <div className={styles.sectionMessages}>
19 |                     {list.map((message, index) => {
20 |                         return (
21 |                             <div key={index} className={styles.message}>
22 |                                 {message.message}
23 |                             </div>
24 |                         )
25 |                     })}
26 |                 </div>
27 |             </div>
28 |         </li>
29 |     )
30 | }
31 | 


--------------------------------------------------------------------------------
/components/MessageSection/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .message {
 2 |     margin-bottom: 8px;
 3 | 
 4 |     &:last-child {
 5 |         margin-bottom: 0;
 6 |     }
 7 | 
 8 |     .messageSection {
 9 |         display: flex;
10 |         align-items: flex-end;
11 | 
12 |         .userImage {
13 |             margin-right: 8px;
14 |             font-size: 24px;
15 |             width: 1em;
16 |             height: 1em;
17 |         }
18 |     }
19 | 
20 |     .sectionMessages {
21 |         font-size: 14px;
22 |         width: 100%;
23 |         max-width: 235px;
24 |         display: flex;
25 |         flex-direction: column;
26 | 
27 |         .message {
28 |             border: 1px solid var(--border-light-color);
29 |             border-radius: 22px;
30 |             padding: 16px;
31 |             margin-bottom: 8px;
32 |             align-self: flex-start;
33 |             float: left;
34 |             max-width: 100%;
35 |             background-color: var(--other-message-background);
36 |             overflow-wrap: break-word;
37 | 
38 |             &:last-child {
39 |                 margin-bottom: 0;
40 |             }
41 |         }
42 |     }
43 | 
44 |     &.me {
45 |         .messageSection {
46 |             justify-content: flex-end;
47 | 
48 |             .sectionMessages {
49 |                 .message {
50 |                     align-self: flex-end;
51 |                     background-color: var(--border-light-color);
52 |                 }
53 |             }
54 |         }
55 |         .userImage {
56 |             display: none;
57 |         }
58 |     }
59 | }
60 | 


--------------------------------------------------------------------------------
/components/NewMessageModal/index.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react'
  2 | import styles from './styles.module.scss'
  3 | import * as Icons from '../../icons'
  4 | import UserImage from '../UserImage'
  5 | import { useAuth } from '../../lib/auth'
  6 | import firebase from '../../lib/firebase'
  7 | import { ClipLoader } from 'react-spinners'
  8 | import { css } from '@emotion/core'
  9 | 
 10 | const Modal = (props) => {
 11 |     const { setShowModal, setActiveContact } = props
 12 |     const auth = useAuth()
 13 |     const firestore = firebase.firestore()
 14 |     const [followings, setFollowings] = useState([])
 15 |     const [loading, setLoading] = useState(true)
 16 |     const [search, setSearch] = useState('')
 17 |     const [contactList, setContactList] = useState([])
 18 | 
 19 |     useEffect(async () => {
 20 |         const myFollowings = await firestore
 21 |             .collection(`users/${auth.user.id}/followings`)
 22 |             .get()
 23 |             .then((res) => {
 24 |                 let ids = []
 25 |                 res.docs.forEach((user) => ids.push(user.id))
 26 |                 return ids
 27 |             })
 28 |         myFollowings.forEach(async (user) => {
 29 |             let data = await firestore
 30 |                 .doc(`users/${user}`)
 31 |                 .get()
 32 |                 .then((res) => {
 33 |                     return res.data()
 34 |                 })
 35 |             setFollowings((users) => {
 36 |                 return [...users, { id: user, ...data }]
 37 |             })
 38 |         })
 39 |         setLoading(false)
 40 |         return () => myFollowings()
 41 |     }, [])
 42 | 
 43 |     let filteredContacts = []
 44 |     useEffect(() => {
 45 |         filteredContacts = followings.filter((user) => {
 46 |             let username = user.username.toLowerCase()
 47 |             let name = user.name.toLowerCase()
 48 |             let input = search.toLowerCase()
 49 |             return (username.includes(input) || name.includes(input)) && user
 50 |         })
 51 |         if (search.trim().length) {
 52 |             setContactList(filteredContacts)
 53 |         } else {
 54 |             setContactList(followings)
 55 |         }
 56 |     }, [search, followings])
 57 | 
 58 |     return (
 59 |         <div
 60 |             className={styles.modal}
 61 |             onClick={(e) => {
 62 |                 if (e.target == e.currentTarget) {
 63 |                     setShowModal((showModal) => !showModal)
 64 |                 }
 65 |             }}
 66 |         >
 67 |             <div className={styles.modalInner}>
 68 |                 <header>
 69 |                     <div className={styles.close}>
 70 |                         <button
 71 |                             onClick={() =>
 72 |                                 setShowModal((showModal) => !showModal)
 73 |                             }
 74 |                         >
 75 |                             <Icons.Close />
 76 |                         </button>
 77 |                     </div>
 78 |                     <div className={styles.title}>Yeni Mesaj</div>
 79 |                     <div className={styles.next}></div>
 80 |                 </header>
 81 |                 <div className={styles.search}>
 82 |                     <label htmlFor="newMessageModal__search">Kime:</label>
 83 |                     <div className={styles.inputWrapper}>
 84 |                         <input
 85 |                             type="text"
 86 |                             id="newMessageModal__search"
 87 |                             placeholder="Ara..."
 88 |                             autoComplete="off"
 89 |                             value={search}
 90 |                             onChange={(e) => setSearch(e.target.value)}
 91 |                         />
 92 |                     </div>
 93 |                 </div>
 94 |                 <div className={styles.contacts}>
 95 |                     <div className={styles.title}>Önerilenler</div>
 96 |                     <ul>
 97 |                         {loading ? (
 98 |                             <>
 99 |                                 <ClipLoader
100 |                                     css={css`
101 |                                         margin: 40px auto 0 auto;
102 |                                     `}
103 |                                 />
104 |                             </>
105 |                         ) : (
106 |                             contactList.map((user) => {
107 |                                 return (
108 |                                     <li
109 |                                         key={user.id}
110 |                                         role="button"
111 |                                         onClick={() => {
112 |                                             setActiveContact(user.id)
113 |                                             setShowModal(false)
114 |                                         }}
115 |                                     >
116 |                                         <UserImage size={44} />
117 |                                         <div className={styles.contactInfo}>
118 |                                             <div className={styles.username}>
119 |                                                 {user.username}
120 |                                             </div>
121 |                                             <div className={styles.name}>
122 |                                                 {user.name}
123 |                                             </div>
124 |                                         </div>
125 |                                     </li>
126 |                                 )
127 |                             })
128 |                         )}
129 |                     </ul>
130 |                 </div>
131 |             </div>
132 |         </div>
133 |     )
134 | }
135 | 
136 | export default Modal
137 | 


--------------------------------------------------------------------------------
/components/NewMessageModal/styles.module.scss:
--------------------------------------------------------------------------------
  1 | .modal {
  2 |     position: fixed;
  3 |     display: flex;
  4 |     justify-content: center;
  5 |     align-items: center;
  6 |     left: 0;
  7 |     top: 0;
  8 |     bottom: 0;
  9 |     right: 0;
 10 |     background-color: rgba(0, 0, 0, 0.35);
 11 |     z-index: 10;
 12 | 
 13 |     .modalInner {
 14 |         max-width: 400px;
 15 |         width: 100%;
 16 |         background-color: var(--white);
 17 |         height: 50%;
 18 |         border-radius: 12px;
 19 |         display: flex;
 20 |         flex-direction: column;
 21 |         overflow: hidden;
 22 | 
 23 |         header {
 24 |             display: flex;
 25 |             height: 40px;
 26 |             justify-content: space-between;
 27 |             align-items: center;
 28 |             border-bottom: 1px solid var(--border-color);
 29 | 
 30 |             .close {
 31 |                 height: 100%;
 32 |                 button {
 33 |                     appearance: none;
 34 |                     display: flex;
 35 |                     align-items: center;
 36 |                     justify-content: center;
 37 |                     border: 0;
 38 |                     outline: 0;
 39 |                     background: 0;
 40 |                     height: inherit;
 41 |                     width: 40px;
 42 |                     cursor: pointer;
 43 |                     font-size: 18px;
 44 |                 }
 45 |             }
 46 | 
 47 |             .title {
 48 |                 font-size: 16px;
 49 |                 font-weight: 500;
 50 |             }
 51 | 
 52 |             .next {
 53 |                 width: 40px;
 54 |             }
 55 |         }
 56 | 
 57 |         .search {
 58 |             font-size: 16px;
 59 |             height: 50px;
 60 |             display: flex;
 61 |             align-items: center;
 62 |             justify-content: flex-start;
 63 |             border-bottom: 1px solid var(--border-color);
 64 | 
 65 |             label {
 66 |                 font-weight: 500;
 67 |                 padding: 4px 12px;
 68 |             }
 69 | 
 70 |             .inputWrapper {
 71 |                 padding: 4px 12px;
 72 |                 flex: 1;
 73 | 
 74 |                 input {
 75 |                     display: block;
 76 |                     width: 100%;
 77 |                     height: 30px;
 78 |                     outline: 0;
 79 |                     border: 0;
 80 |                     font-size: 14px;
 81 |                     transform: translateY(2px);
 82 | 
 83 |                     &::placeholder {
 84 |                         color: var(--border-color);
 85 |                     }
 86 |                 }
 87 |             }
 88 |         }
 89 | 
 90 |         .contacts {
 91 |             font-size: 14px;
 92 |             flex: 1;
 93 |             align-self: stretch;
 94 |             display: flex;
 95 |             flex-direction: column;
 96 |             overflow-x: hidden;
 97 |             overflow-y: auto;
 98 | 
 99 |             .title {
100 |                 padding: 16px;
101 |                 font-weight: 500;
102 |             }
103 | 
104 |             ul {
105 |                 display: flex;
106 |                 flex-direction: column;
107 |                 flex: 1;
108 |                 margin: 0;
109 |                 padding: 0;
110 |                 list-style: none;
111 |                 align-self: stretch;
112 | 
113 |                 li {
114 |                     padding: 8px 16px;
115 |                     display: flex;
116 |                     align-items: center;
117 |                     background-color: var(--white);
118 |                     cursor: pointer;
119 | 
120 |                     &:hover {
121 |                         background-color: var(--border-light-color);
122 |                     }
123 | 
124 |                     .contactInfo {
125 |                         margin-left: 12px;
126 |                         flex: 1;
127 |                         display: flex;
128 |                         flex-direction: column;
129 | 
130 |                         .username {
131 |                             font-weight: 500;
132 |                         }
133 |                     }
134 |                 }
135 |             }
136 |         }
137 |     }
138 | }
139 | 


--------------------------------------------------------------------------------
/components/NoMessage/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './styles.module.scss'
 3 | 
 4 | import * as Icons from '../../icons'
 5 | 
 6 | export default function NoMessage({ setShowModal }) {
 7 |     return (
 8 |         <div className={styles.noMessageWrapper}>
 9 |             <div className={styles.noMessage}>
10 |                 <div className={styles.messageIcon}>
11 |                     <Icons.Message />
12 |                 </div>
13 |                 <div className={styles.pageTitle}>Mesajların</div>
14 |                 <p className={styles.pageDescription}>
15 |                     Bir arkadaşına veya gruba gizli fotoğraflar ve mesajlar
16 |                     gönder.
17 |                 </p>
18 |                 <div className={styles.noMeesageFooter}>
19 |                     <button onClick={() => setShowModal(true)}>
20 |                         Mesaj Gönder
21 |                     </button>
22 |                 </div>
23 |             </div>
24 |         </div>
25 |     )
26 | }
27 | 


--------------------------------------------------------------------------------
/components/NoMessage/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .noMessageWrapper {
 2 |     display: flex;
 3 |     flex: 1;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     padding: 20px;
 7 | 
 8 |     .noMessage {
 9 |         color: var(--text);
10 |         display: flex;
11 |         flex-direction: column;
12 | 
13 |         .messageIcon {
14 |             margin-left: auto;
15 |             margin-right: auto;
16 |             border: 3px solid var(--text);
17 |             font-size: 42px;
18 |             display: flex;
19 |             justify-content: center;
20 |             align-items: center;
21 |             width: 95px;
22 |             height: 95px;
23 |             border-radius: 50%;
24 |         }
25 |         .pageTitle {
26 |             text-align: center;
27 |             font-size: 22px;
28 |             font-weight: 400;
29 |             margin-top: 28px;
30 |         }
31 |         .pageDescription {
32 |             color: var(--muted-text);
33 |             font-size: 14px;
34 |             margin-top: 5px;
35 |             margin-bottom: 32px;
36 |             text-align: center;
37 |         }
38 | 
39 |         .noMeesageFooter {
40 |             text-align: center;
41 |             button {
42 |                 background-color: var(--blue);
43 |                 border: 0;
44 |                 outline: 0;
45 |                 padding: 5px 9px;
46 |                 border-radius: 4px;
47 |                 color: var(--button-text);
48 |                 font-weight: 600;
49 |                 font-size: 14px;
50 |                 line-height: 1.5;
51 |                 display: inline-block;
52 |                 cursor: pointer;
53 |             }
54 |         }
55 |     }
56 | }
57 | 


--------------------------------------------------------------------------------
/components/NotFoundScreen/index.js:
--------------------------------------------------------------------------------
 1 | const NotFoundScreen = () => {
 2 |     return (
 3 |         <div>
 4 |             <h2>Üzgünüz, bu sayfaya ulaşılamıyor.</h2>
 5 |             <p>
 6 |                 Tıkladığın bağlantı bozuk olabilir veya sayfa kaldırılmış
 7 |                 olabilir. Instagram'a geri dön.
 8 |             </p>
 9 | 
10 |             <style jsx>{`
11 |                 div {
12 |                     text-align: center;
13 |                     padding: 20vh 15px 0 15px;
14 |                 }
15 |                 p {
16 |                     margin-top: 1%;
17 |                 }
18 |             `}</style>
19 |         </div>
20 |     )
21 | }
22 | export default NotFoundScreen
23 | 


--------------------------------------------------------------------------------
/components/Profile/styles.module.scss:
--------------------------------------------------------------------------------
  1 | .profilePage {
  2 |     padding: 30px 0;
  3 | 
  4 |     header.profilePageHeader {
  5 |         margin-bottom: 44px;
  6 |         display: flex;
  7 |         flex-wrap: wrap;
  8 | 
  9 |         @media (max-width: 734.98px) {
 10 |             margin-bottom: 0;
 11 |         }
 12 | 
 13 |         .profileImageWrapper {
 14 |             display: flex;
 15 |             justify-content: center;
 16 |             flex-shrink: 0;
 17 |             margin-right: 30px;
 18 |             flex: 1;
 19 | 
 20 |             @media (max-width: 734.98px) {
 21 |                 flex: 0;
 22 |                 margin: 0 15px;
 23 |             }
 24 |         }
 25 | 
 26 |         .profileMetas {
 27 |             flex: 2;
 28 |             display: flex;
 29 |             flex-direction: column;
 30 | 
 31 |             @media (max-width: 734.98px) {
 32 |                 justify-content: center;
 33 |             }
 34 | 
 35 |             .userHead {
 36 |                 display: flex;
 37 |                 margin-bottom: 20px;
 38 |                 align-items: center;
 39 | 
 40 |                 button {
 41 |                     cursor: pointer;
 42 |                     display: flex;
 43 |                     background-color: transparent;
 44 |                     outline: 0;
 45 |                 }
 46 | 
 47 |                 .usernameTitle {
 48 |                     font-weight: 300;
 49 |                     font-size: 28px;
 50 |                 }
 51 |                 .profileSettingsBtn {
 52 |                     display: flex;
 53 |                     justify-content: center;
 54 |                     align-items: center;
 55 |                     color: inherit;
 56 |                     border: 0;
 57 |                     margin-left: 5px;
 58 |                     width: 40px;
 59 |                     height: 40px;
 60 |                 }
 61 |             }
 62 |         }
 63 |     }
 64 | 
 65 |     .userContents {
 66 |         .userContentTabs {
 67 |             display: flex;
 68 |             justify-content: center;
 69 |             align-items: center;
 70 |             height: 52px;
 71 |             border-top: 1px solid var(--border-color);
 72 |             margin-bottom: 2px;
 73 |             @media (max-width: 734.98px) {
 74 |                 position: sticky;
 75 |                 top: 0px;
 76 |                 z-index: 20;
 77 |                 background-color: var(--background-color);
 78 |             }
 79 |             @media (max-width: 599.98px) {
 80 |                 top: 53px;
 81 |                 background-color: var(--white);
 82 |             }
 83 | 
 84 |             button {
 85 |                 display: flex;
 86 |                 align-items: center;
 87 |                 margin-right: 60px;
 88 |                 text-decoration: none;
 89 |                 text-transform: uppercase;
 90 |                 font-weight: 600;
 91 |                 height: 100%;
 92 |                 color: var(--muted-text);
 93 |                 background-color: transparent;
 94 |                 outline: 0;
 95 |                 border: 0;
 96 |                 cursor: pointer;
 97 | 
 98 |                 @media (max-width: 734.98px) {
 99 |                     flex: 1;
100 |                     justify-content: center;
101 |                 }
102 | 
103 |                 &.activeTab {
104 |                     color: var(--text);
105 |                     position: relative;
106 | 
107 |                     &::after {
108 |                         content: "";
109 |                         position: absolute;
110 |                         height: 0.5px;
111 |                         width: 100%;
112 |                         top: -1px;
113 |                         display: block;
114 |                         z-index: 1;
115 |                         background-color: var(--black);
116 |                         @media (max-width: 734.98px) {
117 |                             top: unset;
118 |                             height: 1px;
119 |                             bottom: 0;
120 |                         }
121 |                     }
122 |                 }
123 | 
124 |                 span {
125 |                     display: flex;
126 |                     font-size: 12px;
127 | 
128 |                     &.tab {
129 |                         margin-left: 6px;
130 | 
131 |                         @media (max-width: 734.98px) {
132 |                             display: none;
133 |                         }
134 |                     }
135 | 
136 |                     &.icon {
137 |                         @media (max-width: 734.98px) {
138 |                             font-size: 24px;
139 |                         }
140 |                     }
141 |                 }
142 |                 &:last-child {
143 |                     margin-right: 0;
144 |                 }
145 |             }
146 |         }
147 |     }
148 | }
149 | 


--------------------------------------------------------------------------------
/components/ProfileFollowButton/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './styles.module.scss'
 3 | import follow from '../../utility/follow'
 4 | import unfollow from '../../utility/unfollow'
 5 | import { useRouter } from 'next/router'
 6 | 
 7 | const ProfileFollowButton = (props) => {
 8 |     const router = useRouter()
 9 |     const { auth, profileId, isUserFollowing, setIsUserFollowingHandle } = props
10 |     if (isUserFollowing) {
11 |         return (
12 |             <>
13 |                 <button
14 |                     className={styles.alreadyFollowing}
15 |                     onClick={() => {
16 |                         router.push(
17 |                             `/direct/t/${profileId}?contact=${profileId}`,
18 |                             `/direct/t/${profileId}`
19 |                         )
20 |                     }}
21 |                 >
22 |                     Mesaj Gönder
23 |                 </button>
24 |                 <button
25 |                     className={styles.unfollow}
26 |                     onClick={() => {
27 |                         unfollow(auth.user.id, profileId)
28 |                         setIsUserFollowingHandle(false)
29 |                     }}
30 |                 >
31 |                     Takipten Çık
32 |                 </button>
33 |             </>
34 |         )
35 |     } else {
36 |         return (
37 |             <button
38 |                 className={styles.followButton}
39 |                 onClick={() => {
40 |                     follow(auth.user.id, profileId)
41 |                     setIsUserFollowingHandle(true)
42 |                 }}
43 |             >
44 |                 Takip Et
45 |             </button>
46 |         )
47 |     }
48 | }
49 | 
50 | export default ProfileFollowButton
51 | 


--------------------------------------------------------------------------------
/components/ProfileFollowButton/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .followButton,
 2 | .alreadyFollowing,
 3 | .unfollow {
 4 |     padding: 0 24px;
 5 |     height: 30px;
 6 |     font-weight: 500;
 7 |     color: var(--white);
 8 |     background-color: var(--blue) !important;
 9 |     display: inline-flex;
10 |     align-self: center;
11 |     align-items: center;
12 |     border-radius: 3px;
13 |     outline: 0;
14 |     border: 0;
15 |     margin-left: 20px;
16 |     text-decoration: none;
17 | 
18 |     @media (max-width: 735px) {
19 |         margin-left: 0;
20 |         margin-top: 12px;
21 |         align-self: flex-start;
22 |     }
23 | }
24 | .alreadyFollowing {
25 |     background-color: var(--background-color) !important;
26 |     border: 1px solid var(--border-color);
27 |     color: var(--text);
28 |     padding: 0 9px;
29 | }
30 | 
31 | .unfollow {
32 |     background-color: var(--red) !important;
33 |     border: 1px solid var(--red);
34 |     color: var(--white);
35 |     padding: 0 9px;
36 | }
37 | 


--------------------------------------------------------------------------------
/components/SearchResults/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import UserImage from '../UserImage'
 3 | import styles from './styles.module.scss'
 4 | import Link from 'next/link'
 5 | 
 6 | const SearchResults = (props) => {
 7 |     const { result, setSearchInput } = props
 8 |     const clickHandle = (e) => {
 9 |         setSearchInput('')
10 |     }
11 | 
12 |     return (
13 |         <div className={styles.searchResults}>
14 |             <ul className={styles.list}>
15 |                 {result.map((user, index) => {
16 |                     return (
17 |                         <li key={index} className={styles.user}>
18 |                             <Link href={`/${user.username}`}>
19 |                                 <a onClick={clickHandle} tabIndex={index}>
20 |                                     <div className={styles.image}>
21 |                                         <UserImage size={32} />
22 |                                     </div>
23 |                                     <div className={styles.about}>
24 |                                         <div className={styles.username}>
25 |                                             {user.username}
26 |                                         </div>
27 |                                         <div className={styles.name}>
28 |                                             {user.name}
29 |                                         </div>
30 |                                     </div>
31 |                                 </a>
32 |                             </Link>
33 |                         </li>
34 |                     )
35 |                 })}
36 |             </ul>
37 |         </div>
38 |     )
39 | }
40 | 
41 | export default SearchResults
42 | 


--------------------------------------------------------------------------------
/components/SearchResults/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .searchResults {
 2 |     position: absolute;
 3 |     top: 120%;
 4 |     width: 285px;
 5 |     background-color: var(--white);
 6 |     border-radius: 3px;
 7 |     border: 1px solid var(--border-color);
 8 |     z-index: 3;
 9 |     left: 50%;
10 |     transform: translateX(-50%);
11 |     &::before {
12 |         content: "";
13 |         font-size: 1rem;
14 |         width: 1em;
15 |         height: 1em;
16 |         position: absolute;
17 |         border-top: 1px solid var(--border-color);
18 |         border-right: 1px solid var(--border-color);
19 |         top: -9px;
20 |         left: 50%;
21 |         z-index: 0;
22 |         transform: rotate(-45deg);
23 |         background: linear-gradient(to left bottom, var(--white) 50%, transparent 50%);
24 |     }
25 | }
26 | .list {
27 |     z-index: 1;
28 |     list-style: none;
29 |     margin: 0;
30 |     background-color: var(--white);
31 |     display: flex;
32 |     max-height: 360px;
33 |     flex-direction: column;
34 |     overflow: hidden;
35 |     overflow-y: auto;
36 | }
37 | .user {
38 |     border-bottom: 1px solid var(--border-color);
39 |     &:last-child {
40 |         border: 0;
41 |     }
42 | 
43 |     a {
44 |         display: flex;
45 |         padding: 10px;
46 |         text-decoration: none;
47 |         align-items: center;
48 |         outline: 0;
49 | 
50 |         &:hover,
51 |         &:focus {
52 |             background-color: var(--background-color);
53 |         }
54 |     }
55 | }
56 | .image {
57 |     margin-right: 10px;
58 |     display: flex;
59 |     align-items: center;
60 | }
61 | .about {
62 |     font-size: 14px;
63 |     display: flex;
64 |     flex-direction: column;
65 | 
66 |     .username {
67 |         font-weight: 500;
68 |     }
69 |     .name {
70 |         font-weight: 50300;
71 |     }
72 | }
73 | 


--------------------------------------------------------------------------------
/components/SignInScreen/index.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react'
  2 | import styles from './styles.module.scss'
  3 | import Link from 'next/link'
  4 | import { useAuth } from '../../lib/auth'
  5 | 
  6 | export default function SignInScreen() {
  7 |     const auth = useAuth()
  8 |     const refPassword = React.useRef()
  9 | 
 10 |     const [email, setEmail] = useState('')
 11 |     const [password, setPassword] = useState('')
 12 |     const [error, setError] = useState('')
 13 |     const handlePasswordInputType = (e) => {
 14 |         e.preventDefault()
 15 |         if (refPassword.current.type === 'password') {
 16 |             refPassword.current.type = 'text'
 17 |             e.target.innerText = 'Gizle'
 18 |         } else {
 19 |             refPassword.current.type = 'password'
 20 |             e.target.innerText = 'Göster'
 21 |         }
 22 |     }
 23 | 
 24 |     const handleSignIn = async (e) => {
 25 |         e.preventDefault()
 26 |         let isError = await auth.signIn(email, password)
 27 |         if (isError) {
 28 |             setError(isError.message)
 29 |         }
 30 |     }
 31 | 
 32 |     return (
 33 |         <div className={styles.signInPage}>
 34 |             <div className={styles.mockups}>
 35 |                 <img src="/sign-up.png" alt="" />
 36 |             </div>
 37 |             <div className={styles.signUpWrapper}>
 38 |                 <form className={styles.section}>
 39 |                     <div className={styles.brand}>
 40 |                         <Link href="/">
 41 |                             <a>
 42 |                                 <img src="/instagram.png" alt="" />
 43 |                             </a>
 44 |                         </Link>
 45 |                     </div>
 46 |                     <div className={styles.field}>
 47 |                         <input
 48 |                             type="text"
 49 |                             onChange={(e) => setEmail(e.target.value)}
 50 |                             placeholder="E-posta"
 51 |                             value={email}
 52 |                             tabIndex="1"
 53 |                             autoFocus={true}
 54 |                         />
 55 |                     </div>
 56 |                     <div className={styles.field}>
 57 |                         <input
 58 |                             type="password"
 59 |                             placeholder="Şifre"
 60 |                             ref={refPassword}
 61 |                             value={password}
 62 |                             onChange={(e) => setPassword(e.target.value)}
 63 |                             tabIndex="1"
 64 |                             className={styles.passwordInput}
 65 |                         />
 66 |                         <div
 67 |                             role="button"
 68 |                             onClick={(e) => handlePasswordInputType(e)}
 69 |                             className={styles.showOrHide}
 70 |                         >
 71 |                             Göster
 72 |                         </div>
 73 |                     </div>
 74 |                     <div className={styles.field}>
 75 |                         <button
 76 |                             onClick={(e) => handleSignIn(e)}
 77 |                             className={styles.loginBtn}
 78 |                             tabIndex="1"
 79 |                         >
 80 |                             Giriş Yap
 81 |                         </button>
 82 |                     </div>
 83 |                     <div className={styles.horizantalLine}>
 84 |                         <div className={styles.text}>ya da</div>
 85 |                         <div className={styles.line}></div>
 86 |                     </div>
 87 |                     <div className={styles.facebookLogin}>
 88 |                         <img src="/facebook-logo.png" alt="" />
 89 |                         <a href="#">Facebook ile Giriş Yap</a>
 90 |                     </div>
 91 |                     {error ? (
 92 |                         <div className={styles.errorMessage}>{error}</div>
 93 |                     ) : (
 94 |                         ''
 95 |                     )}
 96 |                     <div className={styles.forgotPassword}>
 97 |                         <a href="#">Şifreni mi unuttun?</a>
 98 |                     </div>
 99 |                 </form>
100 |                 <div className={styles.notHaveAccounts}>
101 |                     <span>
102 |                         {'Hesabın yok mu? '}
103 |                         <Link href="/accounts/emailsignup">
104 |                             <a>Kaydol</a>
105 |                         </Link>
106 |                     </span>
107 |                 </div>
108 |             </div>
109 |             <div className="container">
110 |                 <footer className={styles.signUpFooter}>
111 |                     <a href="#">Hakkında</a>
112 |                     <a href="#">Blog</a>
113 |                     <a href="#">İş Fırsatları</a>
114 |                     <a href="#">Yardım</a>
115 |                     <a href="#">API</a>
116 |                     <a href="#">Gizlilik</a>
117 |                     <a href="#">Koşullar</a>
118 |                     <a href="#">Başlıca Hesaplar</a>
119 |                     <a href="#">Konu Etiketleri</a>
120 |                     <a href="#">Konumlar</a>
121 |                     <a href="#">Güzellik</a>
122 |                     <a href="#">Dans ve Gösteri</a>
123 |                     <a href="#">Fitness</a>
124 |                     <a href="#">Yiyecek ve İçecek</a>
125 |                     <a href="#">Ev ve Bahçe</a>
126 |                     <a href="#">Müzik</a>
127 |                     <a href="#">Görsel Sanatlar</a>
128 |                     <p className={styles.footerText}>
129 |                         &copy; 2020 Instagram from Facebook
130 |                     </p>
131 |                 </footer>
132 |                 {auth?.user?.uid}
133 |             </div>
134 |         </div>
135 |     )
136 | }
137 | 


--------------------------------------------------------------------------------
/components/SignInScreen/styles.module.scss:
--------------------------------------------------------------------------------
  1 | .signInPage {
  2 |     // display: flex;
  3 |     padding-top: 45px;
  4 |     justify-content: center;
  5 |     align-items: center;
  6 | 
  7 |     @media (max-width: 735px) {
  8 |         padding-top: 30px;
  9 |     }
 10 | 
 11 |     .mockups {
 12 |         display: none;
 13 |     }
 14 | 
 15 |     .signUpWrapper {
 16 |         width: 100%;
 17 |         max-width: 350px;
 18 |         margin-left: auto;
 19 |         margin-right: auto;
 20 |         display: block;
 21 | 
 22 |         .section {
 23 |             border: 1px solid var(--border-color);
 24 |             border-radius: 3px;
 25 |             text-align: center;
 26 |             background-color: var(--white);
 27 | 
 28 |             @media (max-width: 735px) {
 29 |                 border: none;
 30 |             }
 31 | 
 32 |             .brand {
 33 |                 display: flex;
 34 |                 justify-content: center;
 35 |                 margin: 22px auto 12px;
 36 | 
 37 |                 img {
 38 |                     width: 100%;
 39 |                     height: 100%;
 40 |                     max-width: 175px;
 41 |                     max-height: 51px;
 42 |                     object-fit: contain;
 43 |                 }
 44 |             }
 45 |             .field {
 46 |                 margin: 0 40px 6px 40px;
 47 |                 position: relative;
 48 | 
 49 |                 input {
 50 |                     border: 1px solid var(--border-color);
 51 |                     padding: 9px 0 7px 8px;
 52 |                     width: 100%;
 53 |                     border-radius: 3px;
 54 |                     font-size: 12px;
 55 |                     background-color: var(--input-background);
 56 |                     outline: 0;
 57 |                 }
 58 |                 .loginBtn {
 59 |                     width: 100%;
 60 |                     padding: 5px 9px;
 61 |                     background-color: var(--blue);
 62 |                     outline: 0;
 63 |                     border: 1px solid var(--blue);
 64 |                     border-radius: 3px;
 65 |                     color: var(--white);
 66 |                     font-weight: 500;
 67 |                     cursor: pointer;
 68 |                 }
 69 | 
 70 |                 .showOrHide {
 71 |                     appearance: none;
 72 |                     background-color: transparent;
 73 |                     border: 0;
 74 |                     cursor: pointer;
 75 |                     font-weight: 500;
 76 |                     outline: 0;
 77 |                     position: absolute;
 78 |                     right: 10px;
 79 |                     top: 50%;
 80 |                     transform: translateY(-50%);
 81 |                     font-size: 13.3333px;
 82 |                 }
 83 |             }
 84 | 
 85 |             .horizantalLine {
 86 |                 text-transform: uppercase;
 87 |                 height: 30px;
 88 |                 font-size: 13px;
 89 |                 font-weight: 500;
 90 |                 color: var(--muted-text);
 91 |                 position: relative;
 92 |                 margin: 10px 40px;
 93 | 
 94 |                 .line {
 95 |                     height: 1.5px;
 96 |                     width: 100%;
 97 |                     left: 0;
 98 |                     position: absolute;
 99 |                     background-color: var(--muted-text);
100 |                     top: 50%;
101 |                     opacity: 0.3;
102 |                     transform: translateY(-50%);
103 |                     z-index: 0;
104 |                 }
105 | 
106 |                 .text {
107 |                     position: absolute;
108 |                     z-index: 1;
109 |                     background-color: white;
110 |                     left: 50%;
111 |                     top: 50%;
112 |                     padding: 0 15px;
113 |                     transform: translateY(-50%) translateX(-50%);
114 |                 }
115 |             }
116 | 
117 |             .facebookLogin {
118 |                 margin: 15px 0;
119 |                 display: flex;
120 |                 align-items: center;
121 |                 justify-content: center;
122 | 
123 |                 img {
124 |                     width: 15px;
125 |                     height: 15px;
126 |                     margin-right: 5px;
127 |                 }
128 |                 a {
129 |                     text-decoration: none;
130 |                     font-weight: 500;
131 |                     color: #385185;
132 |                     font-size: 14px;
133 |                 }
134 |             }
135 |             .forgotPassword {
136 |                 font-size: 12px;
137 |                 margin-bottom: 15px;
138 |                 a {
139 |                     text-decoration: none;
140 |                     font-size: 12px;
141 |                     color: var(--text-color);
142 |                 }
143 |             }
144 |         }
145 | 
146 |         .notHaveAccounts {
147 |             width: 100%;
148 |             max-width: 350px;
149 |             margin-left: auto;
150 |             margin-right: auto;
151 |             display: block;
152 |             border: 1px solid var(--border-color);
153 |             border-radius: 3px;
154 |             text-align: center;
155 |             background-color: var(--white);
156 |             margin-top: 10px;
157 |             padding: 20px 0;
158 |             font-size: 14px;
159 | 
160 |             @media (max-width: 735px) {
161 |                 border: none;
162 |             }
163 | 
164 |             a {
165 |                 text-decoration: none;
166 |                 color: var(--blue);
167 |                 font-weight: 500;
168 |             }
169 |         }
170 |     }
171 | 
172 |     .signUpFooter {
173 |         margin-top: 40px;
174 |         width: 80%;
175 |         margin-left: auto;
176 |         margin-right: auto;
177 |         display: flex;
178 |         flex-wrap: wrap;
179 |         justify-content: center;
180 | 
181 |         a {
182 |             color: var(--muted-text);
183 |             text-decoration: none;
184 |             font-size: 12px;
185 |             white-space: nowrap;
186 |             margin-right: 15px;
187 |             margin-bottom: 10px;
188 | 
189 |             &:last-child {
190 |                 margin-right: 0;
191 |             }
192 |         }
193 | 
194 |         .footerText {
195 |             width: 100%;
196 |             text-align: center;
197 |             font-size: 12px;
198 |             color: var(--muted-text);
199 |             margin-top: 20px;
200 |         }
201 |     }
202 | }
203 | .passwordInput {
204 |     padding-right: 50px !important;
205 | }
206 | .errorMessage {
207 |     margin: 40px 10px;
208 |     color: var(--red);
209 |     font-weight: 400;
210 |     font-size: 14px;
211 | }
212 | 


--------------------------------------------------------------------------------
/components/SignUpScreen/index.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react'
  2 | import styles from './styles.module.scss'
  3 | import Link from 'next/link'
  4 | import { signUp } from '../../lib/db'
  5 | 
  6 | export default function SignUpScreen() {
  7 |     const [email, setEmail] = useState('')
  8 |     const [fullName, setFullName] = useState('')
  9 |     const [username, setUsername] = useState('')
 10 |     const [password, setPassword] = useState('')
 11 |     const [error, setError] = useState('')
 12 | 
 13 |     const handleSubmitForm = async (e) => {
 14 |         e.preventDefault()
 15 |         signUp(email, password, username, fullName).then((res) => {
 16 |             if (res) {
 17 |                 setError(res.message)
 18 |             }
 19 |         })
 20 |     }
 21 | 
 22 |     return (
 23 |         <div className={styles.container}>
 24 |             <div className={styles.signUpPage}>
 25 |                 <div className={styles.signUpWrapper}>
 26 |                     <form onSubmit={(e) => handleSubmitForm(e)}>
 27 |                         <div className={styles.brand}>
 28 |                             <Link href="/">
 29 |                                 <a>
 30 |                                     <img src="/instagram.png" alt="" />
 31 |                                 </a>
 32 |                             </Link>
 33 |                         </div>
 34 |                         <div className={styles.description}>
 35 |                             Arkadaşlarının fotoğraf ve videolarını görmek için
 36 |                             kaydol.
 37 |                         </div>
 38 |                         <div className={styles.facebookLoginBtnWrapper}>
 39 |                             <button>Facebook ile Giriş Yap</button>
 40 |                         </div>
 41 |                         <div className={styles.horizantalLine}>
 42 |                             <div className={styles.text}>ya da</div>
 43 |                             <div className={styles.line}></div>
 44 |                         </div>
 45 |                         <div className={styles.field}>
 46 |                             <input
 47 |                                 type="text"
 48 |                                 placeholder="E-posta"
 49 |                                 value={email}
 50 |                                 onChange={(e) => setEmail(e.target.value)}
 51 |                             />
 52 |                         </div>
 53 |                         <div className={styles.field}>
 54 |                             <input
 55 |                                 type="text"
 56 |                                 placeholder="Adı Soyadı"
 57 |                                 value={fullName}
 58 |                                 required
 59 |                                 onChange={(e) => setFullName(e.target.value)}
 60 |                             />
 61 |                         </div>
 62 |                         <div className={styles.field}>
 63 |                             <input
 64 |                                 type="text"
 65 |                                 placeholder="Kullanıcı adı"
 66 |                                 value={username}
 67 |                                 required
 68 |                                 onChange={(e) => setUsername(e.target.value)}
 69 |                             />
 70 |                         </div>
 71 |                         <div className={styles.field}>
 72 |                             <input
 73 |                                 type="password"
 74 |                                 placeholder="Şifre"
 75 |                                 value={password}
 76 |                                 onChange={(e) => setPassword(e.target.value)}
 77 |                             />
 78 |                         </div>
 79 |                         <div className={styles.field}>
 80 |                             <button
 81 |                                 type="submit"
 82 |                                 className={styles.signUpBtn}
 83 |                                 onClick={(e) => handleSubmitForm(e)}
 84 |                             >
 85 |                                 Kaydol
 86 |                             </button>
 87 |                         </div>
 88 |                         {error ? (
 89 |                             <div className={styles.errorMessage}>{error}</div>
 90 |                         ) : (
 91 |                             ''
 92 |                         )}
 93 |                         <div className={styles.terms}>
 94 |                             Kaydolarak, <a href="#">Koşullar</a>'ı,{' '}
 95 |                             <a href="#">Veri İlkesi</a>'ni ve{' '}
 96 |                             <a href="#">Çerezler İlkesi</a>'ni kabul etmiş
 97 |                             olursun.
 98 |                         </div>
 99 |                     </form>
100 |                     <div className={styles.doYouHaveAnAccount}>
101 |                         <span>
102 |                             Hesabın var mı?{' '}
103 |                             <Link href="/">
104 |                                 <a>Giriş yap</a>
105 |                             </Link>
106 |                         </span>
107 |                     </div>
108 |                 </div>
109 |                 <div className={styles.container}>
110 |                     <footer className={styles.signUpFooter}>
111 |                         <a href="#">Hakkında</a>
112 |                         <a href="#">Blog</a>
113 |                         <a href="#">İş Fırsatları</a>
114 |                         <a href="#">Yardım</a>
115 |                         <a href="#">API</a>
116 |                         <a href="#">Gizlilik</a>
117 |                         <a href="#">Koşullar</a>
118 |                         <a href="#">Başlıca Hesaplar</a>
119 |                         <a href="#">Konu Etiketleri</a>
120 |                         <a href="#">Konumlar</a>
121 |                         <p className={styles.footerText}>
122 |                             &copy; 2020 Instagram from Facebook
123 |                         </p>
124 |                     </footer>
125 |                 </div>
126 |             </div>
127 |         </div>
128 |     )
129 | }
130 | 


--------------------------------------------------------------------------------
/components/SignUpScreen/styles.module.scss:
--------------------------------------------------------------------------------
  1 | .signUpPage {
  2 |     // display: flex;
  3 |     padding-top: 45px;
  4 |     justify-content: center;
  5 |     align-items: center;
  6 | 
  7 |     @media (max-width: 735px) {
  8 |         padding-top: 30px;
  9 |     }
 10 | 
 11 |     .signUpWrapper {
 12 |         width: 100%;
 13 |         max-width: 350px;
 14 |         margin-left: auto;
 15 |         margin-right: auto;
 16 |         display: block;
 17 | 
 18 |         form {
 19 |             border: 1px solid var(--border-color);
 20 |             border-radius: 3px;
 21 |             text-align: center;
 22 |             background-color: var(--white);
 23 | 
 24 |             @media (max-width: 735px) {
 25 |                 border: none;
 26 |             }
 27 | 
 28 |             .brand {
 29 |                 display: flex;
 30 |                 justify-content: center;
 31 |                 margin: 22px auto 12px;
 32 | 
 33 |                 img {
 34 |                     width: 100%;
 35 |                     height: 100%;
 36 |                     max-width: 175px;
 37 |                     max-height: 51px;
 38 |                     object-fit: contain;
 39 |                 }
 40 |             }
 41 | 
 42 |             .description {
 43 |                 margin: 15px 40px;
 44 |                 font-weight: 500;
 45 |                 color: var(--muted-text);
 46 |             }
 47 | 
 48 |             .facebookLoginBtnWrapper {
 49 |                 margin: 0 40px;
 50 |                 display: block;
 51 | 
 52 |                 button {
 53 |                     cursor: pointer;
 54 |                     width: 100%;
 55 |                     padding: 5px 9px;
 56 |                     background-color: var(--blue);
 57 |                     outline: 0;
 58 |                     border: 1px solid var(--blue);
 59 |                     border-radius: 3px;
 60 |                     color: var(--white);
 61 |                     font-weight: 500;
 62 |                 }
 63 |             }
 64 |             .field {
 65 |                 margin: 0 40px 6px 40px;
 66 |                 position: relative;
 67 | 
 68 |                 input {
 69 |                     border: 1px solid var(--border-color);
 70 |                     padding: 9px 0 7px 8px;
 71 |                     width: 100%;
 72 |                     border-radius: 3px;
 73 |                     font-size: 12px;
 74 |                     background-color: var(--input-background);
 75 |                     outline: 0;
 76 |                     line-height: 1.5;
 77 |                 }
 78 | 
 79 |                 .showOrHide {
 80 |                     appearance: none;
 81 |                     background-color: transparent;
 82 |                     border: 0;
 83 |                     cursor: pointer;
 84 |                     font-weight: 500;
 85 |                     outline: 0;
 86 |                     position: absolute;
 87 |                     right: 10px;
 88 |                     top: 50%;
 89 |                     transform: translateY(-50%);
 90 |                 }
 91 |                 .signUpBtn {
 92 |                     width: 100%;
 93 |                     padding: 5px 9px;
 94 |                     background-color: var(--blue);
 95 |                     outline: 0;
 96 |                     border: 1px solid var(--blue);
 97 |                     border-radius: 3px;
 98 |                     color: var(--white);
 99 |                     font-weight: 500;
100 |                     margin-top: 10px;
101 |                     cursor: pointer;
102 |                 }
103 |             }
104 | 
105 |             .horizantalLine {
106 |                 text-transform: uppercase;
107 |                 height: 30px;
108 |                 font-size: 13px;
109 |                 font-weight: 500;
110 |                 color: var(--muted-text);
111 |                 position: relative;
112 |                 margin: 10px 40px;
113 | 
114 |                 .line {
115 |                     height: 1.5px;
116 |                     width: 100%;
117 |                     left: 0;
118 |                     position: absolute;
119 |                     background-color: var(--muted-text);
120 |                     top: 50%;
121 |                     opacity: 0.3;
122 |                     transform: translateY(-50%);
123 |                     z-index: 0;
124 |                 }
125 | 
126 |                 .text {
127 |                     position: absolute;
128 |                     z-index: 1;
129 |                     background-color: white;
130 |                     left: 50%;
131 |                     top: 50%;
132 |                     padding: 0 15px;
133 |                     transform: translateY(-50%) translateX(-50%);
134 |                 }
135 |             }
136 | 
137 |             .terms {
138 |                 font-size: 12px;
139 |                 margin-bottom: 15px;
140 |                 margin-left: 40px;
141 |                 margin-right: 40px;
142 |                 margin-top: 20px;
143 |                 a {
144 |                     text-decoration: none;
145 |                     color: var(--text-color);
146 |                     font-weight: 500;
147 |                 }
148 |             }
149 |         }
150 | 
151 |         .doYouHaveAnAccount {
152 |             width: 100%;
153 |             max-width: 350px;
154 |             margin-left: auto;
155 |             margin-right: auto;
156 |             display: block;
157 |             border: 1px solid var(--border-color);
158 |             border-radius: 3px;
159 |             text-align: center;
160 |             background-color: var(--white);
161 |             margin-top: 10px;
162 |             padding: 20px 0;
163 |             font-size: 14px;
164 | 
165 |             @media (max-width: 735px) {
166 |                 border: none;
167 |             }
168 | 
169 |             a {
170 |                 text-decoration: none;
171 |                 color: var(--blue);
172 |             }
173 |         }
174 |     }
175 | 
176 |     .signUpFooter {
177 |         margin-top: 40px;
178 |         padding-bottom: 20px;
179 |         width: 80%;
180 |         margin-left: auto;
181 |         margin-right: auto;
182 |         display: flex;
183 |         flex-wrap: wrap;
184 |         justify-content: center;
185 | 
186 |         a {
187 |             color: var(--muted-text);
188 |             text-decoration: none;
189 |             font-size: 12px;
190 |             white-space: nowrap;
191 |             margin-right: 15px;
192 |             margin-bottom: 10px;
193 | 
194 |             &:last-child {
195 |                 margin-right: 0;
196 |             }
197 |         }
198 | 
199 |         .footerText {
200 |             width: 100%;
201 |             text-align: center;
202 |             font-size: 12px;
203 |             color: var(--muted-text);
204 |             margin-top: 20px;
205 |         }
206 |     }
207 | }
208 | .errorMessage {
209 |     margin: 40px 20px;
210 |     color: var(--red);
211 |     font-weight: 400;
212 |     font-size: 14px;
213 | }
214 | 


--------------------------------------------------------------------------------
/components/StoriesBar/index.js:
--------------------------------------------------------------------------------
 1 | import styles from './styles.module.scss'
 2 | import StoryItem from '../StoryItem'
 3 | 
 4 | export default function StoriesBar() {
 5 |     return (
 6 |         <div className={styles.storiesBar}>
 7 |             <div className={styles.storiesInner}>
 8 |                 <ul className={styles.stories}>
 9 |                     <StoryItem />
10 |                     <StoryItem username="suleyman" src="suleyman.jpg" />
11 |                     <StoryItem username="musto" src="mustafa.jpg" />
12 |                     <StoryItem username="erkanke" src="erkan.jpg" />
13 |                     <StoryItem username="tahirbaba" src="serdar.jpg" />
14 |                 </ul>
15 |             </div>
16 |         </div>
17 |     )
18 | }
19 | 


--------------------------------------------------------------------------------
/components/StoriesBar/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .storiesBar {
 2 |     background-color: var(--white);
 3 |     border: 1px solid var(--border-color);
 4 |     border-radius: 3px;
 5 |     overflow-x: auto;
 6 |     overflow-y: hidden;
 7 |     @media (max-width: 599.98px) {
 8 |         border: 0;
 9 |         border-bottom: 1px solid var(--border-color);
10 |         border-radius: 0;
11 |     }
12 | 
13 |     .storiesInner {
14 |         .stories {
15 |             padding: 16px 4px;
16 |             list-style-type: none;
17 |             display: flex;
18 |         }
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/components/StoryItem/index.js:
--------------------------------------------------------------------------------
 1 | import UserImage from '../UserImage'
 2 | import styles from './styles.module.scss'
 3 | 
 4 | export default function StoryItem({ username = "owuzan", src = "owuzan.jpg" }) {
 5 |     return (
 6 |         <li className={styles.storyItem}>
 7 |             <UserImage type="story" size={56} />
 8 |             <p>{username}</p>
 9 |         </li>
10 |     )
11 | }
12 | 


--------------------------------------------------------------------------------
/components/StoryItem/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .storyItem {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     margin-left: 14px;
 5 |     display: flex;
 6 |     color: var(--text);
 7 |     font-size: 12px;
 8 |     text-align: center;
 9 |     font-weight: 400;
10 |     cursor: pointer;
11 |     padding: 6px;
12 | 
13 |     p {
14 |         margin-top: 3px;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/components/SugessionUser/index.js:
--------------------------------------------------------------------------------
 1 | import UserImage from '../UserImage'
 2 | import styles from './styles.module.scss'
 3 | 
 4 | export default function SuggessionUser({ username = "owuzan", name = "Oğuzhan Yılmaz", src = "owuzan.jpg" }) {
 5 |     return (
 6 |         <>
 7 |             <div className={styles.suggesionUser}>
 8 |                 <UserImage type="story" src={src} size={32}  />
 9 |                 <div className={styles.userMeta}>
10 |                     <p><a href="#">{username}</a></p>
11 |                     <span>{name}</span>
12 |                 </div>
13 |             </div>
14 |             <button>Takip Et</button>
15 |         </>
16 |     )
17 | }
18 | 


--------------------------------------------------------------------------------
/components/SugessionUser/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .suggesionUser {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: flex-start;
 5 | 
 6 |     .userMeta {
 7 |         margin-left: 12px;
 8 |         width: 141px;
 9 |         display: flex;
10 |         flex-direction: column;
11 |         p {
12 |             margin: 0;
13 |             font-weight: 500;
14 |             font-size: 14px;
15 | 
16 |             a {
17 |                 text-decoration: none;
18 |                 color: inherit;
19 | 
20 |                 &:hover {
21 |                     text-decoration: underline;
22 |                 }
23 |             }
24 |         }
25 |         span {
26 |             font-weight: 400;
27 |             font-size: 12px;
28 |             color: var(--muted-text);
29 |         }
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/components/UserImage/index.js:
--------------------------------------------------------------------------------
 1 | import classNames from 'classnames'
 2 | import styles from './styles.module.scss'
 3 | 
 4 | export default function UserImage(props) {
 5 |     const src = props.src ?? '/user.jpg'
 6 |     const classes = classNames({
 7 |         [styles.userImage]: true,
 8 |         [styles.story]: props?.type === 'story' ? true : false,
 9 |         [styles.active]: props?.type === 'active' ? true : false,
10 |     })
11 |     return (
12 |         <div className={classes}>
13 |             <div className={styles.imageWrapper}>
14 |                 <img src={src} alt="" />
15 |             </div>
16 |             <style jsx>{`
17 |                 .${styles.userImage} {
18 |                     font-size: ${props?.size}px !important;
19 |                 }
20 |             `}</style>
21 |         </div>
22 |     )
23 | }
24 | 


--------------------------------------------------------------------------------
/components/UserImage/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .userImage {
 2 |     display: inline-flex;
 3 |     font-size: 24px;
 4 |     width: 1em;
 5 |     height: 1em;
 6 |     position: relative;
 7 |     cursor: pointer;
 8 | 
 9 |     .imageWrapper {
10 |         display: flex;
11 |         justify-content: center;
12 |         align-items: center;
13 |         position: absolute;
14 |         top: 0;
15 |         right: 0;
16 |         bottom: 0;
17 |         left: 0;
18 |         border-radius: 50%;
19 | 
20 |         img {
21 |             width: 100%;
22 |             height: 100%;
23 |             border-radius: 50%;
24 |             object-fit: cover;
25 |         }
26 |     }
27 | }
28 | 
29 | .story {
30 |     .imageWrapper {
31 |         border-radius: 50%;
32 |         top: -4px;
33 |         right: -4px;
34 |         bottom: -4px;
35 |         left: -4px;
36 |         background: conic-gradient(
37 |             from 180deg at 50% 50%,
38 |             #e03571 -44.74deg,
39 |             #f9793a 0.68deg,
40 |             #f79c4f 46.29deg,
41 |             #f97e34 90.31deg,
42 |             #e3455f 138.62deg,
43 |             #d72b7e 180deg,
44 |             #c12f91 227.75deg,
45 |             #db297d 269.6deg,
46 |             #e03571 315.26deg,
47 |             #f9793a 360.68deg
48 |         );
49 | 
50 |         img {
51 |             box-shadow: 0 0 0 2px var(--white);
52 |             width: 1em;
53 |             height: 1em;
54 |         }
55 |     }
56 | }
57 | 
58 | .active {
59 |     .imageWrapper {
60 |         box-shadow: 0 0 0 3px var(--black);
61 |         img {
62 |             box-shadow: 0 0 0 2px var(--white);
63 |         }
64 |     }
65 | }
66 | 


--------------------------------------------------------------------------------
/components/UserInfo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './styles.module.scss'
 3 | import linkedText from '../../utility/linkedText'
 4 | import Link from 'next/link'
 5 | 
 6 | export default function UserInfo({ userData }) {
 7 |     return (
 8 |         <div className={styles.userProfileInfo}>
 9 |             <h1 className={styles.userFullname}>{userData.name}</h1>
10 |             <div className={styles.userBiography}>
11 |                 <p>
12 |                     {linkedText(userData?.biography ? userData.biography : '')}
13 |                 </p>
14 |                 <div className="deleteThis">
15 |                     <br />
16 |                     <p>Burası test amaçlı yazılmıştır.</p>
17 |                     <p>{linkedText('Var olan @owuzan hesabına git.')}</p>
18 |                     <p>{linkedText('Var olan @ssezer hesabına git.')}</p>
19 |                     <p>
20 |                         {linkedText(
21 |                             'Var olmayan @boylebirhesapyok hesabına git.'
22 |                         )}
23 |                     </p>
24 |                     <p>
25 |                         {linkedText(
26 |                             'Route olan @direct linkine hesap olarak gitmeye çalış.'
27 |                         )}
28 |                     </p>
29 |                 </div>
30 |             </div>
31 |         </div>
32 |     )
33 | }
34 | 


--------------------------------------------------------------------------------
/components/UserInfo/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .userProfileInfo {
 2 |     @media (max-width: 734.98px) {
 3 |         margin: 15px;
 4 |     }
 5 |     .userFullname {
 6 |         font-size: 16px;
 7 |         font-weight: 600;
 8 |         margin-bottom: 5px;
 9 |     }
10 |     .userBiography {
11 |         font-size: 16px;
12 |         line-height: 1.5;
13 | 
14 |         a {
15 |             color: var(--tag-blue);
16 |             text-decoration: none;
17 |         }
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/components/UserPost/styles.module.scss:
--------------------------------------------------------------------------------
  1 | .postWrapper {
  2 |     border: 1px solid var(--border-color);
  3 |     border-radius: 3px;
  4 |     background-color: var(--white);
  5 |     margin-top: 30px;
  6 |     display: flex;
  7 |     flex-direction: column;
  8 |     @media (max-width: 599.98px) {
  9 |         margin: 0;
 10 |         margin-bottom: 10px;
 11 |         border: 0;
 12 |         background-color: var(--white);
 13 |     }
 14 | 
 15 |     svg {
 16 |         font-size: 24px;
 17 |     }
 18 | 
 19 |     &:last-child {
 20 |         margin-bottom: 0;
 21 |     }
 22 | 
 23 |     header {
 24 |         display: flex;
 25 |         justify-content: space-between;
 26 |         align-items: center;
 27 |         height: 60px;
 28 |         padding: 0 16px;
 29 |         .userInfo {
 30 |             display: flex;
 31 |             align-items: center;
 32 | 
 33 |             svg {
 34 |                 font-size: 32px;
 35 |             }
 36 | 
 37 |             .userName {
 38 |                 margin: 0;
 39 |                 margin-left: 16px;
 40 |                 color: var(--text);
 41 |                 font-size: 14px;
 42 |                 font-weight: 500;
 43 |                 text-decoration: none;
 44 | 
 45 |                 &:hover {
 46 |                     text-decoration: underline;
 47 |                 }
 48 |             }
 49 |         }
 50 |     }
 51 | 
 52 |     .postContent {
 53 |         .imageWrapper {
 54 |             position: relative;
 55 | 
 56 |             *::selection {
 57 |                 background: transparent;
 58 |             }
 59 | 
 60 |             .heart {
 61 |                 position: absolute;
 62 |                 display: flex;
 63 |                 justify-content: center;
 64 |                 align-items: center;
 65 |                 height: 100%;
 66 |                 width: 100%;
 67 |                 opacity: 0.3;
 68 |                 svg {
 69 |                     transform: scale(0);
 70 |                     font-size: 70px;
 71 |                 }
 72 | 
 73 |                 svg path {
 74 |                     fill: white;
 75 |                 }
 76 | 
 77 |                 &.heartAnimate {
 78 |                     animation: likeAnimationOnImage 1s;
 79 |                     svg {
 80 |                         transform: scale(1);
 81 |                     }
 82 |                 }
 83 |             }
 84 |             img {
 85 |                 display: block;
 86 |                 width: 100%;
 87 |                 max-height: 500px;
 88 |                 object-fit: cover;
 89 |             }
 90 |         }
 91 | 
 92 |         .actionButtons {
 93 |             padding: 4px 6px 0;
 94 |             display: flex;
 95 |             align-items: center;
 96 |             justify-content: flex-start;
 97 | 
 98 |             button {
 99 |                 appearance: none;
100 |                 background-color: transparent;
101 |                 border: 0;
102 |                 display: flex;
103 |                 justify-content: center;
104 |                 align-items: center;
105 |                 outline: 0;
106 |                 cursor: pointer;
107 |                 width: 40px;
108 |                 height: 40px;
109 |                 animation-duration: 300ms;
110 |                 color: inherit;
111 |             }
112 |         }
113 | 
114 |         .postInfo {
115 |             padding: 0 16px;
116 |             display: flex;
117 |             flex-direction: column;
118 |             font-size: 14px;
119 | 
120 |             .likeCount {
121 |                 font-weight: 500;
122 |                 padding: 1px 0;
123 |                 margin-bottom: 4px;
124 |                 &::selection {
125 |                     background: transparent;
126 |                 }
127 |             }
128 | 
129 |             .postDescription {
130 |                 margin-bottom: 4px;
131 |                 a {
132 |                     font-weight: 500;
133 |                     text-decoration: none;
134 |                     color: var(--text);
135 |                     margin-right: 5px;
136 | 
137 |                     &:hover {
138 |                         text-decoration: underline;
139 |                     }
140 |                 }
141 |                 span {
142 |                 }
143 |             }
144 | 
145 |             ul.commentsList {
146 |                 list-style: none;
147 |                 padding: 0;
148 |                 margin: 0;
149 | 
150 |                 .commentsCount,
151 |                 .postTime {
152 |                     color: var(--muted-text);
153 |                 }
154 | 
155 |                 .postTime {
156 |                     text-transform: uppercase;
157 |                     font-size: 10px;
158 |                 }
159 | 
160 |                 li {
161 |                     margin-bottom: 4px;
162 | 
163 |                     a {
164 |                         color: var(--tag-blue);
165 |                         text-decoration: none;
166 |                     }
167 |                     span {
168 |                         margin-right: 5px;
169 | 
170 |                         a {
171 |                             font-weight: 500;
172 |                             color: var(--text);
173 |                             text-decoration: none;
174 |                         }
175 |                     }
176 |                 }
177 |             }
178 |         }
179 |     }
180 | 
181 |     .commentForm {
182 |         padding-top: 5px;
183 | 
184 |         .formWrapper {
185 |             border-top: 1px solid var(--border-light-color);
186 |             padding: 0 16px;
187 |             margin-top: 4px;
188 | 
189 |             form {
190 |                 display: flex;
191 |                 align-items: center;
192 |                 height: 56px;
193 |             }
194 | 
195 |             input {
196 |                 all: unset;
197 |                 flex: 1;
198 |                 height: 100%;
199 |                 display: block;
200 |                 font-size: 14px;
201 | 
202 |                 &::placeholder {
203 |                     color: var(--muted-text);
204 |                 }
205 |             }
206 | 
207 |             button {
208 |                 all: unset;
209 |                 height: 100%;
210 |                 display: block;
211 |                 color: var(--blue);
212 |                 font-weight: 500;
213 |                 cursor: pointer;
214 | 
215 |                 &:disabled {
216 |                     cursor: auto;
217 |                     opacity: 0.5;
218 |                 }
219 |             }
220 |         }
221 |     }
222 | }
223 | .fillRed {
224 |     animation-name: likeAnimation;
225 | }
226 | .fillRed svg path {
227 |     fill: var(--red);
228 |     transition: 300ms fill;
229 | }
230 | @keyframes likeAnimation {
231 |     0% {
232 |         transform: scale(1);
233 |     }
234 |     50% {
235 |         transform: scale(1.2);
236 |     }
237 |     100% {
238 |         transform: scale(1);
239 |     }
240 | }
241 | @keyframes likeAnimationOnImage {
242 |     0% {
243 |         opacity: 1;
244 |         transform: scale(0.5);
245 |     }
246 |     25% {
247 |         opacity: 1;
248 |         transform: scale(1.1);
249 |     }
250 |     50% {
251 |         opacity: 1;
252 |         transform: scale(1);
253 |     }
254 |     75% {
255 |         opacity: 1;
256 |         transform: scale(1);
257 |     }
258 |     100% {
259 |         opacity: 0;
260 |         transform: scale(0.5);
261 |     }
262 | }
263 | 


--------------------------------------------------------------------------------
/components/UserPosts/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './styles.module.scss'
 3 | import Link from 'next/link'
 4 | import { getUserPosts, getUserIdFromUsername } from '../../lib/db'
 5 | import { useRouter } from 'next/router'
 6 | import usePostsFormat from '../../hooks/usePostsFormat'
 7 | 
 8 | const UserPosts = () => {
 9 |     const router = useRouter()
10 |     const { username } = router.query
11 |     const [postsList, setPostsList] = React.useState([])
12 | 
13 |     React.useEffect(async () => {
14 |         const getPosts = (username) => {
15 |             return new Promise(async (resolve, reject) => {
16 |                 const id = await getUserIdFromUsername(username).then(
17 |                     (res) => res
18 |                 )
19 |                 const userPosts = await getUserPosts(id)
20 |                 resolve(userPosts)
21 |             })
22 |         }
23 |         const list = await getPosts(username).then((res) => res)
24 | 
25 |         setPostsList(usePostsFormat(list))
26 |     }, [username])
27 | 
28 |     return (
29 |         <div className={styles.userPosts}>
30 |             {postsList.map((row, index) => {
31 |                 return (
32 |                     <div className={styles.userPostsRow} key={index}>
33 |                         {row.map((column, index) => {
34 |                             return (
35 |                                 <div
36 |                                     className={styles.userPostWrapper}
37 |                                     key={index}
38 |                                 >
39 |                                     <div className={styles.userPostColumn}>
40 |                                         {Object.entries(column).length ? (
41 |                                             <Link href={`/${username}`}>
42 |                                                 <a>
43 |                                                     <div
44 |                                                         className={
45 |                                                             styles.userPost
46 |                                                         }
47 |                                                     >
48 |                                                         <img
49 |                                                             src={column.image}
50 |                                                             alt=""
51 |                                                         />
52 |                                                     </div>
53 |                                                 </a>
54 |                                             </Link>
55 |                                         ) : (
56 |                                             ''
57 |                                         )}
58 |                                     </div>
59 |                                 </div>
60 |                             )
61 |                         })}
62 |                     </div>
63 |                 )
64 |             })}
65 |         </div>
66 |     )
67 | }
68 | export default UserPosts
69 | 


--------------------------------------------------------------------------------
/components/UserPosts/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .userPosts {
 2 |     --gap: 28px;
 3 |     display: flex;
 4 |     flex-direction: column;
 5 |     align-items: stretch;
 6 |     z-index: 10;
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     
10 |     img {
11 |         object-fit: cover;
12 |         width: 100%;
13 |         height: 100%;
14 |     }
15 | 
16 |     @media (max-width: 734.98px) {
17 |         --gap: 2px;
18 |     }
19 | 
20 |     .userPostsRow {
21 |         display: flex;
22 |         margin-bottom: var(--gap);
23 | 
24 |         .userPostWrapper {
25 |             width: 100%;
26 |             margin-right: var(--gap);
27 | 
28 |             &:last-child {
29 |                 margin-right: 0;
30 |             }
31 |         }
32 | 
33 |         .userPostColumn {
34 |             position: relative;
35 |             width: 100%;
36 |             padding-bottom: 100%;
37 |             overflow: hidden;
38 | 
39 |             a {
40 |                 position: absolute;
41 |                 top: 0;
42 |                 left: 0;
43 |                 bottom: 0;
44 |                 right: 0;
45 |             }
46 | 
47 |             .userPost {
48 |                 height: 100%;
49 |             }
50 |         }
51 |     }
52 | }
53 | 


--------------------------------------------------------------------------------
/components/UserStatistics/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './styles.module.scss'
 3 | 
 4 | export default function UserStatistics(props) {
 5 |     const { postsCount, followersCount, followingsCount } = props.statistics
 6 |     return (
 7 |         <ul className={styles.userStatistics}>
 8 |             <li>
 9 |                 <span className={styles.count}>{postsCount}</span>
10 |                 <span>gönderi</span>
11 |             </li>
12 |             <li>
13 |                 <span className={styles.count}>{followersCount}</span>
14 |                 <span>takipçi</span>
15 |             </li>
16 |             <li>
17 |                 <span className={styles.count}>{followingsCount}</span>
18 |                 <span>takip</span>
19 |             </li>
20 |         </ul>
21 |     )
22 | }
23 | 


--------------------------------------------------------------------------------
/components/UserStatistics/styles.module.scss:
--------------------------------------------------------------------------------
 1 | .userStatistics {
 2 |     margin-bottom: 20px;
 3 |     list-style: none;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     flex-wrap: nowrap;
 7 | 
 8 |     @media (max-width: 734.98px) {
 9 |         margin: 0;
10 |         justify-content: space-between;
11 |         max-width: 400px;
12 |         margin: 0 40px 0 0px;
13 |     }
14 | 
15 |     li {
16 |         margin-right: 40px;
17 |         display: flex;
18 | 
19 |         @media (max-width: 734.98px) {
20 |             flex-direction: column;
21 |             align-items: center;
22 |             margin-right: 0;
23 |         }
24 | 
25 |         &:last-child {
26 |             margin-right: 0;
27 |         }
28 | 
29 |         span {
30 |             @media (max-width: 734.98px) {
31 |                 text-transform: capitalize;
32 |                 font-size: 14px;
33 |             }
34 | 
35 |             &.count {
36 |                 font-weight: 500;
37 |                 margin-right: 5px;
38 |                 font-size: 16px;
39 | 
40 |                 @media (max-width: 734.98px) {
41 |                     margin-right: 0;
42 |                 }
43 |             }
44 |         }
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/hooks/usePostsFormat.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const usePostsFormat = (list) => {
 4 |     let rows = [],
 5 |         columns = []
 6 |     list.map((post, index) => {
 7 |         index++
 8 |         if (index % 3 == 0) {
 9 |             columns.push(post)
10 |             rows.push(columns)
11 |             columns = []
12 |         } else {
13 |             columns.push(post)
14 |         }
15 |     })
16 |     const remaining = list.length % 3
17 |     if (remaining) {
18 |         let add = 3 - remaining
19 |         for (let index = 0; index < add; index++) {
20 |             columns.push({})
21 |         }
22 |         rows.push(columns)
23 |     }
24 | 
25 |     return rows
26 | }
27 | 
28 | export default usePostsFormat
29 | 


--------------------------------------------------------------------------------
/hooks/useWindowSize.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | 
 3 | export default function useWindowSize() {
 4 |     const [windowSize, setWindowSize] = useState({
 5 |         width: undefined,
 6 |         height: undefined,
 7 |     });
 8 |     useEffect(() => {
 9 |         const handleResize = () => {
10 |             setWindowSize({
11 |                 width: window.innerWidth,
12 |                 height: window.innerHeight,
13 |             });
14 |         }
15 |         window.addEventListener("resize", handleResize);
16 |         handleResize();
17 |         return () => window.removeEventListener("resize", handleResize);
18 |     }, []);
19 |     return windowSize;
20 | }
21 | 
22 | 
23 | 
24 | 
25 | 
26 | 


--------------------------------------------------------------------------------
/icons/AddPost.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgAddPost(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M15.9 24H8.1c-3.3 0-4.8-.8-6.05-2C.8 20.7 0 19.2 0 15.9V8.1c0-3.3.8-4.8 2-6.05C3.3.8 4.8 0 8.1 0h7.8c3.3 0 4.8.8 6.05 2C23.2 3.3 24 4.8 24 8.1v7.8c0 3.3-.8 4.8-2 6.05C20.7 23.2 19.2 24 15.9 24zM8.1 1.5c-3.1 0-4.2.8-5.05 1.6-.75.8-1.55 1.9-1.55 5v7.8c0 3.1.8 4.2 1.6 5.05.8.8 1.9 1.55 5 1.55h7.8c3.1 0 4.2-.8 5.05-1.6.8-.8 1.55-1.9 1.55-5V8.1c0-3.1-.8-4.2-1.6-5.05-.8-.75-1.9-1.55-5-1.55H8.1z"
15 |                 fill="currentColor"
16 |             />
17 |             <path
18 |                 d="M18.15 12.75H5.85c-.4 0-.75-.35-.75-.75s.35-.75.75-.75h12.3c.4 0 .75.35.75.75s-.35.75-.75.75z"
19 |                 fill="currentColor"
20 |             />
21 |             <path
22 |                 d="M12 18.9c-.4 0-.75-.35-.75-.75V5.85c0-.4.35-.75.75-.75s.75.35.75.75v12.3c0 .4-.35.75-.75.75z"
23 |                 fill="currentColor"
24 |             />
25 |         </svg>
26 |     )
27 | }
28 | 
29 | export default SvgAddPost
30 | 


--------------------------------------------------------------------------------
/icons/Back.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgBack(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M20 16.75c-.2 0-.4-.05-.55-.2L12 9.05l-7.45 7.5c-.3.3-.75.3-1.05 0-.3-.3-.3-.75 0-1.05l8-8c.3-.3.75-.3 1.05 0l8 8c.3.3.3.75 0 1.05-.15.15-.35.2-.55.2z"
15 |                 fill="currentColor"
16 |             />
17 |         </svg>
18 |     )
19 | }
20 | 
21 | export default SvgBack
22 | 


--------------------------------------------------------------------------------
/icons/Bookmark.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgBookmark(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#Bookmark_svg__clip0)">
14 |                 <path
15 |                     d="M21.75 24c-.2 0-.4-.1-.55-.2L12 14.5l-9.2 9.3c-.2.2-.55.3-.8.15-.3-.1-.5-.4-.5-.7V.75c0-.4.35-.75.75-.75h19.5c.4 0 .75.35.75.75v22.5c0 .3-.2.6-.45.7-.1.05-.2.05-.3.05zM12 13c.4 0 .8.15 1.1.45l7.9 8V1.5H3v19.95l7.9-8c.3-.3.7-.45 1.1-.45z"
16 |                     fill="currentColor"
17 |                 />
18 |             </g>
19 |             <defs>
20 |                 <clipPath id="Bookmark_svg__clip0">
21 |                     <path fill="#fff" d="M0 0h24v24H0z" />
22 |                 </clipPath>
23 |             </defs>
24 |         </svg>
25 |     )
26 | }
27 | 
28 | export default SvgBookmark
29 | 


--------------------------------------------------------------------------------
/icons/BookmarkFill.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgBookmarkFill(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#BookmarkFill_svg__clip0)">
14 |                 <path
15 |                     d="M21.75 24c-.2 0-.4-.1-.55-.2L12 14.45 2.8 23.8c-.2.2-.55.3-.8.15-.3-.1-.5-.4-.5-.7V.75c0-.4.35-.75.75-.75h19.5c.4 0 .75.35.75.75v22.5c0 .3-.2.6-.45.7-.1.05-.2.05-.3.05z"
16 |                     fill="currentColor"
17 |                 />
18 |             </g>
19 |             <defs>
20 |                 <clipPath id="BookmarkFill_svg__clip0">
21 |                     <path fill="#fff" d="M0 0h24v24H0z" />
22 |                 </clipPath>
23 |             </defs>
24 |         </svg>
25 |     )
26 | }
27 | 
28 | export default SvgBookmarkFill
29 | 


--------------------------------------------------------------------------------
/icons/Camera.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgCamera(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 fillRule="evenodd"
15 |                 clipRule="evenodd"
16 |                 d="M19.25 23H4.75c-2.5 0-4.5-2-4.5-4.5v-10c0-2.5 2-4.5 4.5-4.5h.55c.55 0 1.1-.3 1.35-.85l.25-.5C7.4 1.65 8.45 1 9.6 1h4.8c1.15 0 2.2.65 2.7 1.65l.25.5c.25.5.75.85 1.35.85h.55c2.5 0 4.5 2 4.5 4.5v10c0 2.5-2 4.5-4.5 4.5zm3-14.5c0-1.65-1.35-3-3-3h-.55c-1.15 0-2.2-.65-2.7-1.65l-.25-.5c-.25-.55-.8-.85-1.35-.85H9.6c-.55 0-1.1.3-1.35.85l-.25.5c-.5 1-1.55 1.65-2.7 1.65h-.55c-1.65 0-3 1.35-3 3v10c0 1.65 1.35 3 3 3h14.5c1.65 0 3-1.35 3-3v-10zM12 19a5.72 5.72 0 01-5.75-5.75c0-3.2 2.55-5.75 5.75-5.75s5.75 2.55 5.75 5.75S15.2 19 12 19zm0-10c-2.35 0-4.25 1.9-4.25 4.25S9.65 17.5 12 17.5s4.25-1.9 4.25-4.25S14.35 9 12 9z"
17 |                 fill="currentColor"
18 |             />
19 |         </svg>
20 |     )
21 | }
22 | 
23 | export default SvgCamera
24 | 


--------------------------------------------------------------------------------
/icons/Close.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgClose(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 18 18"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 fillRule="evenodd"
15 |                 clipRule="evenodd"
16 |                 d="M15.675 3.675L10.312 9l5.325 5.325a.544.544 0 010 .788l-.524.524a.544.544 0 01-.788 0L9 10.313l-5.325 5.363a.544.544 0 01-.787 0l-.526-.525a.544.544 0 010-.787L7.688 9 2.325 3.675a.544.544 0 010-.787l.525-.526a.544.544 0 01.788 0L9 7.688l5.363-5.362a.544.544 0 01.787 0l.525.525c.225.225.225.6 0 .825z"
17 |                 fill="currentColor"
18 |             />
19 |         </svg>
20 |     )
21 | }
22 | 
23 | export default SvgClose
24 | 


--------------------------------------------------------------------------------
/icons/Comment.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgComment(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 fillRule="evenodd"
15 |                 clipRule="evenodd"
16 |                 d="M23.75 23.05l-1.4-5.5c.9-1.65 1.4-3.55 1.4-5.55C23.75 5.5 18.5.25 12 .25S.25 5.5.25 12 5.5 23.75 12 23.75c2 0 3.9-.5 5.55-1.4l5.5 1.4c.4.1.8-.3.7-.7zM22.25 12c0 2-.5 3.5-1.3 5-.1.2-.15.45-.1.7l1.05 4.2-4.15-1.05c-.25-.05-.5-.05-.7.1-.9.5-2.6 1.3-5 1.3-5.7 0-10.3-4.6-10.3-10.25S6.35 1.75 12 1.75 22.25 6.35 22.25 12z"
17 |                 fill="currentColor"
18 |             />
19 |         </svg>
20 |     )
21 | }
22 | 
23 | export default SvgComment
24 | 


--------------------------------------------------------------------------------
/icons/Emoji.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgEmoji(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12zm0-22.5C6.2 1.5 1.5 6.2 1.5 12S6.2 22.5 12 22.5 22.5 17.8 22.5 12 17.8 1.5 12 1.5z"
15 |                 fill="currentColor"
16 |             />
17 |             <path
18 |                 d="M17.45 12c0-.7-.55-1.25-1.25-1.25s-1.25.55-1.25 1.25.55 1.25 1.25 1.25 1.25-.55 1.25-1.25zm-10.9 0c0-.7.55-1.25 1.25-1.25s1.25.55 1.25 1.25-.55 1.25-1.25 1.25S6.55 12.7 6.55 12zM12 18.65c-2.6 0-4-1.75-4.1-1.85-.25-.3-.2-.8.1-1.05.3-.25.8-.2 1.05.1.05.05 1.05 1.25 2.9 1.25 1.85 0 2.9-1.25 2.9-1.25.25-.3.75-.35 1.05-.1.3.25.35.75.1 1.05 0 .1-1.4 1.85-4 1.85z"
19 |                 fill="currentColor"
20 |             />
21 |         </svg>
22 |     )
23 | }
24 | 
25 | export default SvgEmoji
26 | 


--------------------------------------------------------------------------------
/icons/Explore.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgExplore(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 22 22"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 fillRule="evenodd"
15 |                 clipRule="evenodd"
16 |                 d="M11 0C4.95 0 0 4.95 0 11s4.95 11 11 11 11-4.95 11-11S17.05 0 11 0zm0 20.625A9.624 9.624 0 011.375 11 9.624 9.624 0 0111 1.375 9.624 9.624 0 0120.625 11 9.624 9.624 0 0111 20.625zm4.675-15.217L8.892 8.617a.554.554 0 00-.321.32l-3.208 6.784c-.138.275-.092.596.137.779.138.137.32.183.504.183.092 0 .184 0 .275-.046l6.784-3.208a.554.554 0 00.32-.32l3.209-6.784c.137-.275.091-.596-.138-.78-.183-.228-.504-.274-.779-.137zm-3.392 6.875l-2.52-2.52 4.812-2.292-2.292 4.812z"
17 |                 fill="currentColor"
18 |             />
19 |         </svg>
20 |     )
21 | }
22 | 
23 | export default SvgExplore
24 | 


--------------------------------------------------------------------------------
/icons/ExploreFill.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgExploreFill(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 22 22"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 fillRule="evenodd"
15 |                 clipRule="evenodd"
16 |                 d="M11 0C4.95 0 0 4.95 0 11s4.95 11 11 11 11-4.95 11-11S17.05 0 11 0zm5.592 6.325l-3.209 6.783a.554.554 0 01-.32.321l-6.784 3.208c-.091.046-.183.046-.275.046-.183 0-.366-.091-.504-.183a.69.69 0 01-.138-.78l3.209-6.783a.554.554 0 01.32-.32l6.784-3.209c.275-.137.596-.091.78.138.228.183.274.504.137.779zM9.717 9.717l-2.292 4.812 4.813-2.291-2.521-2.521z"
17 |                 fill="currentColor"
18 |             />
19 |         </svg>
20 |     )
21 | }
22 | 
23 | export default SvgExploreFill
24 | 


--------------------------------------------------------------------------------
/icons/Home.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgHome(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 22 22"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#Home_svg__clip0)">
14 |                 <path
15 |                     d="M20.762 22H13.75a.705.705 0 01-.688-.688v-5.637a2.074 2.074 0 00-2.108-2.108 2.074 2.074 0 00-2.108 2.108v5.637c0 .367-.321.688-.688.688H1.146a.705.705 0 01-.688-.688v-10.77c0-.184.092-.367.184-.505L10.496.184a.665.665 0 01.962 0l9.854 9.854c.184.184.275.505.138.734 0 .046-.046.046-.046.091v10.45c.046.367-.275.688-.642.688zm-6.325-1.375h5.638v-9.9L11 1.65l-9.167 9.167v9.808h5.638v-4.95c0-1.97 1.512-3.483 3.483-3.483s3.483 1.512 3.483 3.483v4.95z"
16 |                     fill="currentColor"
17 |                 />
18 |             </g>
19 |             <defs>
20 |                 <clipPath id="Home_svg__clip0">
21 |                     <path fill="#fff" d="M0 0h22v22H0z" />
22 |                 </clipPath>
23 |             </defs>
24 |         </svg>
25 |     )
26 | }
27 | 
28 | export default SvgHome
29 | 


--------------------------------------------------------------------------------
/icons/HomeFill.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgHomeFill(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 22 22"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#HomeFill_svg__clip0)">
14 |                 <path
15 |                     d="M20.854 22h-7.058a.705.705 0 01-.688-.688v-5.637A2.103 2.103 0 0011 13.567a2.133 2.133 0 00-2.108 2.108v5.637c0 .367-.321.688-.688.688H1.146a.705.705 0 01-.688-.688v-10.77c0-.184.092-.367.184-.505L10.496.184c.275-.275.733-.275.962 0l9.854 9.854c.138.138.184.321.184.505v10.77c.046.367-.275.688-.642.688z"
16 |                     fill="currentColor"
17 |                 />
18 |             </g>
19 |             <defs>
20 |                 <clipPath id="HomeFill_svg__clip0">
21 |                     <path fill="#fff" d="M0 0h22v22H0z" />
22 |                 </clipPath>
23 |             </defs>
24 |         </svg>
25 |     )
26 | }
27 | 
28 | export default SvgHomeFill
29 | 


--------------------------------------------------------------------------------
/icons/Info.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgInfo(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12zm0-22.5C6.2 1.5 1.5 6.2 1.5 12S6.2 22.5 12 22.5 22.5 17.8 22.5 12 17.8 1.5 12 1.5z"
15 |                 fill="currentColor"
16 |             />
17 |             <path
18 |                 d="M12 8.7a1.3 1.3 0 100-2.6 1.3 1.3 0 000 2.6zM13.55 17.85h-3.1c-.4 0-.75-.35-.75-.75s.35-.75.75-.75h3.1c.4 0 .75.35.75.75s-.35.75-.75.75z"
19 |                 fill="currentColor"
20 |             />
21 |             <path
22 |                 d="M12 17.85c-.4 0-.75-.35-.75-.75v-5.35h-.8c-.4 0-.75-.35-.75-.75s.35-.75.75-.75H12c.4 0 .75.35.75.75v6.1c0 .4-.35.75-.75.75z"
23 |                 fill="currentColor"
24 |             />
25 |         </svg>
26 |     )
27 | }
28 | 
29 | export default SvgInfo
30 | 


--------------------------------------------------------------------------------
/icons/Like.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgLike(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 22 22"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#Like_svg__clip0)">
14 |                 <path
15 |                     d="M15.858 2.796c2.613 0 4.767 2.383 4.767 5.27 0 3.117-2.704 5.042-5.27 7.334-2.568 2.292-3.897 3.53-4.355 3.804-.504-.32-2.154-1.833-4.354-3.804-2.613-2.292-5.271-4.217-5.271-7.333 0-2.888 2.154-5.271 4.767-5.271 1.925 0 2.979.917 3.712 1.97.871 1.192 1.009 1.788 1.146 1.788s.275-.596 1.146-1.787c.733-1.055 1.787-1.971 3.712-1.971zm0-1.375c-2.062 0-3.62.825-4.858 2.566-1.238-1.695-2.796-2.52-4.858-2.52C2.75 1.42 0 4.4 0 8.067c0 3.345 2.475 5.5 4.858 7.562.275.23.596.504.871.78l1.054.916c2.017 1.788 3.025 2.704 3.484 2.98.229.137.504.228.733.228.275 0 .504-.091.733-.229.459-.275 1.284-1.008 3.575-3.116l.917-.825c.32-.276.596-.55.917-.78C19.57 13.567 22 11.458 22 8.067 22 4.4 19.25 1.42 15.858 1.42z"
16 |                     fill="currentColor"
17 |                 />
18 |             </g>
19 |             <defs>
20 |                 <clipPath id="Like_svg__clip0">
21 |                     <path fill="#fff" d="M0 0h22v22H0z" />
22 |                 </clipPath>
23 |             </defs>
24 |         </svg>
25 |     )
26 | }
27 | 
28 | export default SvgLike
29 | 


--------------------------------------------------------------------------------
/icons/LikeFill.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgLikeFill(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 22 22"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M15.858 1.42c-2.062 0-3.62.826-4.858 2.567-1.238-1.695-2.796-2.52-4.858-2.52C2.75 1.42 0 4.4 0 8.067c0 3.345 2.475 5.5 4.858 7.562.275.23.596.504.871.78l1.054.916c2.017 1.788 3.025 2.704 3.484 2.98.229.137.504.228.733.228.23 0 .504-.091.733-.229.459-.275 1.284-1.008 3.575-3.116l.917-.825c.32-.276.596-.55.917-.78C19.57 13.567 22 11.458 22 8.067 22 4.4 19.25 1.42 15.858 1.42z"
15 |                 fill="currentColor"
16 |             />
17 |         </svg>
18 |     )
19 | }
20 | 
21 | export default SvgLikeFill
22 | 


--------------------------------------------------------------------------------
/icons/Loader.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgLoader(props) {
 4 |     return (
 5 |         <svg
 6 |             xmlns="http://www.w3.org/2000/svg"
 7 |             width="1em"
 8 |             height="1em"
 9 |             viewBox="0 0 128 128"
10 |             {...props}
11 |         >
12 |             <rect width="100%" height="100%" fill="none" />
13 |             <g>
14 |                 <path d="M59.6 0h8v40h-8V0z" />
15 |                 <path
16 |                     d="M92.19 6.374l6.928 4-20 34.641-6.929-4 20-34.64zM117.226 28.19l4 6.928-34.641 20-4-6.929 34.64-20zM128 59.6v8H88v-8h40zM121.626 92.19l-4 6.928-34.641-20 4-6.929 34.64 20z"
17 |                     fill="#ccc"
18 |                     fillOpacity={0.2}
19 |                 />
20 |                 <path
21 |                     d="M99.81 117.226l-6.928 4-20-34.641 6.929-4 20 34.64z"
22 |                     fill="#b2b2b2"
23 |                     fillOpacity={0.3}
24 |                 />
25 |                 <path d="M68.4 128h-8V88h8v40z" fill="#999" fillOpacity={0.4} />
26 |                 <path
27 |                     d="M35.81 121.626l-6.928-4 20-34.641 6.929 4-20 34.64z"
28 |                     fill="#7f7f7f"
29 |                     fillOpacity={0.5}
30 |                 />
31 |                 <path
32 |                     d="M10.774 99.81l-4-6.928 34.641-20 4 6.929-34.64 20z"
33 |                     fill="#666"
34 |                     fillOpacity={0.6}
35 |                 />
36 |                 <path d="M0 68.4v-8h40v8H0z" fill="#4c4c4c" fillOpacity={0.7} />
37 |                 <path
38 |                     d="M6.374 35.81l4-6.928 34.641 20-4 6.929-34.64-20z"
39 |                     fill="#333"
40 |                     fillOpacity={0.8}
41 |                 />
42 |                 <path
43 |                     d="M28.19 10.774l6.928-4 20 34.641-6.929 4-20-34.64z"
44 |                     fill="#191919"
45 |                     fillOpacity={0.9}
46 |                 />
47 |                 <animateTransform
48 |                     attributeName="transform"
49 |                     type="rotate"
50 |                     values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64"
51 |                     calcMode="discrete"
52 |                     dur="1080ms"
53 |                     repeatCount="indefinite"
54 |                 />
55 |             </g>
56 |         </svg>
57 |     )
58 | }
59 | 
60 | export default SvgLoader
61 | 


--------------------------------------------------------------------------------
/icons/Message.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgMessage(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 22 22"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#Message_svg__clip0)">
14 |                 <path
15 |                     d="M21.908 1.742c-.137-.23-.366-.367-.596-.367H.688c-.275.046-.55.23-.641.458-.092.23-.046.55.137.78l7.288 7.15L9.99 20.12c.046.275.276.458.55.504h.092c.23 0 .459-.137.596-.32L21.863 2.428c.183-.183.183-.458.045-.687zM2.383 2.796h16.271L8.25 8.57 2.383 2.796zm8.571 15.4L8.937 9.762l10.496-5.82-8.479 14.254z"
16 |                     fill="currentColor"
17 |                 />
18 |             </g>
19 |             <defs>
20 |                 <clipPath id="Message_svg__clip0">
21 |                     <path fill="#fff" d="M0 0h22v22H0z" />
22 |                 </clipPath>
23 |             </defs>
24 |         </svg>
25 |     )
26 | }
27 | 
28 | export default SvgMessage
29 | 


--------------------------------------------------------------------------------
/icons/MessageFill.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgMessageFill(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 22 22"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#MessageFill_svg__clip0)">
14 |                 <path
15 |                     d="M21.908 1.742c-.137-.23-.366-.367-.596-.367H.688c-.275.046-.55.23-.641.458-.092.23-.046.55.137.78l6.05 5.958c.23.183.505.275.78.137l7.608-3.666c.32-.138.733-.046.916.229.184.32.092.733-.229.917l-7.15 4.537c-.229.138-.366.458-.32.733l2.108 8.709c.046.275.275.458.55.504h.091c.23 0 .459-.138.596-.321L21.817 2.475c.229-.23.229-.504.091-.733z"
16 |                     fill="currentColor"
17 |                 />
18 |             </g>
19 |             <defs>
20 |                 <clipPath id="MessageFill_svg__clip0">
21 |                     <path fill="#fff" d="M0 0h22v22H0z" />
22 |                 </clipPath>
23 |             </defs>
24 |         </svg>
25 |     )
26 | }
27 | 
28 | export default SvgMessageFill
29 | 


--------------------------------------------------------------------------------
/icons/NewMessage.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgNewMessage(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#NewMessage_svg__clip0)" fill="currentColor">
14 |                 <path d="M18.382 24.065H4.636A4.586 4.586 0 010 19.43V5.684a4.587 4.587 0 014.636-4.637h7.91a.818.818 0 010 1.637h-7.91a2.973 2.973 0 00-3 3v13.745a2.972 2.972 0 003 3h13.746a2.974 2.974 0 003-3V11.52a.818.818 0 011.636 0v7.91a4.586 4.586 0 01-4.636 4.635z" />
15 |                 <path d="M9.545 18.993H5.891a.818.818 0 01-.818-.818V14.52c0-.217.086-.425.24-.578L18.6.687a2.427 2.427 0 013.393 0l1.363 1.364a2.427 2.427 0 010 3.393L10.102 18.753a.818.818 0 01-.557.24zM6.71 17.356h2.498l13.015-13.09a.79.79 0 000-1.091L20.858 1.81a.791.791 0 00-1.09 0L6.675 14.825l.033 2.531z" />
16 |                 <path d="M20.836 7.647a.824.824 0 01-.6-.24L16.658 3.83a.818.818 0 011.156-1.156l3.6 3.6a.812.812 0 010 1.156.824.824 0 01-.578.218z" />
17 |             </g>
18 |             <defs>
19 |                 <clipPath id="NewMessage_svg__clip0">
20 |                     <path fill="#fff" d="M0 0h24v24H0z" />
21 |                 </clipPath>
22 |             </defs>
23 |         </svg>
24 |     )
25 | }
26 | 
27 | export default SvgNewMessage
28 | 


--------------------------------------------------------------------------------
/icons/Options.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgOptions(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 fillRule="evenodd"
15 |                 clipRule="evenodd"
16 |                 d="M23.35 10.3l-1.05-.55c-.2-.1-.35-.25-.4-.5-.25-.8-.55-1.6-.95-2.35-.1-.2-.15-.4-.05-.6l.4-1.15c.1-.25 0-.55-.2-.75l-1.45-1.45c-.2-.2-.5-.25-.75-.2l-1.15.4c-.2.05-.4.05-.6-.05-.7-.4-1.5-.75-2.3-.95-.2-.05-.4-.2-.5-.4L13.8.65c-.15-.25-.4-.4-.65-.4H11.1c-.3 0-.55.15-.65.4l-.55 1.1c-.1.2-.25.35-.5.4-.8.25-1.6.55-2.3.95-.2.1-.4.15-.6.05l-1.15-.4c-.25-.1-.55 0-.75.2L2.95 4.4c-.2.2-.25.5-.2.75l.4 1.15c.05.2.05.4-.05.6-.4.75-.75 1.5-.95 2.35-.05.2-.2.4-.4.5L.7 10.3c-.25.15-.4.4-.4.65V13c0 .3.15.55.4.65l1.05.55c.2.1.35.25.4.5.25.8.55 1.6.95 2.35.1.2.15.4.05.6l-.4 1.15c-.1.25 0 .55.2.75L4.4 21c.2.2.5.25.75.2l1.15-.4c.2-.05.4-.05.6.05.7.4 1.5.75 2.3.95.2.05.4.2.5.4l.55 1.1c.15.25.4.4.65.4h2.05c.3 0 .55-.15.65-.4l.55-1.1c.1-.2.25-.35.5-.4.8-.25 1.6-.55 2.3-.95.2-.1.4-.15.6-.05l1.15.4c.25.1.55 0 .75-.2l1.45-1.45c.2-.2.25-.5.2-.75l-.4-1.15c-.05-.2-.05-.4.05-.6.4-.75.75-1.5.95-2.35.05-.2.2-.4.4-.5l1.05-.55c.25-.15.4-.4.4-.65v-2.05c.2-.25.05-.55-.2-.65zM12 20.75c-4.85 0-8.75-3.9-8.75-8.75S7.15 3.25 12 3.25s8.75 3.9 8.75 8.75-3.9 8.75-8.75 8.75z"
17 |                 fill="currentColor"
18 |             />
19 |         </svg>
20 |     )
21 | }
22 | 
23 | export default SvgOptions
24 | 


--------------------------------------------------------------------------------
/icons/Photo.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgPhoto(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M19.25 0H4.75C2.15 0 0 2.15 0 4.75v14.5C0 21.85 2.15 24 4.75 24h14.5c2.6 0 4.75-2.15 4.75-4.75V4.75C24 2.15 21.85 0 19.25 0zm3.25 19.25c0 1.8-1.45 3.25-3.25 3.25H4.75c-1.65 0-3-1.25-3.2-2.8l4.15-4.15c.05-.05.15-.1.2-.1.05 0 .1 0 .2.1l3.15 3.15c.7.7 1.8.7 2.5 0l6.2-6.2c.1-.1.3-.1.4 0l4.15 4.15v2.6zm0-4.7l-3.1-3.1c-.65-.65-1.85-.65-2.5 0l-6.25 6.2a.38.38 0 01-.2.1c-.05 0-.1 0-.2-.1L7.1 14.5c-.65-.65-1.85-.65-2.5 0l-3.1 3.1V4.75c0-1.8 1.45-3.25 3.25-3.25h14.5c1.8 0 3.25 1.45 3.25 3.25v9.8zM5.9 4.1c-.95 0-1.75.8-1.75 1.75S4.95 7.6 5.9 7.6s1.75-.8 1.75-1.75S6.85 4.1 5.9 4.1z"
15 |                 fill="currentColor"
16 |             />
17 |         </svg>
18 |     )
19 | }
20 | 
21 | export default SvgPhoto
22 | 


--------------------------------------------------------------------------------
/icons/Posts.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgPosts(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 fillRule="evenodd"
15 |                 clipRule="evenodd"
16 |                 d="M22.5.75h-21c-.4 0-.75.35-.75.75v21c0 .4.35.75.75.75h21c.4 0 .75-.35.75-.75v-21c0-.4-.35-.75-.75-.75zM2.25 2.25h5.5v5.5h-5.5v-5.5zm0 7h5.5v5.5h-5.5v-5.5zm5.5 12.5h-5.5v-5.5h5.5v5.5zm7 0h-5.5v-5.5h5.5v5.5zm0-7h-5.5v-5.5h5.5v5.5zm0-7h-5.5v-5.5h5.5v5.5zm7 14h-5.5v-5.5h5.5v5.5zm0-7h-5.5v-5.5h5.5v5.5zm0-7h-5.5v-5.5h5.5v5.5z"
17 |                 fill="currentColor"
18 |             />
19 |         </svg>
20 |     )
21 | }
22 | 
23 | export default SvgPosts
24 | 


--------------------------------------------------------------------------------
/icons/Preferences.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgPreferences(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M6.5 14a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM11.833 14a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM17.167 14a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
15 |                 fill="currentColor"
16 |             />
17 |         </svg>
18 |     )
19 | }
20 | 
21 | export default SvgPreferences
22 | 


--------------------------------------------------------------------------------
/icons/Search.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgSearch(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <g clipPath="url(#Search_svg__clip0)" fill="currentColor">
14 |                 <path d="M10 20C4.5 20 0 15.5 0 10S4.5 0 10 0s10 4.5 10 10-4.5 10-10 10zm0-18.5c-4.7 0-8.5 3.8-8.5 8.5s3.8 8.5 8.5 8.5 8.5-3.8 8.5-8.5-3.8-8.5-8.5-8.5z" />
15 |                 <path d="M23.3 24.05c-.2 0-.4-.05-.55-.2L16 17.1c-.3-.3-.3-.75 0-1.05.3-.3.75-.3 1.05 0l6.75 6.75c.3.3.3.75 0 1.05-.1.15-.3.2-.5.2z" />
16 |             </g>
17 |             <defs>
18 |                 <clipPath id="Search_svg__clip0">
19 |                     <path fill="#fff" d="M0 0h24v24H0z" />
20 |                 </clipPath>
21 |             </defs>
22 |         </svg>
23 |     )
24 | }
25 | 
26 | export default SvgSearch
27 | 


--------------------------------------------------------------------------------
/icons/Tagged.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgTagged(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M20.75 2.75H15.2c-.25 0-.5-.1-.7-.3l-2-2c-.3-.3-.75-.3-1.05 0l-2 2c-.2.2-.45.3-.7.3h-5.5c-1.65 0-3 1.35-3 3v15c0 1.65 1.35 3 3 3h17.5c1.65 0 3-1.35 3-3v-15c0-1.65-1.35-3-3-3zm-14.7 19.5c-.3 0-.55-.3-.5-.6.35-1.6 1.75-2.8 3.4-2.8h6c1.7 0 3.1 1.2 3.4 2.8.05.3-.2.6-.5.6H6.05zm16.2-1.5c0 .85-.65 1.5-1.5 1.5h-.3c-.25 0-.45-.2-.5-.45-.3-2.5-2.4-4.45-4.95-4.45H9c-2.55 0-4.7 1.95-4.95 4.45-.05.25-.25.45-.5.45h-.3c-.85 0-1.5-.65-1.5-1.5v-15c0-.85.65-1.5 1.5-1.5H8.8c.65 0 1.3-.25 1.75-.75L12 2.05l1.45 1.45c.45.45 1.1.75 1.75.75h5.55c.85 0 1.5.65 1.5 1.5v15zM12 6.25a4.801 4.801 0 000 9.6 4.801 4.801 0 000-9.6zm0 8.05c-1.8 0-3.3-1.45-3.3-3.3 0-1.8 1.45-3.3 3.3-3.3 1.85 0 3.3 1.45 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3z"
15 |                 fill="currentColor"
16 |             />
17 |         </svg>
18 |     )
19 | }
20 | 
21 | export default SvgTagged
22 | 


--------------------------------------------------------------------------------
/icons/User.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | function SvgUser(props) {
 4 |     return (
 5 |         <svg
 6 |             width="1em"
 7 |             height="1em"
 8 |             viewBox="0 0 24 24"
 9 |             fill="none"
10 |             xmlns="http://www.w3.org/2000/svg"
11 |             {...props}
12 |         >
13 |             <path
14 |                 d="M12 0C5.4 0 0 5.325 0 12c0 3.6 1.575 6.825 4.125 9l.225.225C6.375 22.95 9.075 24 12 24c2.925 0 5.625-1.05 7.65-2.775l.225-.225C22.425 18.75 24 15.6 24 12c0-6.675-5.4-12-12-12zm0 21.75c-2.1 0-3.975-.675-5.625-1.8.375-.675.675-.975 1.05-1.35.525-.375 1.125-.6 1.8-.6h5.4c.675 0 1.275.225 1.8.6.375.3.675.6 1.05 1.35-1.5 1.125-3.375 1.8-5.475 1.8zm7.275-3.3c-.375-.675-.825-1.125-1.425-1.575a5.298 5.298 0 00-3.15-1.05H9.3c-1.125 0-2.25.375-3.15 1.05-.6.45-1.05.9-1.425 1.575C3.15 16.725 2.25 14.475 2.25 12c0-5.4 4.35-9.75 9.75-9.75S21.75 6.6 21.75 12c0 2.475-.9 4.725-2.475 6.45zM12 4.275a5.218 5.218 0 00-5.25 5.25 5.218 5.218 0 005.25 5.25 5.218 5.218 0 005.25-5.25A5.218 5.218 0 0012 4.275zm0 8.25c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"
15 |                 fill="currentColor"
16 |             />
17 |         </svg>
18 |     )
19 | }
20 | 
21 | export default SvgUser
22 | 


--------------------------------------------------------------------------------
/icons/index.js:
--------------------------------------------------------------------------------
 1 | export { default as AddPost } from './AddPost'
 2 | export { default as Back } from './Back'
 3 | export { default as Bookmark } from './Bookmark'
 4 | export { default as BookmarkFill } from './BookmarkFill'
 5 | export { default as Camera } from './Camera'
 6 | export { default as Close } from './Close'
 7 | export { default as Comment } from './Comment'
 8 | export { default as Emoji } from './Emoji'
 9 | export { default as Explore } from './Explore'
10 | export { default as ExploreFill } from './ExploreFill'
11 | export { default as Home } from './Home'
12 | export { default as HomeFill } from './HomeFill'
13 | export { default as Info } from './Info'
14 | export { default as Like } from './Like'
15 | export { default as LikeFill } from './LikeFill'
16 | export { default as Loader } from './Loader'
17 | export { default as Message } from './Message'
18 | export { default as MessageFill } from './MessageFill'
19 | export { default as NewMessage } from './NewMessage'
20 | export { default as Options } from './Options'
21 | export { default as Photo } from './Photo'
22 | export { default as Posts } from './Posts'
23 | export { default as Preferences } from './Preferences'
24 | export { default as Search } from './Search'
25 | export { default as Tagged } from './Tagged'
26 | export { default as User } from './User'


--------------------------------------------------------------------------------
/lib/auth.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useContext, createContext } from 'react'
 2 | import Router from 'next/router'
 3 | import cookie from 'js-cookie'
 4 | import firebase from './firebase'
 5 | const authContext = createContext()
 6 | export function AuthProvider({ children }) {
 7 |     const auth = useProvideAuth()
 8 |     return <authContext.Provider value={auth}>{children}</authContext.Provider>
 9 | }
10 | export const useAuth = () => {
11 |     return useContext(authContext)
12 | }
13 | function useProvideAuth() {
14 |     const [user, setUser] = useState(null)
15 |     const [loading, setLoading] = useState(true)
16 |     const handleUser = async (rawUser) => {
17 |         if (rawUser) {
18 |             const user = await formatUser(rawUser)
19 |             const { token, ...userWithoutToken } = user
20 |             setUser(user)
21 |             cookie.set('instagram-clone-auth', true, {
22 |                 expires: 1,
23 |             })
24 |             setLoading(false)
25 |             return user
26 |         } else {
27 |             setUser(false)
28 |             cookie.remove('instagram-clone-auth')
29 |             setLoading(false)
30 |             return false
31 |         }
32 |     }
33 |     const signIn = (email, password) => {
34 |         setLoading(true)
35 |         return firebase
36 |             .auth()
37 |             .signInWithEmailAndPassword(email, password)
38 |             .then((response) => {
39 |                 handleUser(response.user)
40 |                 Router.push('/')
41 |             })
42 |             .catch((error) => {
43 |                 setLoading(false)
44 |                 return error
45 |             })
46 |     }
47 |     const signout = () => {
48 |         Router.push('/')
49 |         return firebase
50 |             .auth()
51 |             .signOut()
52 |             .then(() => handleUser(false))
53 |     }
54 |     useEffect(() => {
55 |         const unsubscribe = firebase.auth().onIdTokenChanged(handleUser)
56 |         return () => unsubscribe()
57 |     }, [])
58 |     return {
59 |         user,
60 |         loading,
61 |         signIn,
62 |         signout,
63 |     }
64 | }
65 | const formatUser = async (user) => {
66 |     return {
67 |         id: user.uid,
68 |         email: user.email,
69 |         token: user.xa,
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/lib/db.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import firebase from './firebase'
  3 | import { useAuth } from './auth'
  4 | const app = firebase.app()
  5 | const firestore = firebase.firestore()
  6 | const storageRef = firebase.storage().ref()
  7 | 
  8 | /* -------------------------------------------------------------------------- */
  9 | /*                              Control Functions                             */
 10 | /* -------------------------------------------------------------------------- */
 11 | 
 12 | export const usernameExist = async (username) => {
 13 |     const query = firestore
 14 |         .collection('users')
 15 |         .where('username', '==', username)
 16 | 
 17 |     return await query.get().then((users) => {
 18 |         return users.docs.length ? true : false
 19 |     })
 20 | }
 21 | 
 22 | export const searchUser = async (searchText) => {
 23 |     const query = firestore.collection('users')
 24 | 
 25 |     return await query.get().then((users) => {
 26 |         let result = []
 27 |         users.docs.forEach((user) => {
 28 |             const data = user.data()
 29 |             if (
 30 |                 searchText.length > 0 &&
 31 |                 (data.username
 32 |                     .toLowerCase()
 33 |                     .includes(searchText.toLowerCase()) ||
 34 |                     data.name.toLowerCase().includes(searchText.toLowerCase()))
 35 |             ) {
 36 |                 result.push(data)
 37 |             }
 38 |         })
 39 |         return result
 40 |     })
 41 | }
 42 | 
 43 | /* -------------------------------------------------------------------------- */
 44 | /*                              Insert Functions                              */
 45 | /* -------------------------------------------------------------------------- */
 46 | 
 47 | export const signUp = async (email, password, username, name) => {
 48 |     const isExistUsername = await usernameExist(username.trim())
 49 |     if (!isExistUsername) {
 50 |         return firebase
 51 |             .auth()
 52 |             .createUserWithEmailAndPassword(email, password)
 53 |             .then((res) => {
 54 |                 const user = res.user
 55 |                 const id = user.uid
 56 |                 return firestore.collection('users').doc(id).set({
 57 |                     username,
 58 |                     email,
 59 |                     name,
 60 |                     createdAt: new Date(),
 61 |                 })
 62 |             })
 63 |             .catch((error) => {
 64 |                 return error
 65 |             })
 66 |     } else {
 67 |         return {
 68 |             message:
 69 |                 'Bu kullanıcı adı alınamıyor. Lütfen başka bir kullanıcı adı dene.',
 70 |         }
 71 |     }
 72 | 
 73 |     // return firestore
 74 |     //     .collection('users')
 75 |     //     .doc(uid)
 76 |     //     .set({ uid, ...data }, { merge: true })
 77 | }
 78 | 
 79 | /* -------------------------------------------------------------------------- */
 80 | /*                              Select Functions                              */
 81 | /* -------------------------------------------------------------------------- */
 82 | 
 83 | export const getUserData = async (id) => {
 84 |     if (!id) {
 85 |         return false
 86 |     }
 87 |     const userData = await firestore
 88 |         .collection('users')
 89 |         .doc(id)
 90 |         .get()
 91 |         .then((user) => {
 92 |             return {
 93 |                 id,
 94 |                 ...user.data(),
 95 |             }
 96 |         })
 97 |         .catch((error) => {
 98 |             console.log(error.message)
 99 |         })
100 |     return userData
101 | }
102 | 
103 | export const getUserIdFromUsername = (username) => {
104 |     return new Promise(async (resolve, reject) => {
105 |         if (!username) {
106 |             reject(false)
107 |         }
108 |         const userData = await firestore
109 |             .collection('users')
110 |             .where('username', '==', username)
111 |             .get()
112 |         if (userData.docs.length) {
113 |             resolve(userData.docs[0].id)
114 |         }
115 |         reject(false)
116 |     })
117 | }
118 | 
119 | /* -------------------------------------------------------------------------- */
120 | /*                              Storage Functions                             */
121 | /* -------------------------------------------------------------------------- */
122 | 
123 | export const uploadPost = (id, post) => {
124 |     storageRef
125 |         .child(`posts/${id}/${Date.now()}/${post.file.name}`)
126 |         .put(post.file)
127 |         .then(async (snapshot) => {
128 |             const downloadURL = await snapshot.ref.getDownloadURL()
129 |             const filePath = snapshot.ref.fullPath
130 |             firestore.collection(`users/${id}/posts`).doc().set({
131 |                 caption: post.caption,
132 |                 image: downloadURL,
133 |                 imageRef: filePath,
134 |                 time: post.time,
135 |             })
136 |             return true
137 |         })
138 | }
139 | 
140 | export const getUserPosts = async (id) => {
141 |     const query = firestore
142 |         .collection(`users/${id}/posts`)
143 |         .orderBy('time', 'desc')
144 |         .get()
145 |     const posts = await query
146 | 
147 |     if (!posts.docs.length) {
148 |         return []
149 |     }
150 | 
151 |     let userPosts = []
152 |     for (const post of posts.docs) {
153 |         const postData = post.data()
154 |         userPosts.push({
155 |             ...postData,
156 |             id: post.id,
157 |         })
158 |     }
159 |     return userPosts
160 | }
161 | 
162 | // export function createSite(data) {
163 | //     const site = firestore.collection('sites').doc()
164 | //     site.set(data)
165 | 
166 | //     return site
167 | // }
168 | 
169 | // export async function deleteSite(id) {
170 | //     firestore.collection('sites').doc(id).delete()
171 | //     const snapshot = await firestore
172 | //         .collection('feedback')
173 | //         .where('siteId', '==', id)
174 | //         .get()
175 | 
176 | //     const batch = firestore.batch()
177 | 
178 | //     snapshot.forEach((doc) => {
179 | //         batch.delete(doc.ref)
180 | //     })
181 | 
182 | //     return batch.commit()
183 | // }
184 | 
185 | // export async function updateSite(id, newValues) {
186 | //     return firestore.collection('sites').doc(id).update(newValues)
187 | // }
188 | 
189 | // export function createFeedback(data) {
190 | //     return firestore.collection('feedback').add(data)
191 | // }
192 | 
193 | // export function deleteFeedback(id) {
194 | //     return firestore.collection('feedback').doc(id).delete()
195 | // }
196 | 
197 | // export function updateFeedback(id, newValues) {
198 | //     return firestore.collection('feedback').doc(id).update(newValues)
199 | // }
200 | 
201 | // export async function createCheckoutSession(uid) {
202 | //     const checkoutSessionRef = await firestore
203 | //         .collection('users')
204 | //         .doc(uid)
205 | //         .collection('checkout_sessions')
206 | //         .add({
207 | //             price: process.env.NEXT_PUBLIC_PRICE_ID,
208 | //             allow_promotion_codes: true,
209 | //             success_url: window.location.origin,
210 | //             cancel_url: window.location.origin,
211 | //         })
212 | 
213 | //     checkoutSessionRef.onSnapshot(async (snap) => {
214 | //         const { sessionId } = snap.data()
215 | 
216 | //         if (sessionId) {
217 | //             const stripe = await getStripe()
218 | 
219 | //             stripe.redirectToCheckout({ sessionId })
220 | //         }
221 | //     })
222 | // }
223 | 


--------------------------------------------------------------------------------
/lib/firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase'
 2 | import 'firebase/auth'
 3 | import 'firebase/functions'
 4 | import 'firebase/firestore'
 5 | import 'firebase/storage'
 6 | 
 7 | if (!firebase.apps.length) {
 8 |     firebase.initializeApp({
 9 |         apiKey: process.env.FIREBASE_API_KEY,
10 |         authDomain: process.env.FIREBASE_AUTH_DOMAIN,
11 |         databaseURL: process.env.FIREBASE_DATABASE_URL,
12 |         projectId: process.env.FIREBASE_PROJECT_ID,
13 |         storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
14 |         messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
15 |         appId: process.env.FIREBASE_APP_ID,
16 |     })
17 | }
18 | 
19 | export default firebase
20 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     env: {
 3 |         FIREBASE_API_KEY: 'AIzaSyD7pqsPi5LLq121Y5e4FbkI5RkPFW03bH4',
 4 |         FIREBASE_AUTH_DOMAIN: 'instagram-clone-45093.firebaseapp.com',
 5 |         FIREBASE_DATABASE_URL:
 6 |             'https://instagram-clone-45093-default-rtdb.firebaseio.com',
 7 |         FIREBASE_PROJECT_ID: 'instagram-clone-45093',
 8 |         FIREBASE_STORAGE_BUCKET: 'instagram-clone-45093.appspot.com',
 9 |         FIREBASE_MESSAGING_SENDER_ID: '820550670430',
10 |         FIREBASE_APP_ID: '1:820550670430:web:8aa8ca9925e5ca405bbccf',
11 |     },
12 | }
13 | 


--------------------------------------------------------------------------------
/next.config.template.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     env: {
 3 |         FIREBASE_API_KEY: 'FIREBASE_API_KEY',
 4 |         FIREBASE_AUTH_DOMAIN: 'FIREBASE_AUTH_DOMAIN',
 5 |         FIREBASE_DATABASE_URL: 'FIREBASE_DATABASE_URL',
 6 |         FIREBASE_PROJECT_ID: 'FIREBASE_PROJECT_ID',
 7 |         FIREBASE_STORAGE_BUCKET: 'FIREBASE_STORAGE_BUCKET',
 8 |         FIREBASE_MESSAGING_SENDER_ID: 'FIREBASE_MESSAGING_SENDER_ID',
 9 |         FIREBASE_APP_ID: 'FIREBASE_APP_ID',
10 |     },
11 | }
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-instragram-clone-test",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "svgtocomponent": "npx @svgr/cli -d icons svgs --icon --replace-attr-values #262626=currentColor"
10 |   },
11 |   "dependencies": {
12 |     "classnames": "^2.2.6",
13 |     "firebase": "^8.2.1",
14 |     "js-cookie": "^2.2.1",
15 |     "next": "10.0.4",
16 |     "react": "17.0.1",
17 |     "react-dom": "17.0.1",
18 |     "react-spinners": "^0.10.4",
19 |     "react-timeago": "^5.2.0"
20 |   },
21 |   "devDependencies": {
22 |     "sass": "^1.32.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/pages/404.js:
--------------------------------------------------------------------------------
1 | import NotFoundScreen from '../components/NotFoundScreen'
2 | 
3 | export default function NotFoundPage() {
4 |     return <NotFoundScreen />
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/[username]/[[...index]].js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Profile from '../../components/Profile'
 3 | import NotFoundScreen from '../../components/NotFoundScreen'
 4 | import { useAuth } from '../../lib/auth'
 5 | import { useRouter } from 'next/router'
 6 | import Loader from '../../components/Loader'
 7 | import { usernameExist } from '../../lib/db'
 8 | 
 9 | const ProfilePage = () => {
10 |     const router = useRouter()
11 |     const { user, loading } = useAuth()
12 |     const [isUserExist, setIsUserExist] = React.useState(false)
13 | 
14 |     const [userExistLoad, setUserExistLoad] = React.useState(true)
15 | 
16 |     React.useEffect(async () => {
17 |         if (typeof router.query.username != 'undefined') {
18 |             const query = await usernameExist(router.query.username)
19 |             query ? setIsUserExist(true) : setIsUserExist(false)
20 |             setUserExistLoad(false)
21 |         }
22 |     }, [router.query.username])
23 | 
24 |     if (loading || userExistLoad) {
25 |         return <Loader />
26 |     } else {
27 |         if (!isUserExist || !user) {
28 |             return <NotFoundScreen></NotFoundScreen>
29 |         } else {
30 |             return <Profile />
31 |         }
32 |     }
33 | }
34 | export default ProfilePage
35 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.scss'
 2 | import AppHeader from '../components/AppHeader'
 3 | import Head from 'next/head'
 4 | import Container from '../components/Container'
 5 | import { AuthProvider } from '../lib/auth'
 6 | export default function Instagram({ Component, pageProps }) {
 7 |     return (
 8 |         <AuthProvider>
 9 |             <AppHeader />
10 |             <Head>
11 |                 <meta
12 |                     name="viewport"
13 |                     content="width=device-width, initial-scale=1.0, user-scalable=no"
14 |                 />
15 |                 <title>Instagram Clone App</title>
16 |             </Head>
17 |             <Container>
18 |                 <Component {...pageProps} />
19 |             </Container>
20 |         </AuthProvider>
21 |     )
22 | }
23 | 


--------------------------------------------------------------------------------
/pages/accounts/emailsignup.js:
--------------------------------------------------------------------------------
 1 | import SignUpScreen from '../../components/SignUpScreen'
 2 | import { useAuth } from '../../lib/auth'
 3 | import Router from 'next/router'
 4 | 
 5 | export default function SignUp() {
 6 |     const { user } = useAuth()
 7 |     if (user) {
 8 |         Router.push('/')
 9 |     }
10 |     return <SignUpScreen />
11 | }
12 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default (req, res) => {
4 |   res.statusCode = 200
5 |   res.json({ name: 'John Doe' })
6 | }
7 | 


--------------------------------------------------------------------------------
/pages/direct/[[...index]].js:
--------------------------------------------------------------------------------
 1 | import InboxScreen from '../../components/InboxScreen'
 2 | import Loader from '../../components/Loader'
 3 | import { useAuth } from '../../lib/auth'
 4 | import { useRouter } from 'next/router'
 5 | 
 6 | export default function direct() {
 7 |     const router = useRouter()
 8 |     const { user, loading } = useAuth()
 9 | 
10 |     if (loading) {
11 |         return <Loader />
12 |     } else {
13 |         if (!user) {
14 |             router.push('/')
15 |             return <></>
16 |         } else {
17 |             return <InboxScreen />
18 |         }
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import HomeLayout from '../components/HomeLayout'
 2 | import SignInScreen from '../components/SignInScreen'
 3 | import { useAuth } from '../lib/auth'
 4 | import Loader from '../components/Loader'
 5 | 
 6 | const Home = () => {
 7 |     const { user, loading } = useAuth()
 8 | 
 9 |     return (
10 |         <>
11 |             {user ? <HomeLayout /> : <SignInScreen />}
12 |             {loading ? <Loader /> : ''}
13 |         </>
14 |     )
15 | }
16 | export default Home
17 | 


--------------------------------------------------------------------------------
/public/betul.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/betul.jpg


--------------------------------------------------------------------------------
/public/bill.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/bill.jpg


--------------------------------------------------------------------------------
/public/elon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/elon.jpg


--------------------------------------------------------------------------------
/public/erkan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/erkan.jpg


--------------------------------------------------------------------------------
/public/erkan2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/erkan2.jpg


--------------------------------------------------------------------------------
/public/facebook-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/facebook-logo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/favicon.ico


--------------------------------------------------------------------------------
/public/hasan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/hasan.jpg


--------------------------------------------------------------------------------
/public/instagram-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/instagram-dark.png


--------------------------------------------------------------------------------
/public/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/instagram.png


--------------------------------------------------------------------------------
/public/ivana.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/ivana.jpg


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Instagram",
 4 |   // "icons": [
 5 |   //   {
 6 |   //     "src": "favicon.ico",
 7 |   //     "sizes": "64x64 32x32 24x24 16x16",
 8 |   //     "type": "image/x-icon"
 9 |   //   },
10 |   //   {
11 |   //     "src": "logo192.png",
12 |   //     "type": "image/png",
13 |   //     "sizes": "192x192"
14 |   //   },
15 |   //   {
16 |   //     "src": "logo512.png",
17 |   //     "type": "image/png",
18 |   //     "sizes": "512x512"
19 |   //   }
20 |   // ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/mustafa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/mustafa.jpg


--------------------------------------------------------------------------------
/public/owuzan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan.jpg


--------------------------------------------------------------------------------
/public/owuzan/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/1.jpg


--------------------------------------------------------------------------------
/public/owuzan/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/10.jpg


--------------------------------------------------------------------------------
/public/owuzan/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/11.jpg


--------------------------------------------------------------------------------
/public/owuzan/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/2.jpg


--------------------------------------------------------------------------------
/public/owuzan/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/3.jpg


--------------------------------------------------------------------------------
/public/owuzan/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/4.jpg


--------------------------------------------------------------------------------
/public/owuzan/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/5.jpg


--------------------------------------------------------------------------------
/public/owuzan/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/6.jpg


--------------------------------------------------------------------------------
/public/owuzan/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/7.jpg


--------------------------------------------------------------------------------
/public/owuzan/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/8.jpg


--------------------------------------------------------------------------------
/public/owuzan/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/owuzan/9.jpg


--------------------------------------------------------------------------------
/public/photo-example.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/photo-example.jpg


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/ronaldo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/ronaldo.jpg


--------------------------------------------------------------------------------
/public/serdar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/serdar.jpg


--------------------------------------------------------------------------------
/public/sign-up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/sign-up.png


--------------------------------------------------------------------------------
/public/suleyman-example.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/suleyman-example.jpg


--------------------------------------------------------------------------------
/public/suleyman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/suleyman.jpg


--------------------------------------------------------------------------------
/public/user.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/owuzan/next-instagram-clone/bfe0eee5c9d737a4bffff4ed9aef8dbbd3952434/public/user.jpg


--------------------------------------------------------------------------------
/styles/globals.scss:
--------------------------------------------------------------------------------
 1 | *,
 2 | *::before,
 3 | *::after {
 4 |     box-sizing: border-box;
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     -webkit-font-smoothing: antialiased;
 8 |     -moz-osx-font-smoothing: grayscale;
 9 | }
10 | :root {
11 |     --white: #ffffff;
12 |     --background-color: #fafafa;
13 |     --input-background: #fafafa;
14 |     --border-color: #dbdbdb;
15 |     --border-light-color: #efefef;
16 |     --muted-text: #8e8e8e;
17 |     --text: #262626;
18 |     --blue: #0095f6;
19 |     --tag-blue: #00376b;
20 |     --black: #000000;
21 |     --red: #ed4956;
22 |     --button-text: var(--white);
23 |     --other-message-background: var(--white);
24 | }
25 | html,
26 | body {
27 |     height: 100%;
28 |     background-color: var(--background-color);
29 | }
30 | body {
31 |     #__next {
32 |         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
33 |         color: var(--text);
34 |         min-height: 100vh;
35 |         @media (max-width: 599.98px) {
36 |             padding-bottom: 50px;
37 |             padding-top: 50px;
38 |             background-color: var(--white);
39 |         }
40 |     }
41 |     #__next.dark {
42 |         --white: #0c0c0c;
43 |         --red: #ed4956;
44 |         --background-color: #000000;
45 |         --text: #fafafa;
46 |         --muted-text: #989898;
47 |         --other-message-background: #262626;
48 |         --blue: #0095f6;
49 |         --tag-blue: var(--blue);
50 | 
51 |         --border-color: #1d1d1d;
52 |         --border-light-color: #131313;
53 |         --input-background: #080808;
54 | 
55 |         --black: #ffffff;
56 | 
57 |         .contact-list .contact:hover:not(.active-contact) {
58 |             background-color: #101010 !important;
59 |         }
60 |     }
61 | }
62 | .container {
63 |     max-width: 940px;
64 |     width: 100%;
65 |     display: block;
66 |     margin-left: auto;
67 |     margin-right: auto;
68 | }
69 | button {
70 |     font-family: inherit;
71 |     white-space: nowrap;
72 | }
73 | .overflow-auto {
74 |     overflow: auto !important;
75 | }
76 | 


--------------------------------------------------------------------------------
/svgs/AddPost.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M15.9 24H8.1C4.8 24 3.3 23.2 2.05 22C0.8 20.7 0 19.2 0 15.9V8.1C0 4.8 0.8 3.3 2 2.05C3.3 0.8 4.8 0 8.1 0H15.9C19.2 0 20.7 0.8 21.95 2C23.2 3.3 24 4.8 24 8.1V15.9C24 19.2 23.2 20.7 22 21.95C20.7 23.2 19.2 24 15.9 24ZM8.1 1.5C5 1.5 3.9 2.3 3.05 3.1C2.3 3.9 1.5 5 1.5 8.1V15.9C1.5 19 2.3 20.1 3.1 20.95C3.9 21.75 5 22.5 8.1 22.5H15.9C19 22.5 20.1 21.7 20.95 20.9C21.75 20.1 22.5 19 22.5 15.9V8.1C22.5 5 21.7 3.9 20.9 3.05C20.1 2.3 19 1.5 15.9 1.5H8.1Z" fill="#262626"/>
3 | <path d="M18.15 12.75H5.85001C5.45001 12.75 5.10001 12.4 5.10001 12C5.10001 11.6 5.45001 11.25 5.85001 11.25H18.15C18.55 11.25 18.9 11.6 18.9 12C18.9 12.4 18.55 12.75 18.15 12.75Z" fill="#262626"/>
4 | <path d="M12 18.9C11.6 18.9 11.25 18.55 11.25 18.15V5.85001C11.25 5.45001 11.6 5.10001 12 5.10001C12.4 5.10001 12.75 5.45001 12.75 5.85001V18.15C12.75 18.55 12.4 18.9 12 18.9Z" fill="#262626"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/svgs/Back.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M20 16.75C19.8 16.75 19.6 16.7 19.45 16.55L12 9.04999L4.54999 16.55C4.24999 16.85 3.79999 16.85 3.49999 16.55C3.19999 16.25 3.19999 15.8 3.49999 15.5L11.5 7.49999C11.8 7.19999 12.25 7.19999 12.55 7.49999L20.55 15.5C20.85 15.8 20.85 16.25 20.55 16.55C20.4 16.7 20.2 16.75 20 16.75Z" fill="#262626"/>
3 | </svg>


--------------------------------------------------------------------------------
/svgs/Bookmark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M21.75 24C21.55 24 21.35 23.9 21.2 23.8L12 14.5L2.8 23.8C2.6 24 2.25 24.1 2 23.95C1.7 23.85 1.5 23.55 1.5 23.25V0.75C1.5 0.35 1.85 0 2.25 0H21.75C22.15 0 22.5 0.35 22.5 0.75V23.25C22.5 23.55 22.3 23.85 22.05 23.95C21.95 24 21.85 24 21.75 24ZM12 13C12.4 13 12.8 13.15 13.1 13.45L21 21.45V1.5H3V21.45L10.9 13.45C11.2 13.15 11.6 13 12 13Z" fill="#262626"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="24" height="24" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/svgs/BookmarkFill.svg:
--------------------------------------------------------------------------------
 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M21.75 24C21.55 24 21.35 23.9 21.2 23.8L12 14.45L2.8 23.8C2.6 24 2.25 24.1 2 23.95C1.7 23.85 1.5 23.55 1.5 23.25V0.75C1.5 0.35 1.85 0 2.25 0H21.75C22.15 0 22.5 0.35 22.5 0.75V23.25C22.5 23.55 22.3 23.85 22.05 23.95C21.95 24 21.85 24 21.75 24Z" fill="#262626"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="24" height="24" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/svgs/Camera.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 23H4.75C2.25 23 0.25 21 0.25 18.5V8.5C0.25 6 2.25 4 4.75 4H5.3C5.85 4 6.4 3.7 6.65 3.15L6.9 2.65C7.4 1.65 8.45 1 9.6 1H14.4C15.55 1 16.6 1.65 17.1 2.65L17.35 3.15C17.6 3.65 18.1 4 18.7 4H19.25C21.75 4 23.75 6 23.75 8.5V18.5C23.75 21 21.75 23 19.25 23V23ZM22.25 8.5C22.25 6.85 20.9 5.5 19.25 5.5H18.7C17.55 5.5 16.5 4.85 16 3.85L15.75 3.35C15.5 2.8 14.95 2.5 14.4 2.5H9.6C9.05 2.5 8.5 2.8 8.25 3.35L8 3.85C7.5 4.85 6.45 5.5 5.3 5.5H4.75C3.1 5.5 1.75 6.85 1.75 8.5V18.5C1.75 20.15 3.1 21.5 4.75 21.5H19.25C20.9 21.5 22.25 20.15 22.25 18.5V8.5ZM12 19C8.8 19 6.25 16.45 6.25 13.25C6.25 10.05 8.8 7.5 12 7.5C15.2 7.5 17.75 10.05 17.75 13.25C17.75 16.45 15.2 19 12 19ZM12 9C9.65 9 7.75 10.9 7.75 13.25C7.75 15.6 9.65 17.5 12 17.5C14.35 17.5 16.25 15.6 16.25 13.25C16.25 10.9 14.35 9 12 9Z" fill="#262626"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/svgs/Close.svg:
--------------------------------------------------------------------------------
1 | <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path fill-rule="evenodd" clip-rule="evenodd" d="M15.675 3.675L10.3125 9L15.6375 14.325C15.8625 14.55 15.8625 14.8875 15.6375 15.1125L15.1125 15.6375C14.8875 15.8625 14.55 15.8625 14.325 15.6375L9 10.3125L3.675 15.675C3.45 15.9 3.1125 15.9 2.8875 15.675L2.3625 15.15C2.1375 14.925 2.1375 14.5875 2.3625 14.3625L7.6875 9L2.325 3.675C2.1 3.45 2.1 3.1125 2.325 2.8875L2.85 2.3625C3.075 2.1375 3.4125 2.1375 3.6375 2.3625L9 7.6875L14.3625 2.325C14.5875 2.1 14.925 2.1 15.15 2.325L15.675 2.85C15.9 3.075 15.9 3.45 15.675 3.675Z" fill="#262626"/>
3 | </svg>


--------------------------------------------------------------------------------
/svgs/Comment.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M23.75 23.05L22.35 17.55C23.25 15.9 23.75 14 23.75 12C23.75 5.5 18.5 0.25 12 0.25C5.5 0.25 0.25 5.5 0.25 12C0.25 18.5 5.5 23.75 12 23.75C14 23.75 15.9 23.25 17.55 22.35L23.05 23.75C23.45 23.85 23.85 23.45 23.75 23.05ZM22.25 12C22.25 14 21.75 15.5 20.95 17C20.85 17.2 20.8 17.45 20.85 17.7L21.9 21.9L17.75 20.85C17.5 20.8 17.25 20.8 17.05 20.95C16.15 21.45 14.45 22.25 12.05 22.25C6.35 22.25 1.75 17.65 1.75 12C1.75 6.35 6.35 1.75 12 1.75C17.65 1.75 22.25 6.35 22.25 12Z" fill="#262626"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/svgs/Emoji.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M12 24C5.4 24 0 18.6 0 12C0 5.4 5.4 0 12 0C18.6 0 24 5.4 24 12C24 18.6 18.6 24 12 24ZM12 1.5C6.2 1.5 1.5 6.2 1.5 12C1.5 17.8 6.2 22.5 12 22.5C17.8 22.5 22.5 17.8 22.5 12C22.5 6.2 17.8 1.5 12 1.5Z" fill="#262626"/>
3 |     <path d="M17.45 12C17.45 11.3 16.9 10.75 16.2 10.75C15.5 10.75 14.95 11.3 14.95 12C14.95 12.7 15.5 13.25 16.2 13.25C16.9 13.25 17.45 12.7 17.45 12ZM6.55 12C6.55 11.3 7.1 10.75 7.8 10.75C8.5 10.75 9.05 11.3 9.05 12C9.05 12.7 8.5 13.25 7.8 13.25C7.1 13.25 6.55 12.7 6.55 12ZM12 18.65C9.4 18.65 8 16.9 7.9 16.8C7.65 16.5 7.7 16 8 15.75C8.3 15.5 8.8 15.55 9.05 15.85C9.1 15.9 10.1 17.1 11.95 17.1C13.8 17.1 14.85 15.85 14.85 15.85C15.1 15.55 15.6 15.5 15.9 15.75C16.2 16 16.25 16.5 16 16.8C16 16.9 14.6 18.65 12 18.65V18.65Z" fill="#262626"/>
4 | </svg>


--------------------------------------------------------------------------------
/svgs/Explore.svg:
--------------------------------------------------------------------------------
1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C4.95 0 0 4.95 0 11C0 17.05 4.95 22 11 22C17.05 22 22 17.05 22 11C22 4.95 17.05 0 11 0ZM11 20.625C5.68333 20.625 1.375 16.3167 1.375 11C1.375 5.68333 5.68333 1.375 11 1.375C16.3167 1.375 20.625 5.68333 20.625 11C20.625 16.3167 16.3167 20.625 11 20.625ZM15.675 5.40833L8.89167 8.61667C8.75417 8.6625 8.61667 8.8 8.57083 8.9375L5.3625 15.7208C5.225 15.9958 5.27083 16.3167 5.5 16.5C5.6375 16.6375 5.82083 16.6833 6.00417 16.6833C6.09583 16.6833 6.1875 16.6833 6.27917 16.6375L13.0625 13.4292C13.2 13.3833 13.3375 13.2458 13.3833 13.1083L16.5917 6.325C16.7292 6.05 16.6833 5.72917 16.4542 5.54583C16.2708 5.31667 15.95 5.27083 15.675 5.40833ZM12.2833 12.2833L9.7625 9.7625L14.575 7.47083L12.2833 12.2833Z" fill="#262626"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/svgs/ExploreFill.svg:
--------------------------------------------------------------------------------
1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C4.95 0 0 4.95 0 11C0 17.05 4.95 22 11 22C17.05 22 22 17.05 22 11C22 4.95 17.05 0 11 0ZM16.5917 6.325L13.3833 13.1083C13.3375 13.2458 13.2 13.3833 13.0625 13.4292L6.27917 16.6375C6.1875 16.6833 6.09583 16.6833 6.00417 16.6833C5.82083 16.6833 5.6375 16.5917 5.5 16.5C5.31667 16.3167 5.225 15.9958 5.3625 15.7208L8.57083 8.9375C8.61667 8.8 8.75417 8.6625 8.89167 8.61667L15.675 5.40833C15.95 5.27083 16.2708 5.31667 16.4542 5.54583C16.6833 5.72917 16.7292 6.05 16.5917 6.325ZM9.71667 9.71667L7.425 14.5292L12.2375 12.2375L9.71667 9.71667Z" fill="#262626"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/svgs/Home.svg:
--------------------------------------------------------------------------------
 1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M20.7625 22H13.75C13.3833 22 13.0625 21.6792 13.0625 21.3125V15.675C13.0625 14.4833 12.1458 13.5667 10.9542 13.5667C9.7625 13.5667 8.84584 14.4833 8.84584 15.675V21.3125C8.84584 21.6792 8.525 22 8.15834 22H1.14584C0.779169 22 0.458336 21.6792 0.458336 21.3125V10.5417C0.458336 10.3583 0.550003 10.175 0.641669 10.0375L10.4958 0.183331C10.7708 -0.0916687 11.1833 -0.0916687 11.4583 0.183331L21.3125 10.0375C21.4958 10.2208 21.5875 10.5417 21.45 10.7708C21.45 10.8167 21.4042 10.8167 21.4042 10.8625V21.3125C21.45 21.6792 21.1292 22 20.7625 22ZM14.4375 20.625H20.075V10.725L11 1.65L1.83334 10.8167V20.625H7.47084V15.675C7.47084 13.7042 8.98334 12.1917 10.9542 12.1917C12.925 12.1917 14.4375 13.7042 14.4375 15.675V20.625Z" fill="#262626"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="22" height="22" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/svgs/HomeFill.svg:
--------------------------------------------------------------------------------
 1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M20.8542 22H13.7958C13.4292 22 13.1083 21.6792 13.1083 21.3125V15.675C13.1083 14.4833 12.1458 13.5667 11 13.5667C9.85416 13.5667 8.89166 14.5292 8.89166 15.675V21.3125C8.89166 21.6792 8.57083 22 8.20416 22H1.14583C0.779162 22 0.458328 21.6792 0.458328 21.3125V10.5417C0.458328 10.3583 0.549995 10.175 0.641662 10.0375L10.4958 0.183331C10.7708 -0.0916687 11.2292 -0.0916687 11.4583 0.183331L21.3125 10.0375C21.45 10.175 21.4958 10.3583 21.4958 10.5417V21.3125C21.5417 21.6792 21.2208 22 20.8542 22Z" fill="#262626"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="22" height="22" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/svgs/Info.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M12 24C5.4 24 0 18.6 0 12C0 5.4 5.4 0 12 0C18.6 0 24 5.4 24 12C24 18.6 18.6 24 12 24ZM12 1.5C6.2 1.5 1.5 6.2 1.5 12C1.5 17.8 6.2 22.5 12 22.5C17.8 22.5 22.5 17.8 22.5 12C22.5 6.2 17.8 1.5 12 1.5Z" fill="#262626"/>
3 |     <path d="M12 8.70001C12.718 8.70001 13.3 8.11798 13.3 7.40001C13.3 6.68204 12.718 6.10001 12 6.10001C11.282 6.10001 10.7 6.68204 10.7 7.40001C10.7 8.11798 11.282 8.70001 12 8.70001Z" fill="#262626"/>
4 |     <path d="M13.55 17.85H10.45C10.05 17.85 9.7 17.5 9.7 17.1C9.7 16.7 10.05 16.35 10.45 16.35H13.55C13.95 16.35 14.3 16.7 14.3 17.1C14.3 17.5 13.95 17.85 13.55 17.85Z" fill="#262626"/>
5 |     <path d="M12 17.85C11.6 17.85 11.25 17.5 11.25 17.1V11.75H10.45C10.05 11.75 9.7 11.4 9.7 11C9.7 10.6 10.05 10.25 10.45 10.25H12C12.4 10.25 12.75 10.6 12.75 11V17.1C12.75 17.5 12.4 17.85 12 17.85Z" fill="#262626"/>
6 | </svg>


--------------------------------------------------------------------------------
/svgs/Like.svg:
--------------------------------------------------------------------------------
 1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M15.8583 2.79584C18.4708 2.79584 20.625 5.17917 20.625 8.06667C20.625 11.1833 17.9208 13.1083 15.3542 15.4C12.7875 17.6917 11.4583 18.9292 11 19.2042C10.4958 18.8833 8.84583 17.3708 6.64583 15.4C4.03333 13.1083 1.375 11.1833 1.375 8.06667C1.375 5.17917 3.52917 2.79584 6.14167 2.79584C8.06667 2.79584 9.12083 3.7125 9.85417 4.76667C10.725 5.95834 10.8625 6.55417 11 6.55417C11.1375 6.55417 11.275 5.95834 12.1458 4.76667C12.8792 3.7125 13.9333 2.79584 15.8583 2.79584ZM15.8583 1.42084C13.7958 1.42084 12.2375 2.24584 11 3.9875C9.7625 2.29167 8.20417 1.46667 6.14167 1.46667C2.75 1.42084 0 4.4 0 8.06667C0 11.4125 2.475 13.5667 4.85833 15.6292C5.13333 15.8583 5.45417 16.1333 5.72917 16.4083L6.78333 17.325C8.8 19.1125 9.80833 20.0292 10.2667 20.3042C10.4958 20.4417 10.7708 20.5333 11 20.5333C11.275 20.5333 11.5042 20.4417 11.7333 20.3042C12.1917 20.0292 13.0167 19.2958 15.3083 17.1875L16.225 16.3625C16.5458 16.0875 16.8208 15.8125 17.1417 15.5833C19.5708 13.5667 22 11.4583 22 8.06667C22 4.4 19.25 1.42084 15.8583 1.42084Z" fill="#262626"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="22" height="22" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/svgs/LikeFill.svg:
--------------------------------------------------------------------------------
1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M15.8583 1.42084C13.7958 1.42084 12.2375 2.24584 11 3.9875C9.7625 2.29167 8.20417 1.46667 6.14167 1.46667C2.75 1.42084 0 4.4 0 8.06667C0 11.4125 2.475 13.5667 4.85833 15.6292C5.13333 15.8583 5.45417 16.1333 5.72917 16.4083L6.78333 17.325C8.8 19.1125 9.80833 20.0292 10.2667 20.3042C10.4958 20.4417 10.7708 20.5333 11 20.5333C11.2292 20.5333 11.5042 20.4417 11.7333 20.3042C12.1917 20.0292 13.0167 19.2958 15.3083 17.1875L16.225 16.3625C16.5458 16.0875 16.8208 15.8125 17.1417 15.5833C19.5708 13.5667 22 11.4583 22 8.06667C22 4.4 19.25 1.42084 15.8583 1.42084Z" fill="#262626"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/svgs/Loader.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve">
 3 |     <rect x="0" y="0" width="100%" height="100%" fill="none"/>
 4 |     <g>
 5 |         <path d="M59.6 0h8v40h-8V0z" fill="#000000" fill-opacity="1"/>
 6 |         <path d="M59.6 0h8v40h-8V0z" fill="#cccccc" fill-opacity="0.2" transform="rotate(30 64 64)"/>
 7 |         <path d="M59.6 0h8v40h-8V0z" fill="#cccccc" fill-opacity="0.2" transform="rotate(60 64 64)"/>
 8 |         <path d="M59.6 0h8v40h-8V0z" fill="#cccccc" fill-opacity="0.2" transform="rotate(90 64 64)"/>
 9 |         <path d="M59.6 0h8v40h-8V0z" fill="#cccccc" fill-opacity="0.2" transform="rotate(120 64 64)"/>
10 |         <path d="M59.6 0h8v40h-8V0z" fill="#b2b2b2" fill-opacity="0.3" transform="rotate(150 64 64)"/>
11 |         <path d="M59.6 0h8v40h-8V0z" fill="#999999" fill-opacity="0.4" transform="rotate(180 64 64)"/>
12 |         <path d="M59.6 0h8v40h-8V0z" fill="#7f7f7f" fill-opacity="0.5" transform="rotate(210 64 64)"/>
13 |         <path d="M59.6 0h8v40h-8V0z" fill="#666666" fill-opacity="0.6" transform="rotate(240 64 64)"/>
14 |         <path d="M59.6 0h8v40h-8V0z" fill="#4c4c4c" fill-opacity="0.7" transform="rotate(270 64 64)"/>
15 |         <path d="M59.6 0h8v40h-8V0z" fill="#333333" fill-opacity="0.8" transform="rotate(300 64 64)"/>
16 |         <path d="M59.6 0h8v40h-8V0z" fill="#191919" fill-opacity="0.9" transform="rotate(330 64 64)"/>
17 |         <animateTransform attributeName="transform" type="rotate" values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64" calcMode="discrete" dur="1080ms" repeatCount="indefinite"></animateTransform>
18 |     </g>
19 | </svg>


--------------------------------------------------------------------------------
/svgs/Message.svg:
--------------------------------------------------------------------------------
 1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M21.9083 1.74167C21.7708 1.5125 21.5417 1.375 21.3125 1.375H0.6875C0.4125 1.42083 0.1375 1.60417 0.0458333 1.83333C-0.0458333 2.0625 0 2.38333 0.183333 2.6125L7.47083 9.7625L9.99167 20.1208C10.0375 20.3958 10.2667 20.5792 10.5417 20.625H10.6333C10.8625 20.625 11.0917 20.4875 11.2292 20.3042L21.8625 2.42917C22.0458 2.24583 22.0458 1.97083 21.9083 1.74167ZM2.38333 2.79583H18.6542L8.25 8.57083L2.38333 2.79583ZM10.9542 18.1958L8.9375 9.7625L19.4333 3.94167L10.9542 18.1958Z" fill="#262626"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="22" height="22" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/svgs/MessageFill.svg:
--------------------------------------------------------------------------------
 1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M21.9083 1.74167C21.7708 1.5125 21.5417 1.375 21.3125 1.375H0.6875C0.4125 1.42083 0.1375 1.60417 0.0458333 1.83333C-0.0458333 2.0625 0 2.38333 0.183333 2.6125L6.23333 8.57083C6.4625 8.75417 6.7375 8.84583 7.0125 8.70833L14.6208 5.04167C14.9417 4.90417 15.3542 4.99583 15.5375 5.27083C15.7208 5.59167 15.6292 6.00417 15.3083 6.1875L8.15833 10.725C7.92917 10.8625 7.79167 11.1833 7.8375 11.4583L9.94583 20.1667C9.99167 20.4417 10.2208 20.625 10.4958 20.6708H10.5875C10.8167 20.6708 11.0458 20.5333 11.1833 20.35L21.8167 2.475C22.0458 2.24583 22.0458 1.97083 21.9083 1.74167Z" fill="#262626"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="22" height="22" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/svgs/NewMessage.svg:
--------------------------------------------------------------------------------
 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <g clip-path="url(#clip0)">
 3 |         <path d="M18.3818 24.0654H4.63636C4.02568 24.072 3.41984 23.9566 2.85436 23.7259C2.28888 23.4952 1.77516 23.154 1.34331 22.7221C0.911472 22.2903 0.570208 21.7766 0.339536 21.2111C0.108863 20.6456 -0.00657244 20.0398 -1.47563e-06 19.4291V5.68363C-0.00657244 5.07295 0.108863 4.4671 0.339536 3.90162C0.570208 3.33614 0.911472 2.82242 1.34331 2.39058C1.77516 1.95874 2.28888 1.61747 2.85436 1.3868C3.41984 1.15613 4.02568 1.04069 4.63636 1.04726H12.5455C12.7624 1.04726 12.9706 1.13346 13.124 1.2869C13.2774 1.44034 13.3636 1.64845 13.3636 1.86544C13.3636 2.08244 13.2774 2.29055 13.124 2.44399C12.9706 2.59743 12.7624 2.68363 12.5455 2.68363H4.63636C4.24138 2.67999 3.84964 2.7551 3.48402 2.90457C3.1184 3.05405 2.78623 3.27489 2.50693 3.55419C2.22762 3.8335 2.00678 4.16566 1.85731 4.53128C1.70783 4.8969 1.63272 5.28865 1.63636 5.68363V19.4291C1.63272 19.8241 1.70783 20.2158 1.85731 20.5814C2.00678 20.947 2.22762 21.2792 2.50693 21.5585C2.78623 21.8378 3.1184 22.0587 3.48402 22.2081C3.84964 22.3576 4.24138 22.4327 4.63636 22.4291H18.3818C18.7768 22.4327 19.1685 22.3576 19.5342 22.2081C19.8998 22.0587 20.2319 21.8378 20.5113 21.5585C20.7906 21.2792 21.0114 20.947 21.1609 20.5814C21.3103 20.2158 21.3855 19.8241 21.3818 19.4291V11.52C21.3818 11.303 21.468 11.0949 21.6215 10.9414C21.7749 10.788 21.983 10.7018 22.2 10.7018C22.417 10.7018 22.6251 10.788 22.7785 10.9414C22.932 11.0949 23.0182 11.303 23.0182 11.52V19.4291C23.0248 20.0398 22.9093 20.6456 22.6786 21.2111C22.448 21.7766 22.1067 22.2903 21.6749 22.7221C21.243 23.154 20.7293 23.4952 20.1638 23.7259C19.5983 23.9566 18.9925 24.072 18.3818 24.0654V24.0654Z" fill="#262626"/>
 4 |         <path d="M9.54545 18.9927H5.89091C5.67391 18.9927 5.46581 18.9065 5.31237 18.7531C5.15893 18.5997 5.07273 18.3915 5.07273 18.1746V14.52C5.07292 14.3031 5.15924 14.0951 5.31273 13.9418L18.6 0.687278C19.0535 0.244173 19.6623 -0.00390625 20.2964 -0.00390625C20.9304 -0.00390625 21.5392 0.244173 21.9927 0.687278L23.3564 2.05091C23.7995 2.5044 24.0475 3.11325 24.0475 3.74728C24.0475 4.3813 23.7995 4.99016 23.3564 5.44364L10.1018 18.7527C9.95391 18.901 9.75479 18.9869 9.54545 18.9927V18.9927ZM6.70909 17.3564H9.20727L22.2218 4.26546C22.3619 4.1184 22.44 3.92309 22.44 3.72001C22.44 3.51692 22.3619 3.32161 22.2218 3.17455L20.8582 1.81091C20.7111 1.67085 20.5158 1.59273 20.3127 1.59273C20.1096 1.59273 19.9143 1.67085 19.7673 1.81091L6.67636 14.8255L6.70909 17.3564Z" fill="#262626"/>
 5 |         <path d="M20.8364 7.64726C20.7253 7.64977 20.615 7.62981 20.5118 7.58856C20.4087 7.54732 20.315 7.48565 20.2364 7.40726L16.6582 3.82908C16.5137 3.67398 16.435 3.46884 16.4387 3.25687C16.4425 3.04491 16.5283 2.84267 16.6782 2.69277C16.8281 2.54286 17.0304 2.45699 17.2423 2.45325C17.4543 2.44951 17.6594 2.52819 17.8145 2.67272L21.4145 6.27272C21.4911 6.34831 21.5518 6.43834 21.5933 6.53759C21.6348 6.63684 21.6561 6.74333 21.6561 6.8509C21.6561 6.95846 21.6348 7.06496 21.5933 7.16421C21.5518 7.26345 21.4911 7.35349 21.4145 7.42908C21.2574 7.57409 21.0501 7.65233 20.8364 7.64726V7.64726Z" fill="#262626"/>
 6 |     </g>
 7 |     <defs>
 8 |         <clipPath id="clip0">
 9 |             <rect width="24" height="24" fill="white"/>
10 |         </clipPath>
11 |     </defs>
12 | </svg>


--------------------------------------------------------------------------------
/svgs/Options.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M23.35 10.3L22.3 9.75C22.1 9.65 21.95 9.5 21.9 9.25C21.65 8.45 21.35 7.65 20.95 6.9C20.85 6.7 20.8 6.5 20.9 6.3L21.3 5.15C21.4 4.9 21.3 4.6 21.1 4.4L19.65 2.95C19.45 2.75 19.15 2.7 18.9 2.75L17.75 3.15C17.55 3.2 17.35 3.2 17.15 3.1C16.45 2.7 15.65 2.35 14.85 2.15C14.65 2.1 14.45 1.95 14.35 1.75L13.8 0.65C13.65 0.4 13.4 0.25 13.15 0.25H11.1C10.8 0.25 10.55 0.4 10.45 0.65L9.9 1.75C9.8 1.95 9.65 2.1 9.4 2.15C8.6 2.4 7.8 2.7 7.1 3.1C6.9 3.2 6.7 3.25 6.5 3.15L5.35 2.75C5.1 2.65 4.8 2.75 4.6 2.95L2.95 4.4C2.75 4.6 2.7 4.9 2.75 5.15L3.15 6.3C3.2 6.5 3.2 6.7 3.1 6.9C2.7 7.65 2.35 8.4 2.15 9.25C2.1 9.45 1.95 9.65 1.75 9.75L0.699999 10.3C0.449999 10.45 0.299999 10.7 0.299999 10.95V13C0.299999 13.3 0.449999 13.55 0.699999 13.65L1.75 14.2C1.95 14.3 2.1 14.45 2.15 14.7C2.4 15.5 2.7 16.3 3.1 17.05C3.2 17.25 3.25 17.45 3.15 17.65L2.75 18.8C2.65 19.05 2.75 19.35 2.95 19.55L4.4 21C4.6 21.2 4.9 21.25 5.15 21.2L6.3 20.8C6.5 20.75 6.7 20.75 6.9 20.85C7.6 21.25 8.4 21.6 9.2 21.8C9.4 21.85 9.6 22 9.7 22.2L10.25 23.3C10.4 23.55 10.65 23.7 10.9 23.7H12.95C13.25 23.7 13.5 23.55 13.6 23.3L14.15 22.2C14.25 22 14.4 21.85 14.65 21.8C15.45 21.55 16.25 21.25 16.95 20.85C17.15 20.75 17.35 20.7 17.55 20.8L18.7 21.2C18.95 21.3 19.25 21.2 19.45 21L20.9 19.55C21.1 19.35 21.15 19.05 21.1 18.8L20.7 17.65C20.65 17.45 20.65 17.25 20.75 17.05C21.15 16.3 21.5 15.55 21.7 14.7C21.75 14.5 21.9 14.3 22.1 14.2L23.15 13.65C23.4 13.5 23.55 13.25 23.55 13V10.95C23.75 10.7 23.6 10.4 23.35 10.3V10.3ZM12 20.75C7.15 20.75 3.25 16.85 3.25 12C3.25 7.15 7.15 3.25 12 3.25C16.85 3.25 20.75 7.15 20.75 12C20.75 16.85 16.85 20.75 12 20.75Z" fill="#262626"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/svgs/Photo.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M19.25 0H4.75C2.15 0 0 2.15 0 4.75V19.25C0 21.85 2.15 24 4.75 24H19.25C21.85 24 24 21.85 24 19.25V4.75C24 2.15 21.85 0 19.25 0ZM22.5 19.25C22.5 21.05 21.05 22.5 19.25 22.5H4.75C3.1 22.5 1.75 21.25 1.55 19.7L5.7 15.55C5.75 15.5 5.85 15.45 5.9 15.45C5.95 15.45 6 15.45 6.1 15.55L9.25 18.7C9.95 19.4 11.05 19.4 11.75 18.7L17.95 12.5C18.05 12.4 18.25 12.4 18.35 12.5L22.5 16.65V19.25ZM22.5 14.55L19.4 11.45C18.75 10.8 17.55 10.8 16.9 11.45L10.65 17.65C10.6 17.7 10.5 17.75 10.45 17.75C10.4 17.75 10.35 17.75 10.25 17.65L7.1 14.5C6.45 13.85 5.25 13.85 4.6 14.5L1.5 17.6V4.75C1.5 2.95 2.95 1.5 4.75 1.5H19.25C21.05 1.5 22.5 2.95 22.5 4.75V14.55ZM5.9 4.1C4.95 4.1 4.15 4.9 4.15 5.85C4.15 6.8 4.95 7.6 5.9 7.6C6.85 7.6 7.65 6.8 7.65 5.85C7.65 4.9 6.85 4.1 5.9 4.1Z" fill="#262626"/>
3 | </svg>


--------------------------------------------------------------------------------
/svgs/Posts.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 0.75H1.5C1.1 0.75 0.75 1.1 0.75 1.5V22.5C0.75 22.9 1.1 23.25 1.5 23.25H22.5C22.9 23.25 23.25 22.9 23.25 22.5V1.5C23.25 1.1 22.9 0.75 22.5 0.75ZM2.25 2.25H7.75V7.75H2.25V2.25ZM2.25 9.25H7.75V14.75H2.25V9.25ZM7.75 21.75H2.25V16.25H7.75V21.75ZM14.75 21.75H9.25V16.25H14.75V21.75ZM14.75 14.75H9.25V9.25H14.75V14.75ZM14.75 7.75H9.25V2.25H14.75V7.75ZM21.75 21.75H16.25V16.25H21.75V21.75ZM21.75 14.75H16.25V9.25H21.75V14.75ZM21.75 7.75H16.25V2.25H21.75V7.75Z" fill="#262626"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/svgs/Preferences.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M6.5 14C7.32843 14 8 13.3284 8 12.5C8 11.6716 7.32843 11 6.5 11C5.67157 11 5 11.6716 5 12.5C5 13.3284 5.67157 14 6.5 14Z" fill="#262626"/>
3 | <path d="M11.8333 14C12.6618 14 13.3333 13.3284 13.3333 12.5C13.3333 11.6716 12.6618 11 11.8333 11C11.0049 11 10.3333 11.6716 10.3333 12.5C10.3333 13.3284 11.0049 14 11.8333 14Z" fill="#262626"/>
4 | <path d="M17.1667 14C17.9951 14 18.6667 13.3284 18.6667 12.5C18.6667 11.6716 17.9951 11 17.1667 11C16.3382 11 15.6667 11.6716 15.6667 12.5C15.6667 13.3284 16.3382 14 17.1667 14Z" fill="#262626"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/svgs/Search.svg:
--------------------------------------------------------------------------------
 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M10 20C4.5 20 0 15.5 0 10C0 4.5 4.5 0 10 0C15.5 0 20 4.5 20 10C20 15.5 15.5 20 10 20ZM10 1.5C5.3 1.5 1.5 5.3 1.5 10C1.5 14.7 5.3 18.5 10 18.5C14.7 18.5 18.5 14.7 18.5 10C18.5 5.3 14.7 1.5 10 1.5Z" fill="#262626"/>
 4 | <path d="M23.3 24.05C23.1 24.05 22.9 24 22.75 23.85L16 17.1C15.7 16.8 15.7 16.35 16 16.05C16.3 15.75 16.75 15.75 17.05 16.05L23.8 22.8C24.1 23.1 24.1 23.55 23.8 23.85C23.7 24 23.5 24.05 23.3 24.05Z" fill="#262626"/>
 5 | </g>
 6 | <defs>
 7 | <clipPath id="clip0">
 8 | <rect width="24" height="24" fill="white"/>
 9 | </clipPath>
10 | </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/svgs/Tagged.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M20.75 2.75001H15.2C14.95 2.75001 14.7 2.65001 14.5 2.45001L12.5 0.450006C12.2 0.150006 11.75 0.150006 11.45 0.450006L9.45 2.45001C9.25 2.65001 9 2.75001 8.75 2.75001H3.25C1.6 2.75001 0.25 4.10001 0.25 5.75001V20.75C0.25 22.4 1.6 23.75 3.25 23.75H20.75C22.4 23.75 23.75 22.4 23.75 20.75V5.75001C23.75 4.10001 22.4 2.75001 20.75 2.75001ZM6.05 22.25C5.75 22.25 5.5 21.95 5.55 21.65C5.9 20.05 7.3 18.85 8.95 18.85H14.95C16.65 18.85 18.05 20.05 18.35 21.65C18.4 21.95 18.15 22.25 17.85 22.25H6.05V22.25ZM22.25 20.75C22.25 21.6 21.6 22.25 20.75 22.25H20.45C20.2 22.25 20 22.05 19.95 21.8C19.65 19.3 17.55 17.35 15 17.35H9C6.45 17.35 4.3 19.3 4.05 21.8C4 22.05 3.8 22.25 3.55 22.25H3.25C2.4 22.25 1.75 21.6 1.75 20.75V5.75001C1.75 4.90001 2.4 4.25001 3.25 4.25001H8.8C9.45 4.25001 10.1 4.00001 10.55 3.50001L12 2.05001L13.45 3.50001C13.9 3.95001 14.55 4.25001 15.2 4.25001H20.75C21.6 4.25001 22.25 4.90001 22.25 5.75001V20.75ZM12 6.25001C9.35 6.25001 7.2 8.40001 7.2 11.05C7.2 13.7 9.35 15.85 12 15.85C14.65 15.85 16.8 13.7 16.8 11.05C16.8 8.40001 14.65 6.25001 12 6.25001V6.25001ZM12 14.3C10.2 14.3 8.7 12.85 8.7 11C8.7 9.20001 10.15 7.70001 12 7.70001C13.85 7.70001 15.3 9.15001 15.3 11C15.3 12.8 13.8 14.3 12 14.3Z" fill="#262626"/>
3 | </svg>


--------------------------------------------------------------------------------
/svgs/User.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M12 0C5.4 0 0 5.325 0 12C0 15.6 1.575 18.825 4.125 21L4.35 21.225C6.375 22.95 9.075 24 12 24C14.925 24 17.625 22.95 19.65 21.225L19.875 21C22.425 18.75 24 15.6 24 12C24 5.325 18.6 0 12 0ZM12 21.75C9.9 21.75 8.025 21.075 6.375 19.95C6.75 19.275 7.05 18.975 7.425 18.6C7.95 18.225 8.55 18 9.225 18H14.625C15.3 18 15.9 18.225 16.425 18.6C16.8 18.9 17.1 19.2 17.475 19.95C15.975 21.075 14.1 21.75 12 21.75V21.75ZM19.275 18.45C18.9 17.775 18.45 17.325 17.85 16.875C16.95 16.2 15.825 15.825 14.7 15.825H9.3C8.175 15.825 7.05 16.2 6.15 16.875C5.55 17.325 5.1 17.775 4.725 18.45C3.15 16.725 2.25 14.475 2.25 12C2.25 6.6 6.6 2.25 12 2.25C17.4 2.25 21.75 6.6 21.75 12C21.75 14.475 20.85 16.725 19.275 18.45ZM12 4.275C9.075 4.275 6.75 6.6 6.75 9.525C6.75 12.45 9.075 14.775 12 14.775C14.925 14.775 17.25 12.45 17.25 9.525C17.25 6.6 14.925 4.275 12 4.275V4.275ZM12 12.525C10.35 12.525 9 11.175 9 9.525C9 7.875 10.35 6.525 12 6.525C13.65 6.525 15 7.875 15 9.525C15 11.175 13.65 12.525 12 12.525Z" fill="#262626"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/utility/follow.js:
--------------------------------------------------------------------------------
 1 | import firebase from '../lib/firebase'
 2 | 
 3 | const follow = (authId, userId) => {
 4 |     const firestore = firebase.firestore()
 5 |     firestore.collection(`users/${authId}/followings`).doc(userId).set({
 6 |         time: new Date(),
 7 |     })
 8 |     firestore.collection(`users/${userId}/followers`).doc(authId).set({
 9 |         time: new Date(),
10 |     })
11 | }
12 | 
13 | export default follow
14 | 


--------------------------------------------------------------------------------
/utility/isFollowing.js:
--------------------------------------------------------------------------------
 1 | import firebase from '../lib/firebase'
 2 | 
 3 | const isFollowing = async (authId, userId) => {
 4 |     const firestore = firebase.firestore()
 5 |     return await firestore
 6 |         .doc(`users/${authId}/followings/${userId}`)
 7 |         .get()
 8 |         .then((res) => res.exists)
 9 | }
10 | 
11 | export default isFollowing
12 | 


--------------------------------------------------------------------------------
/utility/linkedText.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | 
 3 | export default function linkedText(text) {
 4 |     // FIXME En sona link eklendiği zaman başka karakter olmazsa çalışmıyor.
 5 | 
 6 |     const words = text.split(' ')
 7 |     let list = words.map((word, index) => {
 8 |         if (word.slice(0, 1) === '@') {
 9 |             return (
10 |                 <Link key={index} href={`/${word.slice(1)}`}>
11 |                     <a>{word}</a>
12 |                 </Link>
13 |             )
14 |         }
15 |         if (word.slice(0, 1) === '#') {
16 |             return (
17 |                 <Link key={index} href={`/hashtag/${word.slice(1)}`}>
18 |                     <a>{word}</a>
19 |                 </Link>
20 |             )
21 |         }
22 |         return word
23 |     })
24 |     let temp = []
25 |     let final = []
26 |     let itemType = null
27 |     const content = list.map((item, index) => {
28 |         if (typeof item === 'object') {
29 |             temp.length > 0 ? final.push(temp.join(' ') + ' ') : ''
30 |             final.push(item)
31 |             temp = []
32 |             itemType = 'object'
33 |         } else {
34 |             if (index == 0) {
35 |                 temp.push(item)
36 |             } else {
37 |                 temp.push(' ' + item)
38 |             }
39 |             itemType = 'string'
40 |         }
41 |         if (list.length - 1 === index && itemType === 'string') {
42 |             final.push(' ' + temp.join(' '))
43 |             return final
44 |         }
45 |     })
46 |     return content
47 | }
48 | 


--------------------------------------------------------------------------------
/utility/sendMessage.js:
--------------------------------------------------------------------------------
 1 | import firebase from '../lib/firebase'
 2 | 
 3 | const sendMessage = (authId, userId, message) => {
 4 |     const firestore = firebase.firestore()
 5 | 
 6 |     const time = new Date()
 7 |     // From
 8 |     firestore
 9 |         .collection(`users/${authId}/contacts/${userId}/messages`)
10 |         .doc()
11 |         .set({
12 |             me: true,
13 |             message,
14 |             seen: false,
15 |             time,
16 |             liked: false,
17 |         })
18 |         .catch((error) => {
19 |             console.log(error.message)
20 |             return false
21 |         })
22 |     firestore
23 |         .collection(`users/${authId}/contacts`)
24 |         .doc(userId)
25 |         .set({
26 |             me: true,
27 |             message,
28 |             seen: false,
29 |             time,
30 |             liked: false,
31 |         })
32 |         .catch((error) => {
33 |             console.log(error.message)
34 |             return false
35 |         })
36 | 
37 |     // To
38 |     firestore
39 |         .collection(`users/${userId}/contacts/${authId}/messages`)
40 |         .doc()
41 |         .set({
42 |             me: false,
43 |             message,
44 |             seen: false,
45 |             time,
46 |             liked: false,
47 |         })
48 |         .catch((error) => {
49 |             console.log(error.message)
50 |             return false
51 |         })
52 |     firestore
53 |         .collection(`users/${userId}/contacts`)
54 |         .doc(authId)
55 |         .set({
56 |             me: false,
57 |             message,
58 |             seen: false,
59 |             time,
60 |             liked: false,
61 |         })
62 |         .catch((error) => {
63 |             console.log(error.message)
64 |             return false
65 |         })
66 | 
67 |     return true
68 | }
69 | 
70 | export default sendMessage
71 | 


--------------------------------------------------------------------------------
/utility/unfollow.js:
--------------------------------------------------------------------------------
 1 | import firebase from '../lib/firebase'
 2 | 
 3 | const unfollow = (authId, userId) => {
 4 |     const firestore = firebase.firestore()
 5 |     firestore.collection(`users/${authId}/followings`).doc(userId).delete()
 6 |     firestore.collection(`users/${userId}/followers`).doc(authId).delete()
 7 | }
 8 | 
 9 | export default unfollow
10 | 


--------------------------------------------------------------------------------