+
+ )
+ }
+
+ )
+}
+
+export default AuthLayout
\ No newline at end of file
diff --git a/src/auth/forms/SignInForm.tsx b/src/auth/forms/SignInForm.tsx
new file mode 100644
index 0000000..c70fa3f
--- /dev/null
+++ b/src/auth/forms/SignInForm.tsx
@@ -0,0 +1,114 @@
+import * as z from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from '@/components/ui/button'
+import {Form,FormControl,FormField,FormItem,FormLabel,FormMessage} from "@/components/ui/form";
+import { Input } from "@/components/ui/input"
+import { SigninValidationSchema } from "@/lib/validation";
+import Loader from "@/components/shared/Loader";
+import { Link, useNavigate } from "react-router-dom";
+import { useToast } from "@/components/ui/use-toast";
+import { useCreateUserAccount, useSignInAccount } from "@/lib/react-query/queries";
+import { useUserContext } from "@/context/AuthContext";
+
+const SignInForm = () => {
+ const {toast} = useToast();
+ const navigate = useNavigate();
+
+ const {mutateAsync: signInAccount} = useSignInAccount();
+
+ const {checkAuthUser, isLoading: isUserLoading} = useUserContext();
+
+ const form = useForm
+ {link.label}
+ + ) + }) + } +
+
+ {
+ fileUrl ? (
+ <>
+
+ )
+}
+
+export default FileUploader
\ No newline at end of file
diff --git a/src/components/shared/LikeIcon.tsx b/src/components/shared/LikeIcon.tsx
new file mode 100644
index 0000000..c7f7b61
--- /dev/null
+++ b/src/components/shared/LikeIcon.tsx
@@ -0,0 +1,40 @@
+type LikeIconProps = {
+ filled: boolean;
+ width?: number;
+ height?: number;
+ onClick?: any;
+}
+
+const LikeIcon = ({
+ width = 20,
+ height = 20,
+ filled = false,
+ onClick = (_: any) => {}
+}: LikeIconProps) => {
+ return (
+
+ )
+}
+
+export default LikeIcon
\ No newline at end of file
diff --git a/src/components/shared/Loader.tsx b/src/components/shared/Loader.tsx
new file mode 100644
index 0000000..ebd95d7
--- /dev/null
+++ b/src/components/shared/Loader.tsx
@@ -0,0 +1,29 @@
+type LoaderProps = {
+ size?: number;
+ thickness?: number;
+ color?: string;
+}
+
+const Loader = ({
+ size = 32,
+ thickness = 2,
+ color = '#fff',
+}: LoaderProps) => {
+ return (
+
+ 
+
+ + Click or drag photo to replace +
+ + ) : ( +
+ 
+
+ )
+ }
+
+ Drag photo here
+ + + +
+
+
+
+ )
+}
+
+export default Loader
\ No newline at end of file
diff --git a/src/components/shared/PostCard.tsx b/src/components/shared/PostCard.tsx
new file mode 100644
index 0000000..1dfe5e9
--- /dev/null
+++ b/src/components/shared/PostCard.tsx
@@ -0,0 +1,92 @@
+import { useUserContext } from '@/context/AuthContext'
+import { Models } from 'appwrite'
+import { Link } from 'react-router-dom'
+import PostStats from './PostStats'
+import { multiFormatDateString } from '@/lib/utils'
+
+type PostCardProps = {
+ post: Models.Document
+}
+
+const PostCard = ({post}: PostCardProps) => {
+ const {user} = useUserContext();
+
+ if(!post.creator) return;
+
+ return (
+
+ 
+
+
+
+ )
+}
+
+export default PostCard
\ No newline at end of file
diff --git a/src/components/shared/PostStats.tsx b/src/components/shared/PostStats.tsx
new file mode 100644
index 0000000..9a2b763
--- /dev/null
+++ b/src/components/shared/PostStats.tsx
@@ -0,0 +1,175 @@
+import { useDeleteSavedPost, useGetCurrentUser, useLikePost, useSavePost } from '@/lib/react-query/queries';
+import { Models } from 'appwrite'
+import React, { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom';
+import LikeIcon from './LikeIcon';
+import { checkIsLiked } from '@/lib/utils';
+import CommentIcon from './CommentIcon';
+import { Input } from '../ui/input';
+import EmojiIcon from './EmojiPickerIcon';
+import { Button } from '../ui/button';
+import { IComment } from '@/types';
+import SendIcon from './SendIcon';
+
+type PostStatsProps = {
+ post: Models.Document;
+ userId: string;
+}
+
+const PostStats = ({post, userId}: PostStatsProps) => {
+ const location = useLocation();
+ const likesList = post.likes.map((user: Models.Document) => user.$id)
+
+ const [likes, setLikes] = useState
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ + {post.creator.name} +
+
+
+ + {multiFormatDateString(post.$createdAt)} +
+ ++ {post.location} +
+
+
+
+
+ + {post.caption.split('\n').map((line: string) => (
{line}
))} + +-
+ {
+ post.tags.map((tag: string, index: string) => {
+
- + #{tag} + + }) + } +
+
+ )
+}
+
+export default PostStats
\ No newline at end of file
diff --git a/src/components/shared/PostsGrid.tsx b/src/components/shared/PostsGrid.tsx
new file mode 100644
index 0000000..950d8d2
--- /dev/null
+++ b/src/components/shared/PostsGrid.tsx
@@ -0,0 +1,66 @@
+import { useUserContext } from "@/context/AuthContext";
+import { Models } from "appwrite"
+import { Link } from "react-router-dom";
+import PostStats from "./PostStats";
+
+type PostsGridProps = {
+ posts: Models.Document[];
+ showUser?: boolean;
+ showStats?: boolean;
+}
+
+const PostsGrid = ({
+ posts,
+ showUser = true,
+ showStats = true,
+}: PostsGridProps) => {
+ const {user} = useUserContext();
+
+ return (
+
+
+
+ {/* comments section */}
+ {
+ showComments && (
+
+
+ + {likes.length} +
+
+ 
handleSavePost(e)}
+ />
+
+
+
+ )
+ }
+
+ {
+ comments.length > 0 && (
+
+ 
+
+ setCommentText(e.target.value)}
+ />
+
+ {
+ comments.map((comment) => (
+
+ )
+ }
+
+ 
+ {comment.userName}
+
+ ))
+ }
+ {comment.text}
+-
+ {
+ posts?.map((post: Models.Document) => (
+
-
+
+
+ + +
+ { + showUser && ( ++++ ) + } + + { + showStats && ( ++
+ {post.creator.name} +
++ ) + } +
+ ))
+ }
+
+ No results found +
+ ) + } +} + +export default SearchResults \ No newline at end of file diff --git a/src/components/shared/SendIcon.tsx b/src/components/shared/SendIcon.tsx new file mode 100644 index 0000000..3f2881f --- /dev/null +++ b/src/components/shared/SendIcon.tsx @@ -0,0 +1,32 @@ +type SendIconProps = { + width?: number; + height?: number; + onClick?: any; +} + +const SendIcon = ({ + width = 20, + height = 20, + onClick = (_: any) => {} +}: SendIconProps) => { + return ( + + ) +} + +export default SendIcon; \ No newline at end of file diff --git a/src/components/shared/SideNavigation.tsx b/src/components/shared/SideNavigation.tsx new file mode 100644 index 0000000..feab8fc --- /dev/null +++ b/src/components/shared/SideNavigation.tsx @@ -0,0 +1,80 @@ +import React, { useEffect } from 'react' +import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom'; +import { Button } from '../ui/button'; +import { useUserContext } from '@/context/AuthContext'; +import { useSignOut } from '@/lib/react-query/queries'; +import { sidebarLinks } from '@/constants'; +import { INavLink } from '@/types'; + +const SideNavigation = () => { + const navigate = useNavigate(); + const {pathname} = useLocation(); + const {mutate: signOut, isSuccess} = useSignOut(); + const {user} = useUserContext(); + const userId = user.id; + + useEffect(() => { + if(isSuccess) { + navigate('/sign-in'); + } + }, [isSuccess]) + + return ( + + ) +} + +export default SideNavigation \ No newline at end of file diff --git a/src/components/shared/TopNavigation.tsx b/src/components/shared/TopNavigation.tsx new file mode 100644 index 0000000..9a34614 --- /dev/null +++ b/src/components/shared/TopNavigation.tsx @@ -0,0 +1,48 @@ +import React, { useEffect } from 'react' +import { Link, useNavigate } from 'react-router-dom' +import { Button } from '../ui/button' +import { useSignOut } from '@/lib/react-query/queries' +import { useUserContext } from '@/context/AuthContext' + +const TopNavigation = () => { + const navigate = useNavigate(); + const { user } = useUserContext(); + const { mutate: signOut, isSuccess } = useSignOut(); + + useEffect(() => { + if (isSuccess) navigate(0); + }, [isSuccess]); + + return ( +
+
+ 
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ )
+}
+
+export default UserCard
\ No newline at end of file
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..0ba4277
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes+ {user.name} +
++ @{user.username} +
++ {body} +
+ ) +}) +FormMessage.displayName = "FormMessage" + +export { + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, +} diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..677d05f --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface InputProps + extends React.InputHTMLAttributes
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+ AllUsers
+ )
+}
+
+export default AllUsers
\ No newline at end of file
diff --git a/src/pages/CreatePost.tsx b/src/pages/CreatePost.tsx
new file mode 100644
index 0000000..463a569
--- /dev/null
+++ b/src/pages/CreatePost.tsx
@@ -0,0 +1,25 @@
+import CreatePostForm from '@/components/forms/CreatePostForm'
+import React from 'react'
+
+const CreatePost = () => {
+ return (
+
+
+ )
+}
+
+export default CreatePost
\ No newline at end of file
diff --git a/src/pages/EditPost.tsx b/src/pages/EditPost.tsx
new file mode 100644
index 0000000..b1ed8a5
--- /dev/null
+++ b/src/pages/EditPost.tsx
@@ -0,0 +1,40 @@
+import { useGetPostById } from '@/lib/react-query/queries';
+import { useParams } from 'react-router-dom'
+import Loader from '@/components/shared/Loader';
+import CreatePostForm from '@/components/forms/CreatePostForm';
+import { POST_FORM_ACTIONS } from '@/constants';
+
+const EditPost = () => {
+ const {id} = useParams();
+ const { data: post, isLoading } = useGetPostById(id);
+
+ console.log({post});
+
+ return (
+
+
+
+ 
+
+
+ + Create Post +
+
+
+ )
+}
+
+export default EditPost
\ No newline at end of file
diff --git a/src/pages/Explore.tsx b/src/pages/Explore.tsx
new file mode 100644
index 0000000..16a41cc
--- /dev/null
+++ b/src/pages/Explore.tsx
@@ -0,0 +1,108 @@
+import Loader from "@/components/shared/Loader";
+import PostsGrid from "@/components/shared/PostsGrid";
+import SearchResults from "@/components/shared/SearchResults";
+import { Input } from "@/components/ui/input"
+import useDebounce from "@/hooks/useDebounce";
+import { useGetPosts, useSearchPosts } from "@/lib/react-query/queries";
+import { useEffect, useRef, useState } from "react";
+import { useInView } from "react-intersection-observer";
+
+
+const Explore = () => {
+ const {ref, inView} = useInView();
+
+ const {data: posts, fetchNextPage, hasNextPage} = useGetPosts();
+
+ const [searchValue, setSearchValue] = useState('');
+ const debouncedSearch = useDebounce(searchValue, 500);
+ const { data: searchedPosts, isFetching: isSearchFetching} = useSearchPosts(debouncedSearch);
+
+ useEffect(() => {
+ if(inView && !searchValue) {
+ fetchNextPage();
+ }
+ }, [inView, searchValue]);
+
+ if(!posts) {
+ return (
+
+
+
+ 
+
+ {
+ isLoading ?
+
+ + Edit Post +
+
+
+ )
+ }
+
+ const shouldShowSearchResults = searchValue !== "";
+ const shouldShowPosts = !shouldShowSearchResults && posts.pages.every((item) => item.documents.length === 0)
+ console.log({posts, shouldShowPosts, shouldShowSearchResults});
+
+ return (
+
+
+ )
+}
+
+export default Explore
\ No newline at end of file
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..450ccce
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,61 @@
+import Loader from '@/components/shared/Loader';
+import PostCard from '@/components/shared/PostCard';
+import UserCard from '@/components/shared/UserCard';
+import { useGetRecentPosts, useGetUsers } from '@/lib/react-query/queries'
+import { Models } from 'appwrite'
+import React from 'react'
+
+const HomePage = () => {
+
+ const {data: posts, isLoading, isError} = useGetRecentPosts();
+ const {data: creators, isLoading: isCreatorsLoading} = useGetUsers();
+
+ return (
+
+
+
+ Search Posts
+
+ 
+ {
+ setSearchValue(e.target.value);
+ }}
+ />
+
+
+ {
+ setSearchValue(e.target.value);
+ }}
+ />
+
+
+
+ Popular today
+ +
+ 
+
+ All
+
+
+ {
+ shouldShowSearchResults ? (
+
+
+ {
+ hasNextPage && !searchValue && (
+ + End of posts +
+ ) : ( + posts.pages.map((item, index) => ( +
+
+ )
+ }
+
+
+ )
+}
+
+export default HomePage
\ No newline at end of file
diff --git a/src/pages/LikedPosts.tsx b/src/pages/LikedPosts.tsx
new file mode 100644
index 0000000..37f5295
--- /dev/null
+++ b/src/pages/LikedPosts.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const LikedPosts = () => {
+ return (
+
+
+
+
+ Home Feed
+ {
+ isLoading && !posts ? (
+
+
+
+ Home Feed
+ {
+ isLoading && !posts ? (
+
+
+ {
+ posts?.documents?.map((post: Models.Document) => (
+
+ )
+ }
+
+
+
+ + Top Creators +
+ { + isCreatorsLoading && !creators ? ( +-
+ {
+ creators?.documents.map((creator: Models.Document) => (
+
-
+
+
+ ))
+ }
+
LikedPosts
+ )
+}
+
+export default LikedPosts
\ No newline at end of file
diff --git a/src/pages/PostDetails.tsx b/src/pages/PostDetails.tsx
new file mode 100644
index 0000000..e112d56
--- /dev/null
+++ b/src/pages/PostDetails.tsx
@@ -0,0 +1,165 @@
+import Loader from '@/components/shared/Loader'
+import PostStats from '@/components/shared/PostStats'
+import PostsGrid from '@/components/shared/PostsGrid'
+import { Button } from '@/components/ui/button'
+import { useUserContext } from '@/context/AuthContext'
+import { useDeletePost, useGetPostById, useGetUserPosts } from '@/lib/react-query/queries'
+import { multiFormatDateString } from '@/lib/utils'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+
+const PostDetails = () => {
+ const {id} = useParams();
+ const navigate = useNavigate();
+
+ const {user} = useUserContext();
+
+ const { data: post, isLoading: isPostLoading } = useGetPostById(id);
+ const {
+ data: userRelatedPosts,
+ isLoading: relatedPostsLoading
+ } = useGetUserPosts(post?.creator.$id);
+ console.log({userRelatedPosts});
+ const {mutate: deletePost} = useDeletePost();
+
+ const handleDeletePost = async () => {
+ if(!post) return;
+ deletePost({postId: post.$id, imageId: post.imageId});
+ navigate(-1);
+ }
+
+ return (
+
+
+ )
+}
+
+export default PostDetails
\ No newline at end of file
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
new file mode 100644
index 0000000..f1505eb
--- /dev/null
+++ b/src/pages/Profile.tsx
@@ -0,0 +1,119 @@
+import Loader from "@/components/shared/Loader";
+import PostsGrid from "@/components/shared/PostsGrid";
+import { Button } from "@/components/ui/button";
+import { useUserContext } from "@/context/AuthContext";
+import { useGetCurrentUser, useGetUserPosts } from "@/lib/react-query/queries";
+import { Link, useParams } from "react-router-dom"
+
+const Profile = () => {
+
+ const {id} = useParams();
+ const {user: currentUser} = useUserContext();
+ const {data: user, isLoading: isUserLoading} = useGetCurrentUser();
+ const {data: userPosts, isLoading: postsLoading} = useGetUserPosts(id);
+
+ if(isUserLoading) {
+ return (
+
+
+
+
+ {
+ isPostLoading || !post ? (
+
+ 
+
+
+ )
+ }
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + {post?.creator.name} +
+
+
+ + {multiFormatDateString(post?.$createdAt)} +
+ • ++ {post?.location} +
+
+
+ ![edit]({"/assets/icons/edit.svg"})
+
+
+
+
+
+
+
+
+ + +
+
+
+ {post?.caption}
+-
+ {post?.tags.map((tag: string, index: string) => (
+
- + #{tag} + + ))} +
+
+
+
+ +
+ + +
+ More related posts +
+ + { + relatedPostsLoading ? ( +Could not load user profile. Please refresh the page.
+ ) + } + + console.log({user}); + + + return ( +
+
+ )
+}
+
+export default Profile
\ No newline at end of file
diff --git a/src/pages/Saved.tsx b/src/pages/Saved.tsx
new file mode 100644
index 0000000..4d4e4c2
--- /dev/null
+++ b/src/pages/Saved.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Saved = () => {
+ return (
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ {user?.name}
+@{user?.username}
+
+
+ {
+ id === currentUser.id && (
+
+
+
+ )
+ }
+
+
+
+
+
+ 123
+ posts
+
+
+ 1.1k
+ followers
+
+
+ { user?.bio.split('\n').map((str: string) => {
+ return (
+ <>
+
+ {str}
+
+ )
+ }) || '' }
+
+ {
+ postsLoading ? (
+
+
+
+ )
+ }
+
+
+ 
+
+
+ No posts yet
+ Saved
+ )
+}
+
+export default Saved
\ No newline at end of file
diff --git a/src/pages/SignInPage.tsx b/src/pages/SignInPage.tsx
new file mode 100644
index 0000000..5a61cd5
--- /dev/null
+++ b/src/pages/SignInPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SignInPage = () => {
+ return (
+ SignInPage
+ )
+}
+
+export default SignInPage
\ No newline at end of file
diff --git a/src/pages/SignUpPage.tsx b/src/pages/SignUpPage.tsx
new file mode 100644
index 0000000..9c368cc
--- /dev/null
+++ b/src/pages/SignUpPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SignUpPage = () => {
+ return (
+ SignUpPage
+ )
+}
+
+export default SignUpPage
\ No newline at end of file
diff --git a/src/pages/UpdateProfile.tsx b/src/pages/UpdateProfile.tsx
new file mode 100644
index 0000000..65b03cc
--- /dev/null
+++ b/src/pages/UpdateProfile.tsx
@@ -0,0 +1,34 @@
+import EditProfileForm from '@/components/forms/EditProfileForm'
+import Loader from '@/components/shared/Loader';
+import { useGetCurrentUser } from '@/lib/react-query/queries';
+
+const UpdateProfile = () => {
+ const {data: user, isLoading: isUserLoading} = useGetCurrentUser();
+
+ return (
+
+
+ )
+}
+
+export default UpdateProfile
\ No newline at end of file
diff --git a/src/pages/index.ts b/src/pages/index.ts
new file mode 100644
index 0000000..0ebc447
--- /dev/null
+++ b/src/pages/index.ts
@@ -0,0 +1,11 @@
+export { default as HomePage} from './HomePage';
+export { default as SignInPage} from './SignInPage';
+export { default as SignUpPage} from './SignUpPage';
+export { default as Explore } from './Explore';
+export { default as AllUsers } from './AllUsers';
+export { default as CreatePost } from './CreatePost';
+export { default as EditPost } from './EditPost';
+export { default as PostDetails } from './PostDetails';
+export { default as Profile } from './Profile';
+export { default as Saved } from './Saved';
+export { default as LikedPosts } from './LikedPosts';
\ No newline at end of file
diff --git a/src/root/RootLayout.tsx b/src/root/RootLayout.tsx
new file mode 100644
index 0000000..38babc9
--- /dev/null
+++ b/src/root/RootLayout.tsx
@@ -0,0 +1,22 @@
+import BottomNavigation from '@/components/shared/BottomNavigation'
+import SideNavigation from '@/components/shared/SideNavigation'
+import TopNavigation from '@/components/shared/TopNavigation'
+import React, { Fragment } from 'react'
+import { Outlet } from 'react-router-dom'
+
+const RootLayout: React.FC
+
+
+
+
+ {
+ isUserLoading || !user ? (
+
+ + Edit Profile +
+
+
+
+
+
+ )
+}
+
+export default RootLayout
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..f2e2b72
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,74 @@
+import { Models } from "appwrite";
+
+export type INavLink = {
+ imgURL: string;
+ route: string;
+ label: string;
+};
+
+export type IUpdateUser = {
+ userId: string;
+ name: string;
+ bio: string;
+ imageId: string;
+ imageUrl: URL | string;
+ file: File[];
+};
+
+export type IContextType = {
+ user: IUser;
+ isLoading: boolean;
+ setUser: React.Dispatch