48 |
62 |
63 |
49 |
55 |
56 |
61 | {user.username}
57 |58 | Change profile photo 59 |
60 |
16 |
18 |
9 |
13 |
14 | );
15 | }
16 |
17 | export default Sidebar;
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .firebase/hosting.YnVpbGQ.cache
25 | .firebase/hosting.YnVpbGQ.cache
26 |
--------------------------------------------------------------------------------
/src/style/index.scss:
--------------------------------------------------------------------------------
1 | body {
2 |
3 | .Modal {
4 | display: none;
5 | &.active {
6 | position: fixed;
7 | top: 0px;
8 | bottom: 0px;
9 | left: 0px;
10 | right: 0px;
11 | overflow: auto;
12 | z-index: 300;
13 | background-color: #3338;
14 | display: block;
15 | }
16 | .Card {
17 | margin: 10rem auto;
18 | }
19 | }
20 | .spinner {
21 | animation: spinner 0.75s ease-in-out infinite;
22 | }
23 | }
24 | Html{
25 | background-color: #f3f4f6
26 | }
--------------------------------------------------------------------------------
/src/pages/no-page-found.page.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import Header from "../components/header";
3 | import { withSession } from "../context/session";
4 | function NoPageFound({ user }) {
5 | useEffect(() => {
6 | document.title = "Page not found - instagram";
7 | });
8 | return (
9 |
10 |
12 |
10 |
15 | );
16 | }
17 |
18 | export default withSession(NoPageFound);
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/src/constants/routes.js:
--------------------------------------------------------------------------------
1 | export const LOGIN_ROUTE = '/login';
2 | export const NO_PAGE_FOUND_ROUTE = '*';
3 | export const SIGNUP_ROUTE = '/signup';
4 | export const DASHBOARD = '/';
5 | export const PROFILE = '/p/:username';
6 | export const POST_ROUTE = 'post';
7 | export const POST_DETAIL_ROUTE = 'post-detail';
8 | export const ACCOUNT_SETTINGS_ROUTE = '/account';
9 | export const PROFILE_EDIT_ROUTE = `edit`;
10 | export const EXPLORE_ROUTE = '/explore';
11 | export const PEOPLE_ROUTE = 'people';
12 |
13 | // Return the complete route for edit profile
14 | export function getProfileEditAccount(){
15 | return `${ACCOUNT_SETTINGS_ROUTE}/${PROFILE_EDIT_ROUTE}`;
16 | }
--------------------------------------------------------------------------------
/src/context/firebase.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 |
3 | import { firebase,db } from "../lib/firebase";
4 |
5 | const FirebaseContext = createContext(null);
6 | FirebaseContext.displayName = "FirebaseContext";
7 |
8 | export { FirebaseContext };
9 |
10 | export default ({ children }) => {
11 | return (
12 |
12 |
14 | No page found
13 | {
7 | setActive(true);
8 | }}
9 | className="flex place-content-center items-center w-full bg-gray-200"
10 | >
11 | {attachments.map((attachment, index) => {
12 | return 
;
13 | })}
14 |
15 | );
16 | }
17 |
18 | PostAttachmentComponent.prototype = {
19 | attachments: PropTypes.array.isRequired,
20 | };
21 | export default PostAttachmentComponent;
22 |
--------------------------------------------------------------------------------
/src/context/feed.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | import UserFeeds from "../hook/use-feed";
3 |
4 | const FeedContext = createContext(null);
5 | FeedContext.displayName = "FeedContext";
6 |
7 | export { FeedContext };
8 |
9 | export const withFeedProvider = (Component) => (props) => {
10 | const data = UserFeeds();
11 | return (
12 |
13 |
15 |
19 |
20 | );
21 | }
22 | const ExplorePage = withSession(ExploreComponent);
23 | export default ExplorePage;
24 |
--------------------------------------------------------------------------------
/src/lib/firebase.js:
--------------------------------------------------------------------------------
1 | import { initializeApp } from "firebase/app";
2 | import {
3 | getFirestore,
4 | collection,
5 | addDoc,
6 | getDocs,
7 | getDoc,
8 | query,
9 | doc,
10 | setDoc,
11 | where,
12 | limit,
13 | updateDoc,
14 | } from "firebase/firestore";
15 |
16 | const config = {
17 | apiKey: "AIzaSyDAv_F_c6Wg-LsVhbL38Z9RHMyW3A5bTwA",
18 | authDomain: "react-instagram-9284e.firebaseapp.com",
19 | projectId: "react-instagram-9284e",
20 | storageBucket: "react-instagram-9284e.appspot.com",
21 | messagingSenderId: "718982163479",
22 | appId: "1:718982163479:web:046bbd54684ad0bd6e0052",
23 | measurementId: "G-NRW3V5G962",
24 | };
25 |
26 | const firebase = initializeApp(config);
27 |
28 | const db = getFirestore(firebase);
29 |
30 | export { firebase, db,collection,setDoc,doc };
31 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 |
10 | {avatar != null ? (
11 | 
12 | ) : fullname ? (
13 | getInitials(fullname)
14 | ) : (
15 | ""
16 | )}
17 |
18 | );
19 | }
20 |
21 | // Return Initials of name
22 | function getInitials(name) {
23 | if (!name) {
24 | return "";
25 | }
26 | const names = name.split(" ");
27 | if (names.length === 1) {
28 | return names[0].substring(0, 2).toUpperCase();
29 | }
30 | return `${names[0].substring(0, 1).toUpperCase()}${names[1]
31 | .substring(0, 1)
32 | .toUpperCase()}`;
33 | }
34 |
35 | export default UserAvatar;
36 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | // ...
4 | "react-hooks",
5 | "import"
6 | ],
7 | "rules": {
8 | // ...
9 | "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
10 | "react-hooks/exhaustive-deps": "warn" ,// Checks effect dependencies
11 | "react/react-in-jsx-scope": "off",// suppress errors for missing 'import React' in files
12 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
13 | "react/prop-types": 0,
14 | "no-unused-vars": 0,
15 | "react/display-name": 0,
16 | "react/no-unescaped-entities": 0
17 | },
18 | "extends": [
19 | "eslint:recommended",
20 | "plugin:react/recommended"
21 | ],
22 | "parserOptions": {
23 | "sourceType": "module",
24 | "ecmaVersion": 2020
25 | },
26 | "env": {
27 | "browser": true,
28 | "node": true
29 | }
30 | }
--------------------------------------------------------------------------------
/src/hook/use-auth-listener.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useContext } from "react";
2 | import { FirebaseContext } from "../context/firebase";
3 | import { getAuth, onAuthStateChanged } from "firebase/auth";
4 |
5 | function UseAuthListener() {
6 | const [user, setUser] = useState(
7 | JSON.parse(localStorage.getItem("authUser"))
8 | );
9 | const { firebase } = useContext(FirebaseContext);
10 |
11 | useEffect(() => {
12 | const auth = getAuth();
13 | const listener = onAuthStateChanged(auth, (user) => {
14 | if (user) {
15 | // User is signed in
16 | localStorage.setItem("authUser", JSON.stringify(user));
17 | setUser(user);
18 | // ...
19 | } else {
20 | // User is signed out
21 | localStorage.removeItem("authUser");
22 | setUser(null);
23 | console.log("User Signed Out");
24 | }
25 | });
26 | return () => listener();
27 | }, [firebase]);
28 |
29 | return user;
30 | }
31 |
32 | export default UseAuthListener;
33 |
--------------------------------------------------------------------------------
/src/components/sidebar/user.js:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 |
3 | import { Link } from "react-router-dom";
4 | import Skeleton from "react-loading-skeleton";
5 | import "react-loading-skeleton/dist/skeleton.css";
6 | import { UserAvatar } from "..";
7 |
8 | function User({ user }) {
9 | if (!user) {
10 | return
15 |
23 |
16 |
22 |
24 |
27 |
28 | );
29 | }
30 | }
31 |
32 | export default memo(User);
33 |
--------------------------------------------------------------------------------
/src/pages/dashboard.js:
--------------------------------------------------------------------------------
1 | // import { seedDatabase } from "../seed";
2 | // import {db,collection,setDoc,doc} from "../lib/firebase";
3 | import * as Components from "../components/index";
4 |
5 | import { useEffect, useRef } from "react";
6 |
7 | import { withSession } from "../context/session";
8 |
9 | function Dashboard({ user }) {
10 | const createPostRef = useRef();
11 |
12 | useEffect(() => {
13 | try {
14 | // seedDatabase(db,collection,doc,setDoc);
15 | } catch (error) {
16 | console.error(error);
17 | }
18 | document.title = "Instagram";
19 | }, [user]);
20 |
21 | return (
22 | {user.fullname}
25 | {user.username}
26 |
23 |
29 | );
30 | }
31 |
32 | export default withSession(Dashboard);
33 |
--------------------------------------------------------------------------------
/src/pages/settings/settings-sidebar.component.js:
--------------------------------------------------------------------------------
1 | import cx from "classnames";
2 | import React from "react";
3 | import { NavLink } from "react-router-dom";
4 | function SettingsSidebarComponent({ className }) {
5 | // const [, set] = useState();
6 | return (
7 |
13 | );
14 | }
15 |
16 | function LinkButton({ label, to, isActive = false }) {
17 | return (
18 |
25 |
28 |
23 | {label}
24 |
25 | );
26 | function QueryNavLink({ to, ...props }) {
27 | return
15 |
17 |
25 |
26 | );
27 | }
28 | const AccountSettingsPage = withSession(AccountSettingsComponent);
29 | export default AccountSettingsPage;
30 |
--------------------------------------------------------------------------------
/src/hook/use-scroll.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 |
3 | /**
4 | * Get suggested users list
5 | * @param {boolean} hasMoreData
6 | * @param {boolean} loadMore
7 | * @param {boolean} isLoading
8 | * @param {Function} setLoadMore
9 | * @returns
10 | */
11 |
12 | function useScroll(
13 | hasMoreData: boolean,
14 | loadMore: boolean,
15 | isLoading: boolean,
16 | setLoadMore: (e: boolean) => void
17 | ) {
18 | /// Trigger load more effect
19 | useEffect(() => {
20 | // create callback
21 | const callBack = () => {
22 | if (
23 | window.innerHeight + window.scrollY + 100 >=
24 | document.body.offsetHeight
25 | ) {
26 | // Fetch more post feed when user scrolls to bottom
27 | if (hasMoreData && !isLoading && !loadMore) {
28 | console.log("Load more");
29 | setLoadMore(true);
30 | }
31 | }
32 | };
33 | console.log("Scroll listener attached:");
34 | window.addEventListener("scroll", callBack);
35 | return () => {
36 | console.log("Scroll listener Removed:");
37 | window.removeEventListener("scroll", callBack);
38 | };
39 | }, []);
40 | }
41 |
42 | export default useScroll;
43 |
--------------------------------------------------------------------------------
/src/helper/routes.helper.js:
--------------------------------------------------------------------------------
1 | import * as ROUTES from "../constants/routes";
2 |
3 | import { Navigate } from "react-router-dom";
4 | import { lazy } from "react";
5 | const Login = lazy(() => import("../pages/login.page"));
6 | const Profile = lazy(() => import("../pages/profile.page"));
7 | const Signup = lazy(() => import("../pages/signup.page"));
8 | const Dashboard = lazy(() => import("../pages/dashboard"));
9 | const NoPageFound = lazy(() => import("../pages/no-page-found.page"));
10 | const AccountSettings = lazy(() => import("../pages/settings/account-settings.page"))
11 | const EditProfile = lazy(() => import("../pages/settings/edit-profile.page"));
12 | const Explore = lazy(() => import("../pages/explore/explore.page"));
13 | const People = lazy(() => import("../pages/explore/people.page"));
14 |
15 | function getProtectedRoute(user, element) {
16 | if (!(user && Object.keys(user).length === 0)) {
17 | return element;
18 | }
19 | return
18 |
24 |
20 |
23 |
13 |
34 | );
35 | }
36 | export default withSession(PeoplePageComponent);
37 |
--------------------------------------------------------------------------------
/src/hook/use-post.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from "react";
2 | import {
3 | onSnapshot,
4 | collection,
5 | query,
6 | where,
7 | QuerySnapshot,
8 | } from "firebase/firestore";
9 | import { PostConverter, PostModel } from "../models/post";
10 | import { FirebaseContext } from "../context/firebase";
11 | import { db } from "../lib/firebase";
12 | import { SessionContext } from "../context/session";
13 |
14 | function UsePost(): QuerySnapshotSuggestions
14 |
15 | {!people ? (
16 |
33 |
20 | {people.map((people, index) => (
21 |
28 |
29 | ) : (
30 | No suggestion Available
31 | )}
32 |
16 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/model/model.js:
--------------------------------------------------------------------------------
1 | import cx from "classnames";
2 |
3 | export function Modal({
4 | children,
5 | className = "",
6 | width = 540,
7 | padding = true,
8 | active = false,
9 | setActive = (e) => {},
10 | ...props
11 | }) {
12 | return (
13 |
17 |
34 |
19 |
33 |
20 |
22 |
23 |
29 |
30 |
32 | {
15 | if (active) {
16 | setActive(false);
17 | } else {
18 | setActive(true);
19 | }
20 | }}
21 | onKeyUp={(e) => {
22 | if (e.key === "Escape") {
23 | setActive(false);
24 | }
25 | }}
26 | className={cx(`Modal`, {
27 | active: active,
28 | })}
29 | {...props}
30 | >
31 | {
33 | // stop the card being closed when we click on inner divs
34 | if (active) {
35 | e.stopPropagation();
36 | }
37 | }}
38 | padding={padding}
39 | className={`overflow-hidden ` }
40 | style={{ maxWidth: width }}
41 | >
42 | {children}
43 |
44 |
45 | );
46 | }
47 |
48 | function Card({
49 | children,
50 | padding = true,
51 | className = "",
52 | style = {},
53 | onClick = (e) => {},
54 | }) {
55 | return (
56 |
63 | {children}
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/sidebar/suggestions.js:
--------------------------------------------------------------------------------
1 | import Skeleton from "react-loading-skeleton";
2 | import "react-loading-skeleton/dist/skeleton.css";
3 | import { useEffect, useState } from "react";
4 | import SuggestedProfile from "./suggested-profile";
5 | import ProfileService from "../../services/profile";
6 | import usePeople from "../../hook/use-people";
7 | import { Link } from "react-router-dom";
8 | import { RouteHelper } from "../../helper/routes.helper";
9 |
10 | function Suggestions({ userId }) {
11 | const suggestedUsers = usePeople(userId, 10, 10);
12 |
13 | return (
14 |
15 | {!suggestedUsers ? (
16 |
37 | );
38 | }
39 |
40 | export default Suggestions;
41 |
--------------------------------------------------------------------------------
/src/pages/profile.page.js:
--------------------------------------------------------------------------------
1 | import { useParams, useNavigate } from "react-router-dom";
2 | import { useState, useEffect } from "react";
3 | import ProfileService from "../services/profile";
4 | import { withSession } from "../context/session";
5 | import { RouteHelper } from "../helper/routes.helper";
6 | import Loader from "../components/loader";
7 | import Header from "../components/header";
8 | import ProfileComponent from "../components/profile/";
9 | import Skeleton from "react-loading-skeleton";
10 |
11 | function ProfilePage({ user }) {
12 | const { username } = useParams();
13 | const [profile, setProfile] = useState();
14 |
15 | const history = useNavigate();
16 | useEffect(() => {
17 | async function getProfile() {
18 | try {
19 | const data = await ProfileService.getProfileByUsername(username);
20 | if (data) {
21 | setProfile(data);
22 | } else {
23 | history(RouteHelper.NO_PAGE_FOUND);
24 | }
25 | } catch (error) {
26 | console.log("Error", error);
27 | }
28 | }
29 | if (username != null && username !== undefined) {
30 | getProfile();
31 | }
32 | }, [username]);
33 |
34 | if (!profile) {
35 | return 20 | Suggestions 21 | 22 | See all 23 | 24 |
25 |
26 | {suggestedUsers.map((user, index) => (
27 |
34 |
35 | ) : null}
36 |
39 |
42 | );
43 | }
44 |
45 | export default withSession(ProfilePage);
46 |
--------------------------------------------------------------------------------
/src/components/post/footer/index.js:
--------------------------------------------------------------------------------
1 | import { faHeart } from "@fortawesome/free-solid-svg-icons";
2 | import PostActionComponent from "../post-action";
3 | import {
4 | faHeart as emptyHeart,
5 | faCommentDots,
6 | } from "@fortawesome/free-regular-svg-icons";
7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8 | import { useRef, useState } from "react";
9 | import cx from "classnames";
10 | import FeedService from "../../../services/feed";
11 | import AddCommentComponent from "./add-comment/add-comment.js";
12 | import CommentsComponent from "./comment/comments";
13 | import ExpandedText from "../../expended-text";
14 | import { PostAction } from "..";
15 |
16 | function PostFooterComponent({ user, post, onAction = (actionType) => {} }) {
17 | const [comments, setComments] = useState(post.comments);
18 | const commentInput = useRef(null);
19 | const handleFocus = () => commentInput.current.focus();
20 |
21 | return (
22 |
23 |
34 | onAction(PostAction.addComment, newComment)
35 | }
36 | commentInput={commentInput}
37 | />
38 |
39 | );
40 | }
41 |
42 | export default PostFooterComponent;
43 |
--------------------------------------------------------------------------------
/src/components/loader.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const loaderStyleOuter = {
4 | position: "fixed",
5 | zIndex: 100,
6 | left: 0,
7 | right: 0,
8 | bottom: 0,
9 | display: "flex",
10 | justifyContent: "center",
11 | alignItems: "center",
12 | top: 0,
13 | };
14 |
15 | const loaderStyleInner = {
16 | content: " ",
17 | display: "block",
18 | background: 0,
19 | borderRadius: "50%",
20 | width: "48px",
21 | height: "48px",
22 | margin: 0,
23 | boxSizing: "border-box",
24 | border: "2px solid #fff",
25 | borderColor: "#373d49 transparent #373d49 transparent",
26 | };
27 |
28 | export default function Loader() {
29 | return (
30 |
31 |
32 |
33 | );
34 | }
35 |
36 |
37 | const spinnerStyle = (white) => ({
38 | content: " ",
39 | display: "block",
40 | background: 0,
41 | borderRadius: "50%",
42 | width: "24px",
43 | height: "24px",
44 | margin: 0,
45 | boxSizing: "border-box",
46 | border: "2px solid #fff",
47 | borderColor: !white
48 | ? "#3B82F6 transparent #3B82F6 transparent"
49 | : "white transparent white transparent",
50 | });
51 |
52 | function Spinner({ white = false , className }) {
53 | return (
54 |
58 |
59 |
60 | );
61 | }
62 |
63 | export {Spinner};
--------------------------------------------------------------------------------
/src/components/profile/index.js:
--------------------------------------------------------------------------------
1 | import { dispatch, useDispatch, useReducer } from "react";
2 | import { useEffect } from "react";
3 | import ProfileService from "../../services/profile";
4 | import FeedService from "../../services/feed";
5 | import Photos from "./photos";
6 | import ProfileHeader from "./profile-header";
7 |
8 | function ProfileComponent({ profile, loggedInUser }) {
9 | const reducer = (state, newState) => ({ ...state, ...newState });
10 |
11 | const initialState = {
12 | postCollection: {},
13 | followerCount: profile.followers?.length ?? 0,
14 | };
15 |
16 | const [{ postCollection, followerCount }, dispatch] = useReducer(
17 | reducer,
18 | initialState
19 | );
20 | useEffect(() => {
21 | document.title = "instagram - Profile";
22 | async function getProfile() {
23 | const postCollection = await FeedService.getUserPostsByUsername(
24 | profile.username
25 | );
26 | dispatch({
27 | postCollection: postCollection,
28 | followerCount: profile.followers?.length ?? 0,
29 | });
30 | }
31 | if (profile) {
32 | getProfile();
33 | }
34 | }, [profile.username]);
35 |
36 | return (
37 |
38 |
48 | );
49 | }
50 |
51 | export default ProfileComponent;
52 |
--------------------------------------------------------------------------------
/src/components/timeline/index.js:
--------------------------------------------------------------------------------
1 | import "react-loading-skeleton/dist/skeleton.css";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import PostComponent from "../post";
4 | import Skeleton from "react-loading-skeleton";
5 | import UserFeeds from "../../hook/use-feed";
6 | import { faCamera } from "@fortawesome/free-solid-svg-icons";
7 | import { withFeed, withFeedProvider } from "../../context/feed";
8 |
9 | function Timeline({ createPostRef, feed, isLoading }) {
10 | return (
11 |
12 | {isLoading ? (
13 |
25 | );
26 | }
27 |
28 | function NoPostComponent({ feed, createPostRef }) {
29 | return (
30 | feed.length === 0 && (
31 |
16 |
22 | ) : null}
23 | {!feed ||
17 | {feed.map((post, index) => (
18 |
21 |
32 | {
37 | createPostRef.current.click();
38 | }}
39 | />
40 |
42 | )
43 | );
44 | }
45 | export default withFeedProvider(withFeed(Timeline));
46 |
--------------------------------------------------------------------------------
/src/components/post/footer/add-comment/add-comment.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { PostModel, Profile } from "../../../../models/index";
3 |
4 | function AddCommentComponent({
5 | user,
6 | commentInput,
7 | onNewCommentAdd = (e) => {},
8 | }) {
9 | const [caption, setCaption] = useState("");
10 |
11 | const handleSubmit = (e) => {
12 | e.preventDefault();
13 |
14 | if (caption.length >= 1) {
15 | const comment = new PostModel({
16 | id: "",
17 | caption: caption,
18 | createdBy: Profile.postUser(
19 | user.userId,
20 | user.fullname,
21 | user.username,
22 | user.avatar ?? ""
23 | ),
24 | createdAt: Date.now(),
25 | });
26 | onNewCommentAdd(comment);
27 | setCaption("");
28 | }
29 | };
30 | return (
31 | No Posts Yet
41 |
32 |
54 |
55 | );
56 | }
57 |
58 | export default AddCommentComponent;
59 |
--------------------------------------------------------------------------------
/src/hook/use-user.tsx:
--------------------------------------------------------------------------------
1 | import { collection, onSnapshot, query, where } from "firebase/firestore";
2 | import { useEffect, useState } from "react";
3 | import { db } from "../lib/firebase";
4 | import { Profile, ProfileConverter } from "../models/index";
5 | import { getUserByUserId } from "../services/auth";
6 | import UseAuthListener from "./use-auth-listener";
7 |
8 | function UseUser(): Profile {
9 | const [activeUser, setActiveUser] = useState
19 |
50 | );
51 | }
52 |
53 | export default CommentsComponent;
54 |
--------------------------------------------------------------------------------
/src/components/post/post-action/index.js:
--------------------------------------------------------------------------------
1 | import { faHeart } from "@fortawesome/free-solid-svg-icons";
2 | import {
3 | faHeart as emptyHeart,
4 | faCommentDots,
5 | } from "@fortawesome/free-regular-svg-icons";
6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7 | import { useState } from "react";
8 | import cx from "classnames";
9 | import { PostAction } from "..";
10 |
11 | function PostActionComponent({
12 | user,
13 | post,
14 | onAction = (actionType) => {},
15 | handleFocus,
16 | }) {
17 | const [isLiked, setIsLiked] = useState(post.likes.includes(user.userId));
18 |
19 | const [likes, setLike] = useState(post.likes.length);
20 | return (
21 |
20 | {!showAllComments && allComments.length >= 3 && (
21 |
49 | setShowAllComments(!showAllComments)} 23 | className="text-sm text-gray-400 mb-1 select-none cursor-pointer" 24 | > 25 | View all {allComments.length} Comments 26 |
27 | )} 28 | {allComments 29 | .slice(0, showAllComments ? allComments.length : 3) 30 | .map((comment, index) => ( 31 |
32 |
33 |
34 | {" "}
35 | {comment.createdBy.fullname}
36 |
37 |
38 |
46 | posted {formatDistanceToNow(postedAt)} ago 47 |
48 |
22 |
59 | );
60 | }
61 |
62 | export default PostActionComponent;
63 |
--------------------------------------------------------------------------------
/src/components/model/menu-action.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { Modal } from "./model";
3 | import cx from "classnames";
4 |
5 | interface Prop {
6 | active: boolean;
7 | setActive: (_: boolean) => {};
8 | actions: Array
23 |
38 |
39 |
54 | handleFocus()}
41 | onKeyDown={(event) => {
42 | if (event.key === "Enter") {
43 | handleFocus();
44 | }
45 | }}
46 | >
47 |
53 | 55 | {likes} 56 | {likes > 1 ? `likes` : `like`} 57 |
58 |
30 | {
34 | setActive(e);
35 | }}
36 | >
37 |
43 |
44 | );
45 | }
46 |
47 | function ActionButton({
48 | action,
49 | setActive,
50 | }: {
51 | action: Action;
52 | setActive: (_: boolean) => {};
53 | }) {
54 | if(action == null || action === undefined){
55 | return null;
56 | }
57 | return (
58 |
38 | {actions.map((action, index) => (
39 |
42 | {
60 | action.action();
61 | setActive(false);
62 | }}
63 | className={cx("p-2 rounded hover:bg-gray-100", {
64 | "text-gray-600": action.actionLevel === ActionLevel.default,
65 | "text-blue-500": action.actionLevel === ActionLevel.primary,
66 | "text-red-500": action.actionLevel === ActionLevel.alert,
67 | })}
68 | >
69 | {action.label}
70 |
71 | );
72 | }
73 |
74 | export default PostMenuComponent;
75 |
--------------------------------------------------------------------------------
/src/components/sidebar/suggested-profile.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Link } from "react-router-dom";
3 | import { UserAvatar } from "..";
4 | import ProfileService from "../../services/profile";
5 |
6 | function SuggestedProfile({ user, loggedInUserId }) {
7 | const [followed, setFollowed] = useState(
8 | user.followers?.includes(loggedInUserId) ?? false
9 | );
10 |
11 | async function handleFollowUser() {
12 | setFollowed(!followed);
13 |
14 | await ProfileService.updateMyFollowingUser(
15 | loggedInUserId,
16 | user.userId,
17 | followed
18 | );
19 | }
20 | // if(followed){
21 | // return null;
22 | // }
23 |
24 | return (
25 |
26 |
57 | );
58 | }
59 |
60 | export default SuggestedProfile;
61 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import * as ROUTES from "./constants/routes";
2 |
3 | import { BrowserRouter, Route, Routes } from "react-router-dom";
4 | import {
5 | Dashboard,
6 | Login,
7 | NoPageFound,
8 | Profile,
9 | Signup,
10 | AccountSettings,
11 | EditProfile,
12 | getLoggedInRoute,
13 | getProtectedRoute,
14 | Explore,
15 | People,
16 | } from "./helper/routes.helper";
17 |
18 | import Loader from "./components/loader";
19 | import { Suspense } from "react";
20 | import { withFirebase } from "./context/firebase";
21 | import { withSession } from "./context/session";
22 | import { withSessionProvider } from "./context/session";
23 |
24 | function App({ user }) {
25 | return (
26 |
27 | {/* 
*/}
28 |
47 |
48 |
29 | {user.avatar != null ? (
30 |
31 | ) : user.fullname ? (
32 | // user.fullname.substring(0, 2).toUpperCase()
33 |
42 |
43 |
44 | {user.fullname}
45 | 46 |
49 |
55 |
56 |
25 |
29 |
79 | );
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/profile/photos.js:
--------------------------------------------------------------------------------
1 | import {
2 | faHeart as emptyHeart,
3 | faCommentDots,
4 | } from "@fortawesome/free-regular-svg-icons";
5 |
6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7 | import Skeleton from "react-loading-skeleton";
8 | import cx from "classnames";
9 | import { faCamera } from "@fortawesome/free-solid-svg-icons";
10 | import { faHeart } from "@fortawesome/free-solid-svg-icons";
11 | import { useState } from "react";
12 |
13 | function Photos({ photos, user }) {
14 | return (
15 |
35 |
38 |
39 |
78 | {post.createdBy.username}
36 |{post.location}
37 |
16 |
37 | );
38 | }
39 |
40 | function Photo({ post, user }) {
41 | const [isLiked, setIsLiked] = useState(post.likes.includes(user.userId));
42 | return (
43 |
17 | {!photos ? (
18 |
25 | {!photos ||
26 | (photos.length === 0 && (
27 |
28 |
35 | ))}
36 | No Posts Yet
34 |
44 |
77 | );
78 | }
79 | export default Photos;
80 |
--------------------------------------------------------------------------------
/src/components/post/index.js:
--------------------------------------------------------------------------------
1 | import HeaderComponent from "./header";
2 | import PostAttachmentComponent from "./post-attachment";
3 | import { withSession } from "../../context/session";
4 | import PostFooterComponent from "./footer";
5 | import { Modal } from "../model/model";
6 | import PostDetail from "./detail/post-detail";
7 | import { useEffect, useState } from "react";
8 | import ExpandedText from "../expended-text";
9 | import CommentsComponent from "./footer/comment/comments";
10 | import FeedService from "../../services/feed";
11 | import ProfileService from "../../services/profile";
12 |
13 | export const PostAction = Object.freeze({
14 | like: 1,
15 | addComment: 2,
16 | share: 3,
17 | delete: 4,
18 | report: 5,
19 | follow: 6,
20 | unfollow: 7,
21 | });
22 |
23 | function PostComponent({ user, post }) {
24 | const [active, setActive] = useState();
25 |
26 | const onAction = async (actionType, data) => {
27 | try {
28 | switch (actionType) {
29 | case PostAction.like:
30 | await FeedService.togglePostLike(post, user.userId);
31 | break;
32 | case PostAction.addComment:
33 | FeedService.addComment(data, post.id);
34 | break;
35 | case PostAction.delete:
36 | await FeedService.deletePost(post, user.userId);
37 | break;
38 | case PostAction.report:
39 | await FeedService.reportPost(post, user);
40 | console.log("Reported");
41 | break;
42 | case PostAction.follow:
43 | await ProfileService.updateMyFollowingUser(
44 | user.userId,
45 | post.createdBy.userId,
46 | false
47 | );
48 | console.log("user followed");
49 | break;
50 | case PostAction.unfollow:
51 | await ProfileService.updateMyFollowingUser(
52 | user.userId,
53 | post.createdBy.userId,
54 | true
55 | );
56 | console.log("user unfollowed");
57 | break;
58 |
59 | default:
60 | break;
61 | }
62 | } catch (error) {
63 | console.error(error);
64 | }
65 | };
66 |
67 | return (
68 |
45 | 
50 |
51 |
54 |
76 |
55 |
66 | 63 | {post.likes.length} 64 |
65 |
67 |
75 | 72 | {post.likes.length} 73 |
74 |
69 |
84 |
86 |
87 | );
88 | }
89 |
90 | export default withSession(PostComponent);
91 |
--------------------------------------------------------------------------------
/src/seed.tsx:
--------------------------------------------------------------------------------
1 | import { CommentModel, Profile, ProfileConverter } from "./models";
2 | import { PostConverter, PostModel } from "./models/post";
3 |
4 | // NOTE: replace 'bEIPMd9MPpX6nDrN29Qi0vIqYg123' with your Firebase auth user id (can be taken from Firebase)
5 |
6 | export async function seedDatabase(
7 | db: any,
8 | collection: any,
9 | doc: any,
10 | setDoc: any
11 | ) {
12 | const users = [
13 | new Profile({
14 | userId: "bEIPMd9MPpX6nDrN29Qi0vIqYg123",
15 | fullname: "John Doe",
16 | username: "johndoe",
17 | email: "jon.doe@gmail.com",
18 | avatar: "https://i.pravatar.cc/300",
19 | followers: ["bEIPMd9MPpX6nDrN2cdi0vIqYgabc"],
20 | createdAt: Date.now().toString(),
21 | }),
22 | new Profile({
23 | userId: "bEIPMd9MPpX6nDrN2cdi0vIqYgabc",
24 | fullname: "Karl Sanzio",
25 | username: "karlsanzio",
26 | email: "karl.sanzio@gmail.com",
27 | avatar: "https://i.pravatar.cc/300",
28 | following: [
29 | "bEIPMd9MPpX6nDrN29Qi0vIqYg123",
30 | "bEdvMd9MPpX6nDrN29Qi0vIqYgxyz",
31 | ],
32 | createdAt: Date.now().toString(),
33 | }),
34 | new Profile({
35 | userId: "bEdvMd9MPpX6nDrN29Qi0vIqYgxyz",
36 | fullname: "Rachel Green",
37 | username: "rachelgreen",
38 | email: "rachel.green@gmail.com",
39 | avatar: "https://i.pravatar.cc/300",
40 | followers: ["bEIPMd9MPpX6nDrN2cdi0vIqYgabc"],
41 | createdAt: Date.now().toString(),
42 | }),
43 | new Profile({
44 | userId: "bEIPMd9MPpX6nDrN29Qi0vIqYgpqr",
45 | fullname: "Raynolds",
46 | username: "raynolds",
47 | email: "raynolds@gmail.com",
48 | avatar: "https://i.pravatar.cc/300",
49 | createdAt: Date.now().toString(),
50 | }),
51 | ];
52 |
53 | // eslint-disable-next-line prefer-const
54 | for (let k = 0; k < users.length; k++) {
55 | const ref = doc(collection(db, "users"), users[k].userId).withConverter(
56 | ProfileConverter
57 | );
58 |
59 | await setDoc(ref, users[k]);
60 | }
61 |
62 | // const post = new PostModel({
63 | // id: "bEIPMd9MPpX6nDrN29Qi0vIqYg123",
64 | // caption: "Saint George and the Dragon",
65 | // attachments: ["https://picsum.photos/500/500"],
66 | // likes: ["1", "2", "3"],
67 | // comments: [
68 | // new CommentModel(
69 | // "bEIPMd9MPpX6nDr",
70 | // "This is ammazing",
71 | // ["1", "2", "3"],
72 | // // User who created the comment
73 | // Profile.postUser(
74 | // "bEIPMd9MPpX6nDrN29Qi0vIqYg123",
75 | // "John Doe",
76 | // "johndoe",
77 | // "https://i.pravatar.cc/300"
78 | // ),
79 | // // Date of the comment
80 | // Date.now()
81 | // ),
82 | // ],
83 | // createdBy: Profile.postUser(
84 | // "bEIPMd9MPpX6nDrN29Qi0vIqYg123",
85 | // "John Doe",
86 | // "johndoe",
87 | // "https://i.pravatar.cc/300"
88 | // ),
89 | // createdAt: Date.now(),
90 | // });
91 | // for (let i = 1; i <= 5; ++i) {
92 | // const ref = doc(collection(db, "posts"), i.toString()).withConverter(
93 | // PostConverter
94 | // );
95 |
96 | // await setDoc(ref, post);
97 | // }
98 | }
99 |
--------------------------------------------------------------------------------
/src/models/profile.tsx:
--------------------------------------------------------------------------------
1 | import { identity } from "./identity";
2 |
3 | interface Prop {
4 | userId: string;
5 | fullname: string;
6 | username: string;
7 | email?: string | null ;
8 | avatar?: string | null;
9 | bio?: string | null;
10 | website?: string | null;
11 | following?: String[] | null;
12 | followers?: String[] | null;
13 | createdAt?: any | null;
14 | }
15 | class Profile {
16 | userId: string;
17 | fullname: string;
18 | username: string;
19 | email: String | null | undefined;
20 | bio: string | null | undefined;
21 | website: string | null | undefined;
22 | following: String[] | null | undefined;
23 | followers: String[] | null | undefined;
24 | createdAt: any | null | undefined;
25 | avatar: string | null | undefined;
26 |
27 | constructor({
28 | userId,
29 | fullname,
30 | username,
31 | email,
32 | website,
33 | bio,
34 | avatar,
35 | following,
36 | followers,
37 | createdAt,
38 | }: Prop) {
39 | this.userId = userId;
40 | this.fullname = fullname;
41 | this.username = username;
42 | this.email = email;
43 | this.website = website;
44 | this.bio = bio;
45 | this.following = following;
46 | this.followers = followers;
47 | this.createdAt = createdAt;
48 | this.avatar = avatar;
49 | }
50 |
51 | toString() {
52 | return this.fullname + ", " + this.username + ", " + this.email;
53 | }
54 |
55 | static postUser(
56 | userId: string,
57 | fullname: string,
58 | username: string,
59 | avatar: string
60 | ): Profile {
61 | return new Profile({
62 | userId: userId,
63 | fullname: fullname,
64 | username: username,
65 | avatar: avatar,
66 | });
67 | }
68 | }
69 |
70 | // Firestore data converter
71 | const ProfileConverter = {
72 | toFirestore: (user: any) => {
73 | return {
74 | userId: user.userId,
75 | avatar: identity(user.avatar),
76 | fullname: identity(user.fullname),
77 | username: identity(user.username),
78 | email: identity(user.email),
79 | website: identity(user.website),
80 | bio: identity(user.bio),
81 | following: identity(user.following),
82 | followers: identity(user.followers),
83 | createdAt: identity(user.createdAt),
84 | };
85 | },
86 | fromFirestore: (snapshot: any, options: any) => {
87 | const data = snapshot.data(options);
88 | return new Profile({
89 | userId: snapshot.id,
90 | avatar: data.avatar,
91 | fullname: data.fullname,
92 | username: data.username,
93 | email: data.email,
94 | website: data.website,
95 | bio: data.bio,
96 | following: data.following,
97 | followers: data.followers,
98 | createdAt: data.createdAt,
99 | });
100 | },
101 | };
102 |
103 | const PostProfileConverter = {
104 | toFirestore: (user: any) => {
105 | return {
106 | userId: user.userId,
107 | avatar: identity(user.avatar),
108 | fullname: identity(user.fullname),
109 | username: identity(user.username),
110 | };
111 | },
112 | fromFirestore: (data: any) => {
113 | return new Profile({
114 | userId: data.userId,
115 | fullname: data.fullname,
116 | username: data.username,
117 | avatar: data.avatar,
118 | });
119 | },
120 | };
121 |
122 |
123 |
124 | export { Profile, ProfileConverter, PostProfileConverter };
125 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Instagram Clone
2 |
3 | Instagram clone built in [Reactjs](https://reactjs.org/) using Firebase Auth and Firestore db.
4 |
5 | [](https://hits.seeyoufarm.com) [](https://github.com/Thealphamerc/react-instagram) [](https://github.com/login?return_to=https://github.com/FTheAlphamerc/react-instagram)
6 | 
7 |
8 | ## Live Demo
9 | https://react-instagram-9284e.web.app
10 |
11 | ### Steps to run
12 |
13 | `npm install`
14 |
15 | `npm run start`
16 |
17 |
18 | ## Web screnshots
19 | | | |
20 | | ------------- |:-------------:|
21 | |
75 |
83 | 
| 
|
22 | | 
| 
|
23 | | 
| 
|
24 |
25 |
26 |
27 | ## Tablet Screenshot
28 | | | |
29 | | ------------- |:-------------:|
30 | | 
| 
|
31 | | 
| 
|
32 |
33 |
34 |
35 | ## Mobile Screenshot
36 | | | | | |
37 | | ------------- |:-------------|:------------- |:-------------|
38 | | 
|
|
|
|
39 |
40 |
41 |
42 |
43 |
44 | ## Created & Maintained By
45 |
46 | [Sonu Sharma](https://github.com/TheAlphamerc) ([Twitter](https://www.twitter.com/TheAlphamerc)) ([Youtube](https://www.youtube.com/user/sonusharma045sonu/)) ([Insta](https://www.instagram.com/_sonu_sharma__)) ([Dev.to](https://dev.to/thealphamerc))
47 | 
48 |
49 | > If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of :coffee:
50 | >
51 |
52 | > * 
53 | > * [PayPal](https://www.paypal.me/TheAlphamerc/)
54 |
55 | > You can also nominate me for Github Star developer program
56 | > https://stars.github.com/nominate
57 |
58 |
--------------------------------------------------------------------------------
/src/models/post.tsx:
--------------------------------------------------------------------------------
1 | // import { CommentModel, CommentConverter } from ".";
2 | import { ProfileConverter } from ".";
3 | import { identity } from "./identity";
4 | import { PostProfileConverter, Profile } from "./profile";
5 |
6 | interface Prop {
7 | id: string;
8 | caption?: string;
9 | attachments?: string[];
10 | location?: string;
11 | likes?: string[];
12 | comments?: PostModel[];
13 | createdAt: any;
14 | createdBy: Profile;
15 | reportedBy?: Profile[];
16 | }
17 | class PostModel {
18 | id: string;
19 | caption: string;
20 | attachments: string[] | undefined;
21 | location: string | undefined;
22 | likes: string[] | undefined;
23 | comments: PostModel[] | undefined;
24 | createdAt: any;
25 | createdBy: Profile;
26 | reportedBy: Profile[] | undefined;
27 | constructor({
28 | id,
29 | caption = "",
30 | attachments,
31 | location,
32 | createdBy,
33 | createdAt,
34 | likes,
35 | comments,
36 | reportedBy,
37 | }: Prop) {
38 | this.id = id;
39 | this.caption = caption;
40 | this.attachments = attachments;
41 | this.location = location;
42 | this.comments = comments;
43 | this.likes = likes;
44 | this.createdAt = createdAt;
45 | this.createdBy = createdBy;
46 | this.reportedBy = reportedBy;
47 | }
48 | }
49 |
50 | // Firestore data converter
51 | const PostConverter = {
52 | toFirestore: (post: any) => {
53 | return {
54 | id: identity(post.id),
55 | caption: identity(post.caption),
56 | attachments: identity(post.attachments),
57 | likes: identity(post.likes),
58 | location: identity(post.location),
59 | comments: Array.isArray(post.comments)
60 | ? post.comments.map((com: any) => PostConverter.toFirestore(com))
61 | : [],
62 | createdBy: PostProfileConverter.toFirestore(post.createdBy),
63 | createdAt: post.createdAt,
64 | reportedBy: Array.isArray(post.reportedBy)
65 | ? post.reportedBy.map((user: any) => ProfileConverter.toFirestore(user))
66 | : [],
67 | };
68 | },
69 | fromFirestore: (snapshot: any, options: any) => {
70 | const data = snapshot.data(options);
71 | return new PostModel({
72 | id: snapshot.id,
73 | caption: data.caption,
74 | attachments: data.attachments,
75 | location: data.location,
76 | likes: data.likes,
77 | comments: Array.isArray(data.comments)
78 | ? data.comments.map((com: any) => CommentConverter.fromFirestore(com))
79 | : [],
80 | createdBy: PostProfileConverter.fromFirestore(data.createdBy),
81 | createdAt: data.createdAt,
82 | reportedBy: Array.isArray(data.comments)
83 | ? data.comments.map((com: any) =>
84 | PostProfileConverter.fromFirestore(com)
85 | )
86 | : [],
87 | });
88 | },
89 | };
90 |
91 | const CommentConverter = {
92 | toFirestore: (post: any) => {
93 | return {
94 | id: identity(post.id),
95 | caption: identity(post.caption),
96 | likes: identity(post.likes),
97 | createdBy: PostProfileConverter.toFirestore(post.createdBy),
98 | createdAt: post.createdAt,
99 | };
100 | },
101 | fromFirestore: (comment: any) => {
102 | return new PostModel({
103 | id: comment.id,
104 | caption: comment.caption,
105 | likes: comment.likes,
106 | createdBy: PostProfileConverter.fromFirestore(comment.createdBy),
107 | createdAt: comment.createdAt,
108 | });
109 | },
110 | };
111 |
112 | export { PostModel, PostConverter };
113 |
--------------------------------------------------------------------------------
/src/hook/use-feed.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect, useState } from "react";
2 | import { SessionContext } from "../context/session";
3 | import { PostModel } from "../models/post";
4 | import FeedService from "../services/feed";
5 | import UsePost from "./use-post";
6 | import useScroll from "./use-scroll";
7 |
8 | function UserFeeds(): {
9 | feed: PostModel[] | undefined;
10 | isLoading: boolean;
11 | } {
12 | const [feed, setFeeds] = useState
40 |
105 |
106 | );
107 | }
108 |
109 | export default Login;
110 |
--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
1 | import * as ROUTES from "../constants/routes";
2 |
3 | import {
4 | faHome,
5 | faPlus,
6 | faSignOutAlt,
7 | } from "@fortawesome/free-solid-svg-icons";
8 | import { getAuth, signOut } from "firebase/auth";
9 |
10 | import CreatePostModelComponent from "../components/create-post/create-post-model-component";
11 | import { FontAwesomeIcon} from "@fortawesome/react-fontawesome";
12 | import { Link } from "react-router-dom";
13 | import { useState } from "react";
14 | import { UserAvatar } from ".";
15 |
16 | function Header({ user, createPostRef }) {
17 | const isLogout = user && Object.keys(user).length === 0;
18 | const [createPostModel, setCreatePostModel] = useState(false);
19 |
20 | return (
21 |
41 | 
46 |
47 |
46 |
48 |
104 |
49 |
50 |
56 | {error && (
57 |
92 |
50 | 
55 |
56 | {error && (
57 | {error}
58 | )} 59 | 60 | 91 |
93 |
103 | 94 | Don't have an account?{" "} 95 | 99 | Sign up 100 | 101 |
102 |
22 |
108 | );
109 | }
110 |
111 | export default Header;
112 |
--------------------------------------------------------------------------------
/src/services/auth.tsx:
--------------------------------------------------------------------------------
1 | import { db } from "../lib/firebase";
2 | import {
3 | collection,
4 | getDocs,
5 | getDoc,
6 | query,
7 | doc,
8 | setDoc,
9 | where,
10 | } from "firebase/firestore";
11 | import {
12 | updateProfile,
13 | getAuth,
14 | createUserWithEmailAndPassword,
15 | signInWithEmailAndPassword,
16 | UserCredential,
17 | } from "firebase/auth";
18 | import { Profile, ProfileConverter } from "../models/index";
19 |
20 | async function doesUsernameExist(username: string) {
21 | try {
22 | const querySnapshot = query(
23 | collection(db, "users"),
24 | where("username", "==", username)
25 | );
26 | const docs = await getDocs(querySnapshot);
27 | return docs.docs.length > 0;
28 | } catch (e) {
29 | console.log(e);
30 | throw Error("Something went wrong");
31 | }
32 | }
33 |
34 | async function loginWithEmailPassword(
35 | email: string,
36 | password: string
37 | ): Promise
29 |
107 |
30 | {/* LOGO */}
31 |
106 |
32 |
33 |
38 |
39 |
40 | {/* Home | Logout | User */}
41 |
38 |
39 |
42 | {!isLogout ? (
43 | <>
44 |
48 |
105 | {
54 | setCreatePostModel(true);
55 | }}
56 | >
57 |
59 |
71 | {!user.fullname ? null : (
72 |
73 |
74 |
81 | )}
82 |
83 | ) : (
84 | <>
85 |
89 |
92 |
93 |
94 |
98 |
101 |
102 |
103 | )}
104 |
52 |
137 |
138 | );
139 | }
140 |
141 | export default Signup;
142 |
143 | //text-red-primary
144 | //text-gray-base
145 | // border-grey-primary
146 | // bg-blue-medium
147 |
--------------------------------------------------------------------------------
/src/components/profile/profile-header.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Link } from "react-router-dom";
3 | import { UserAvatar } from "..";
4 | import { RouteHelper } from "../../helper/routes.helper";
5 | import ProfileService from "../../services/profile";
6 |
7 | function ProfileHeader({
8 | profile,
9 | loggedInUser,
10 | photoCount,
11 | followerCount,
12 | setFollowCount,
13 | }) {
14 | const [isFollowingProfile, setIsFollowingProfile] = useState(
15 | profile.followers?.includes(loggedInUser.userId)
16 | );
17 | const [isMyProfile, setIsMyProfile] = useState(
18 | profile.username === loggedInUser.username
19 | );
20 |
21 | const handleFollowUser = async () => {
22 | setIsFollowingProfile(!isFollowingProfile);
23 | setFollowCount({
24 | followerCount: isFollowingProfile ? followerCount - 1 : followerCount + 1,
25 | });
26 | await ProfileService.updateMyFollowingUser(
27 | loggedInUser.userId,
28 | profile.userId,
29 | isFollowingProfile
30 | );
31 | };
32 | return (
33 |
53 |
58 |
59 |
58 |
60 |
136 |
61 |
62 |
68 | {error && (
69 |
124 |
62 |
67 |
68 | {error && (
69 | {error}
70 | )} 71 | 72 | 123 |
125 |
135 | 126 | Have an account?{" "} 127 | 131 | Sign in 132 | 133 |
134 |
34 |
77 | );
78 | }
79 | const FollowNEditProfileButton = ({
80 | profile,
81 | isMyProfile,
82 | handleFollowUser,
83 | isFollowingProfile,
84 | }) => {
85 | const button = !isMyProfile ? (
86 |
98 | ) : (
99 |
103 | Edit Profile
104 |
105 | );
106 |
107 | return (
108 |
35 |
70 |
71 |
36 |
51 |
52 |
43 |
50 |
53 |
69 |
54 |
61 |
109 |
116 | );
117 | };
118 | const BioNWebsite = ({ profile }) => {
119 | return (
120 |
110 |
111 | {profile.username}
112 |
113 |
114 | {button}
115 |
121 |
129 | );
130 | };
131 | const ProfileStateSM = ({ profile, photoCount, followerCount }) => {
132 | return (
133 | {profile.fullname}
122 |{profile.bio}
123 | {profile.website && ( 124 |125 | {profile.website} 126 |
127 | )} 128 |
134 |
151 | );
152 | };
153 | const ProfileStates = ({ user, photoCount, followerCount }) => {
154 | return (
155 | 135 | {photoCount ?? 0}{" "} 136 | {photoCount === 1 ? " photo" : " photos"} 137 |
138 |139 | {followerCount} 140 | 141 | {followerCount === 1 ? " follower" : " followers"} 142 | 143 |
144 |145 | {profile.following?.length ?? 0} 146 | 147 | {profile.following?.length === 1 ? " following" : " following"} 148 | 149 |
150 |
156 |
185 | );
186 | };
187 |
188 | export default ProfileHeader;
189 |
--------------------------------------------------------------------------------
/src/pages/settings/edit-profile.page.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useRef, useMemo } from "react";
2 | import cx from "classnames";
3 | import { withSession } from "../../context/session";
4 | import { UserAvatar } from "../../components";
5 | import { Spinner } from "../../components/loader";
6 | import ProfileService from "../../services/profile";
7 |
8 | function EditProfilePageComponent({ user }) {
9 | const email = user.email;
10 | const [name, setName] = useState(user.fullname);
11 | const [avatar, setAvatar] = useState(user.avatar);
12 | const [website, setWebsite] = useState(user.website ?? "");
13 | const [bio, setBio] = useState(user.bio ?? "");
14 | const [error, setError] = useState("");
15 | const [loading, setLoading] = useState(false);
16 | const [success, setSuccess] = useState(false);
17 |
18 | const nameRef = useRef();
19 | const websiteRef = useRef();
20 | const bioRef = useRef();
21 |
22 | // Save profile
23 | const handleSave = async (e) => {
24 | e.preventDefault();
25 | try {
26 | setLoading(true);
27 |
28 | await ProfileService.updateProfile(
29 | user.userId,
30 | name,
31 | bio,
32 | website,
33 | avatar
34 | );
35 | setSuccess(true);
36 | console.log("profile updated");
37 | } catch (e) {
38 | setError(e);
39 | console.log(e);
40 | } finally {
41 | setLoading(false);
42 | }
43 | };
44 |
45 | return (
46 | -
157 |
-
158 | 159 |162 |{photoCount}{" "} 160 |posts161 |
163 |
-
164 |
168 | 169 | {followerCount} 170 |171 |followers172 | 173 |
174 |
-
175 |
179 | {user.following?.length}180 |following181 | 182 |
183 |