diff --git a/client/package-lock.json b/client/package-lock.json index fe391df..ad679e9 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2067,6 +2067,24 @@ } } }, + "@reduxjs/toolkit": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.6.2.tgz", + "integrity": "sha512-HbfI/hOVrAcMGAYsMWxw3UJyIoAS9JTdwddsjlr5w3S50tXhWb+EMyhIw+IAvCVCLETkzdjgH91RjDSYZekVBA==", + "requires": { + "immer": "^9.0.6", + "redux": "^4.1.0", + "redux-thunk": "^2.3.0", + "reselect": "^4.0.0" + }, + "dependencies": { + "immer": { + "version": "9.0.6", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.6.tgz", + "integrity": "sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ==" + } + } + }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -2407,6 +2425,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -2477,11 +2504,37 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz", "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==" }, + "@types/prop-types": { + "version": "15.7.4", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" }, + "@types/react": { + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.30.tgz", + "integrity": "sha512-3Dt/A8gd3TCXi2aRe84y7cK1K8G+N9CZRDG8kDGguOKa0kf/ZkSwTmVIDPsm/KbQOVMaDJXwhBtuOXxqwdpWVg==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-redux": { + "version": "7.1.19", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.19.tgz", + "integrity": "sha512-L37dSCT0aoJnCgpR8Iuginlbxoh7qhWOXiaDqEsxVMrER1CmVhFD+63NxgJeT4pkmEM28oX0NH4S4f+sXHTZjA==", + "requires": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -2490,6 +2543,11 @@ "@types/node": "*" } }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -4923,6 +4981,11 @@ } } }, + "csstype": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz", + "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" + }, "cyclist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", @@ -12911,6 +12974,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, +<<<<<<< HEAD + "react-redux": { + "version": "7.2.5", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.5.tgz", + "integrity": "sha512-Dt29bNyBsbQaysp6s/dN0gUodcq+dVKKER8Qv82UrpeygwYeX1raTtil7O/fftw/rFqzaf6gJhDZRkkZnn6bjg==", + "requires": { + "@babel/runtime": "^7.12.1", + "@types/react-redux": "^7.1.16", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.13.1" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } +======= "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -12925,6 +13008,7 @@ "prop-types": "^15.7.2", "react-lifecycles-compat": "^3.0.0", "warning": "^4.0.3" +>>>>>>> 158d0193d6fb306d869e885bd34922c56a3f1e43 } }, "react-refresh": { @@ -13185,6 +13269,19 @@ } } }, + "redux": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.1.tgz", + "integrity": "sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "redux-thunk": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", + "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==" + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -13389,6 +13486,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "reselect": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz", + "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==" + }, "resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", diff --git a/client/package.json b/client/package.json index 73e4855..81c3498 100644 --- a/client/package.json +++ b/client/package.json @@ -4,16 +4,13 @@ "private": true, "dependencies": { "@craco/craco": "^6.3.0", - "@fortawesome/fontawesome-svg-core": "^1.2.36", - "@fortawesome/free-solid-svg-icons": "^5.15.4", - "@fortawesome/react-fontawesome": "^0.1.15", + "@reduxjs/toolkit": "^1.6.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-image-crop": "^9.0.4", - "react-modal": "^3.14.3", + "react-redux": "^7.2.5", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "web-vitals": "^1.0.1" diff --git a/client/public/Assets/nullcast.jpg b/client/public/Assets/nullcast.jpg new file mode 100644 index 0000000..da76353 Binary files /dev/null and b/client/public/Assets/nullcast.jpg differ diff --git a/client/src/App.js b/client/src/App.js index 11c044e..6929a34 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,4 +1,5 @@ import {BrowserRouter as Router , Route} from 'react-router-dom'; +import postDetails from './components/post-details/postDetails'; import Signin from './components/Signin'; import Signup from './components/Signup'; import UserCard from './components/user-card/user-card'; @@ -9,7 +10,7 @@ function App() { - + ); } diff --git a/client/src/Redux/profilePic/profilePic.js b/client/src/Redux/profilePic/profilePic.js new file mode 100644 index 0000000..3a6baff --- /dev/null +++ b/client/src/Redux/profilePic/profilePic.js @@ -0,0 +1,16 @@ +import { createSlice } from "@reduxjs/toolkit"; + +export const profilePic = createSlice({ + name:'profilePicUrl', + initialState:{ + value:'./Assets/profilepic.jpg', + }, + reducers:{ + changeUrl:(state,action) => { + state.value = action.payload; + } + } +}) + +export const {changeUrl} = profilePic.actions; +export default profilePic.reducer; \ No newline at end of file diff --git a/client/src/Redux/store.js b/client/src/Redux/store.js new file mode 100644 index 0000000..22c4aa6 --- /dev/null +++ b/client/src/Redux/store.js @@ -0,0 +1,11 @@ +import {configureStore} from '@reduxjs/toolkit'; +import profilePicReducer from './profilePic/profilePic'; +import userNameReducer from './userName/userName'; + +export default configureStore({ + reducer:{ + profilePicUrl : profilePicReducer, + userName : userNameReducer + + } +}) \ No newline at end of file diff --git a/client/src/Redux/userName/userName.js b/client/src/Redux/userName/userName.js new file mode 100644 index 0000000..b9ff808 --- /dev/null +++ b/client/src/Redux/userName/userName.js @@ -0,0 +1,18 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const userName = createSlice({ + name:'userName', + initialState:{ + value:'User Name' + }, + reducers:{ + changeUserName:(state,action) => { + state.value = action.payload + } + } +}) + +export const {changeUserName} = userName.actions; + +export default userName.reducer; + diff --git a/client/src/components/post-details/postDetails.js b/client/src/components/post-details/postDetails.js new file mode 100644 index 0000000..1dbe662 --- /dev/null +++ b/client/src/components/post-details/postDetails.js @@ -0,0 +1,196 @@ +import {useState} from 'react'; +import { BsThreeDots,BsBookmark,BsFillFlagFill,BsEmojiSmile,BsImageFill } from "react-icons/bs"; +import { BiWorld} from "react-icons/bi"; +import { GrLink,GrFormClose } from "react-icons/gr"; +import { ImEmbed2,ImWondering } from "react-icons/im"; +import { AiFillCloseCircle,AiFillEyeInvisible} from "react-icons/ai"; +import { IoVolumeMuteSharp } from "react-icons/io5"; +import { MdVisibility,MdThumbUp} from "react-icons/md"; +import { FaRegCommentDots,FaHandsWash,FaHandHoldingHeart,FaHeart } from "react-icons/fa"; +import { CgCornerUpRight } from "react-icons/cg"; +import { RiSendPlaneFill } from "react-icons/ri"; +import { HiLightBulb } from "react-icons/hi"; +import { useSelector } from 'react-redux'; + +function PostDetails() { + const [dropdown,setDropdown] = useState(false); + const [post,setPost] = useState('./Assets/nullcast.jpg'); + const [content,setContent] = useState('sample text'); + const [reactions, setReactions] = useState(false); + const [like, setLike] = useState(true); + const [clickedReaction, setClickedReaction] = useState(); + const [currentReaction, setCurrentReaction] = useState(Like) + const [commentBox, setCommentBox] = useState(false); + const [comment, setComment] = useState(''); + const [commentList, setCommentList] = useState([{'text':'','imageUrl':''}]); + const [postComment, setPostComment] = useState(false); + const [messagePopup, setMessagePopup] = useState(false); + const [imageUrl, setImageUrl] = useState(''); + const [commentCount, setCommentCount] = useState(0); + const profilePicUrl = useSelector(state => state.profilePicUrl.value); + const userName = useSelector (state => state.userName.value); + + const reactionList = ()=> { + setTimeout(() => {setReactions(false)}, 2000); + } + const onHandleLike = () => { + setLike(!like); + if (like){ + setClickedReaction(); + setCurrentReaction(Like); + } + else { + setClickedReaction(); + setCurrentReaction(Like); + } + + } + const clickedLike = ()=> { + setLike(false); + setClickedReaction(); + setCurrentReaction(Like); + } + const clickedCelebrate = () =>{ + setLike(false); + setClickedReaction(); + setCurrentReaction(Celebrate); + } + const clickedSupport = () =>{ + setLike(false); + setClickedReaction(); + setCurrentReaction(Support) + } + const clickedLove = () =>{ + setLike(false); + setClickedReaction(); + setCurrentReaction(Love) + } + const clickedInsight = () =>{ + setLike(false); + setClickedReaction(); + setCurrentReaction(Insight); + } + const clickedCurious = () =>{ + setLike(false); + setClickedReaction(); + setCurrentReaction(Curious); + } + const handleFormSubmit = (e) => { + e.preventDefault(); + setComment(''); + setImageUrl(); + } + const handleCommentChange = (e) =>{ + setPostComment(true); + setComment(e.target.value); + } + const handleCommentSubmit = ()=>{ + setCommentList([...commentList,{text:comment,imageUrl}]); + setCommentCount(commentList.length); + } + const handleCommentImage = (e) =>{ + setImageUrl(URL.createObjectURL(e.target.files[0])); + setPostComment(true); + } + return ( +
+
+
+
Connections likes this
+ setDropdown(!dropdown)} className='cursor-pointer rounded-full h-6 w-6 hover:bg-gray-400' /> + {dropdown && } +
+
+
+ profile pic +
+
+ userName +
+
+

Followers

+

6h .

+
+
+
+
+
+

{content}

+
+ +
+
+
+ reactionCount . + {commentCount} Comments +
+
+ {reactions &&
setReactions(false)} onMouseEnter={()=> setReactions(true)} className='absolute border border-primary flex justify-between w-60 -top-10 -left-7 rounded-full px-6 py-3 bg-white'> + + + + + + +
} +
setReactions(true)} onClick={onHandleLike}>{clickedReaction}{currentReaction}
+
setCommentBox(true)}>Comment
+
Share
+
setMessagePopup(true)}>Send
+
+ {commentBox &&
+ +
+
+