Skip to content

Commit

Permalink
🔀 added react-lodash(npm v0.1.2)(#26)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SashenJayathilaka
SashenJayathilaka committed Oct 24, 2022
1 parent 4b6a2bd commit 740a577
Show file tree
Hide file tree
Showing 7 changed files with 321 additions and 120 deletions.
53 changes: 33 additions & 20 deletions components/NavBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
/* eslint-disable @next/next/no-img-element */
import AddIcon from "@mui/icons-material/Add";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import HomeIcon from "@mui/icons-material/Home";
import LightModeIcon from "@mui/icons-material/LightMode";
import LiveTvIcon from "@mui/icons-material/LiveTv";
import MenuIcon from "@mui/icons-material/Menu";
import MessageIcon from "@mui/icons-material/Message";
import NotificationsIcon from "@mui/icons-material/Notifications";
import PeopleIcon from "@mui/icons-material/People";
import StoreIcon from "@mui/icons-material/Store";
import ViewComfyIcon from "@mui/icons-material/ViewComfy";
import { signOut } from "firebase/auth";
import { motion } from "framer-motion";
import { useTheme } from "next-themes";
import { useRouter } from "next/router";
import React from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../firebase/firebase";

// icon
import DarkModeIcon from "@mui/icons-material/DarkMode";
import DynamicFeedIcon from "@mui/icons-material/DynamicFeed";
import HomeIcon from "@mui/icons-material/Home";
import LightModeIcon from "@mui/icons-material/LightMode";
import LiveTvIcon from "@mui/icons-material/LiveTv";
import MenuIcon from "@mui/icons-material/Menu";
import NotificationsIcon from "@mui/icons-material/Notifications";
import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
import StoreOutlinedIcon from "@mui/icons-material/StoreOutlined";
import ViewComfyOutlinedIcon from "@mui/icons-material/ViewComfyOutlined";

import { auth } from "../firebase/firebase";

type NavBarProps = {
isMessenger?: boolean;
Expand Down Expand Up @@ -107,7 +108,7 @@ const NavBar: React.FC<NavBarProps> = ({
<ul className="flex w-full lg:w-max items-center justify-center">
<li className="w-1/5 md:w-max text-center">
<div className="w-full text-3xl py-2 px-3 xl:px-12 cursor-pointer text-center inline-block text-blue-500 border-b-4 border-blue-500">
<HomeIcon className="" />
<HomeIcon />
</div>
</li>
{user && (
Expand All @@ -122,25 +123,25 @@ const NavBar: React.FC<NavBarProps> = ({
</li>
<li className="w-1/5 md:w-max text-center">
<div className="w-full text-3xl py-2 px-3 xl:px-12 cursor-pointer dark:text-gray-300 dark:hover:bg-gray-800 text-center inline-block rounded text-gray-600 hover:bg-gray-100 dark:hover:bg-dark-third dark:text-dark-txt relative">
<StoreIcon />
<StoreOutlinedIcon />
</div>
</li>
<li className="w-1/5 md:w-max text-center">
<div className="w-full text-3xl py-2 px-3 xl:px-12 cursor-pointer dark:text-gray-300 dark:hover:bg-gray-800 text-center inline-block rounded text-gray-600 hover:bg-gray-100 dark:hover:bg-dark-third dark:text-dark-txt relative">
<PeopleIcon />
<PeopleAltOutlinedIcon />
</div>
</li>
<li className="w-1/5 md:w-max text-center hidden md:inline-block">
<div className="w-full text-3xl py-2 px-3 xl:px-12 cursor-pointer dark:text-gray-300 dark:hover:bg-gray-800 text-center inline-block rounded text-gray-600 hover:bg-gray-100 dark:hover:bg-dark-third dark:text-dark-txt relative">
<ViewComfyIcon />
<ViewComfyOutlinedIcon />
<span className="text-xs absolute top-2 right-1/4 bg-red-500 text-white font-semibold rounded-full px-1 text-center">
9+
</span>
</div>
</li>
<li className="w-1/5 md:w-max text-center inline-block md:hidden">
<div className="w-full text-3xl py-2 px-3 xl:px-12 cursor-pointer dark:text-gray-300 dark:hover:bg-gray-800 text-center inline-block rounded text-gray-600 hover:bg-gray-100 dark:hover:bg-dark-third dark:text-dark-txt relative">
<ViewComfyIcon />
<ViewComfyOutlinedIcon />
</div>
</li>
</>
Expand Down Expand Up @@ -194,10 +195,22 @@ const NavBar: React.FC<NavBarProps> = ({
onClick={() => setIsMessenger(true)}
className="text-xl xl:grid place-items-center bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-white rounded-full mx-1 p-3 cursor-pointer hover:bg-gray-300 relative"
>
<MessageIcon />
<span className="animate-ping text-xs absolute top-0 right-0 bg-blue-500 text-white font-semibold rounded-full px-1 text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-6 h-6"
>
<path
fillRule="evenodd"
d="M4.804 21.644A6.707 6.707 0 006 21.75a6.721 6.721 0 003.583-1.029c.774.182 1.584.279 2.417.279 5.322 0 9.75-3.97 9.75-9 0-5.03-4.428-9-9.75-9s-9.75 3.97-9.75 9c0 2.409 1.025 4.587 2.674 6.192.232.226.277.428.254.543a3.73 3.73 0 01-.814 1.686.75.75 0 00.44 1.223zM8.25 10.875a1.125 1.125 0 100 2.25 1.125 1.125 0 000-2.25zM10.875 12a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875-1.125a1.125 1.125 0 100 2.25 1.125 1.125 0 000-2.25z"
clipRule="evenodd"
/>
</svg>

{/* <span className="animate-ping text-xs absolute top-0 right-0 bg-blue-500 text-white font-semibold rounded-full px-1 text-center">
New
</span>
</span> */}
</motion.div>
)}
</li>
Expand Down
231 changes: 177 additions & 54 deletions components/Post.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ import { faker } from "@faker-js/faker";
import CameraAltIcon from "@mui/icons-material/CameraAlt";
import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
import FavoriteIcon from "@mui/icons-material/Favorite";
import InsertCommentIcon from "@mui/icons-material/InsertComment";
import LoopIcon from "@mui/icons-material/Loop";
import ReplyIcon from "@mui/icons-material/Reply";
import ThumbUpIcon from "@mui/icons-material/ThumbUp";
import ThumbUpOutlinedIcon from "@mui/icons-material/ThumbUpOutlined";
import { shuffle } from "lodash";
import {
addDoc,
collection,
Expand All @@ -24,8 +21,21 @@ import moment from "moment";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";

import { auth, firestore } from "../firebase/firebase";

const reactionImages = [
"https://i.postimg.cc/dQ50twjq/Nice-Png-facebook-reactions-png-928837.png",
"https://i.postimg.cc/4xW7jWYM/haha.png",
"https://i.postimg.cc/d1K918vT/Nice-Png-waluigi-face-png-7760819.png",
"https://i.postimg.cc/9FSg2w4y/pngwing-com-2.png",
];

const seconReactionImage = [
"https://i.postimg.cc/L89gyc8L/heart.png",
"https://i.postimg.cc/ZRMKHLRW/vmvngm34iua51.webp",
];

type PostProps = {
author: any;
caption: any;
Expand Down Expand Up @@ -53,6 +63,20 @@ const Post: React.FC<PostProps> = ({
const [loading, setLoading] = useState(false);
const [likes, setLikes] = useState<any[]>([]);
const [hasLikes, setHasLikes] = useState(false);
const [likeName, setLikeName] = useState<any[]>([]);
const [reactions, setReactions] = useState<any>("");
const [secondReactions, setSecondReactions] = useState<any>("");

/* console.log(
likes.map((like) => like.data().username),
"💖💖"
); */

const getLikeName = () => {
if (hasLikes) {
setLikeName(likes.map((like) => like.data().username));
} else return;
};

const sendComment = async (e: any) => {
e.preventDefault();
Expand Down Expand Up @@ -98,6 +122,15 @@ const Post: React.FC<PostProps> = ({
[likes]
);

useEffect(() => {
getLikeName();
}, [likes, firestore, hasLikes]);

useEffect(() => {
setReactions(shuffle(reactionImages).pop());
setSecondReactions(shuffle(seconReactionImage).pop());
}, [likes]);

const likePost = async () => {
try {
if (hasLikes) {
Expand Down Expand Up @@ -176,53 +209,93 @@ const Post: React.FC<PostProps> = ({

{/* <!-- POST REACT --> */}
<div className="px-4 py-2">
<div className="flex items-center justify-between">
<div className="flex flex-row-reverse items-center">
{user ? (
<>
{hasLikes ? (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{"You, "}
{faker.name.fullName()} {"and"} {likes.length} {"others"}
</span>
) : (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{faker.name.fullName()} {"and"} {likes.length} {"others"}
</span>
)}
</>
) : (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{likes.length}
<div
className={
likes.length >= 1
? `flex items-center justify-between`
: `flex items-center justify-end`
}
>
{likes.length >= 1 && (
<div className="flex flex-row-reverse items-center">
{user ? (
<>
{hasLikes ? (
<>
{likes.length >= 3 ? (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{"You, "}
{likeName.slice(0, 1)} {"and"} {likes.length - 2}{" "}
{"others"}
</span>
) : (
<>
{likes.length >= 2 ? (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{"You, "}
{likeName.slice(0, 1)}
</span>
) : (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{likeName.slice(0, 1)}
</span>
)}
</>
)}
</>
) : (
<>
{likes.length >= 3 ? (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{likeName.slice(0, 1)} {"and"} {likes.length - 1}{" "}
{"others"}
</span>
) : (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{likes.length}
</span>
)}
</>
)}
</>
) : (
<span className="ml-2 text-gray-500 dark:text-gray-300 text-sm">
{likes.length}
</span>
)}

{likes.length >= 3 && (
<span className="rounded-full grid place-items-center text-2xl -ml-1 text-yellow-600">
<img src={reactions} alt="like/button" className="w-5 h-5" />
</span>
)}

{likes.length >= 2 && (
<span className="rounded-full grid place-items-center text-2xl -ml-1 text-red-500">
<img
src={secondReactions}
alt="like/button"
className="w-5 h-5"
/>
</span>
)}

<span className="rounded-full grid place-items-center text-2xl -ml-1 text-blue-500">
<img
src="https://i.postimg.cc/bNH29ypq/like.png"
alt="like/button"
className="w-5 h-5"
/>
</span>
)}

<span className="rounded-full grid place-items-center text-2xl -ml-1 text-yellow-600">
<img
src="https://i.postimg.cc/L89gyc8L/heart.png"
alt="like/button"
className="w-5 h-5"
/>
</span>
<span className="rounded-full grid place-items-center text-2xl -ml-1 text-red-500">
<img
src="https://i.postimg.cc/4xW7jWYM/haha.png"
alt="like/button"
className="w-5 h-5"
/>
</span>
<span className="rounded-full grid place-items-center text-2xl -ml-1 text-blue-500">
<img
src="https://i.postimg.cc/bNH29ypq/like.png"
alt="like/button"
className="w-5 h-5"
/>
</span>
</div>
<div className="text-gray-500 dark:text-gray-300">
<span className="mr-2">{comments.length} comments</span>
<span> {faker.random.numeric()} Share</span>
</div>
</div>
)}

{comments.length >= 1 && (
<div className="text-gray-500 dark:text-gray-300">
<span className="mr-2">{comments.length} comments</span>
<span>{faker.random.numeric()} Share</span>
</div>
)}
</div>
</div>
{/* <!-- END POST REACT --> */}
Expand All @@ -240,7 +313,15 @@ const Post: React.FC<PostProps> = ({
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
<ThumbUpIcon />
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-6 h-6"
>
<path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" />
</svg>

<span className="text-sm font-semibold">Like</span>
</motion.div>
) : (
Expand All @@ -250,7 +331,21 @@ const Post: React.FC<PostProps> = ({
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
<ThumbUpOutlinedIcon />
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
/>
</svg>

<span className="text-sm font-semibold">Like</span>
</motion.div>
)}
Expand All @@ -265,15 +360,43 @@ const Post: React.FC<PostProps> = ({
}
onClick={open ? () => setOpen(false) : () => setOpen(true)}
>
<InsertCommentIcon />
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
/>
</svg>

<span className="text-sm font-semibold">Comment</span>
</motion.div>
<motion.div
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
className="w-1/3 flex space-x-2 justify-center items-center hover:bg-gray-100 dark:hover:bg-gray-800 text-xl py-2 rounded-lg cursor-pointer text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
>
<ReplyIcon />
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 15l6-6m0 0l-6-6m6 6H9a6 6 0 000 12h3"
/>
</svg>

<span className="text-sm font-semibold">Share</span>
</motion.div>
</div>
Expand Down
Loading

0 comments on commit 740a577

Please sign in to comment.