Social Media 만들기 - 17) share, suggestion 구현하기

편지모양 아이콘을 누르면 share모드가 나오도록 설정하자. 

 

먼저 react-share를 사용하기 위해서 npm i react-share를 해준다. 

https://www.npmjs.com/package/react-share

react-share

 

 

cardFooter.js

    const [isShare, setIsShare] = useState(false)

            {

                isShare &&
                <ShareModal url={`${BASE_URL}/post/${post._id}`}/>
            }
        </div>

 

components>utils.js

export const BASE_URL='http://localhost:3000'

 

components>ShareModal.js를 만들어준다. 

import React from 'react'
import {EmailShareButton,EmailIcon,
    FacebookShareButton,FacebookIcon,
    TelegramShareButton,TelegramIcon,
    TwitterShareButton,TwitterIcon,
    WhatsappShareButton,WhatsappIcon,
} from 'react-share'

function ShareModal({url}) {
    return (
        <div className="d-flex justify-content-between px-4 py-2" >
            
            <FacebookShareButton url={url}>
                <FacebookIcon round={true} size={32}/>
            </FacebookShareButton>

            <TwitterShareButton url={url}>
                <TwitterIcon round={true} size={32}/>
            </TwitterShareButton>

            <EmailShareButton url={url}>
                <EmailIcon round={true} size={32}/>
            </EmailShareButton>            
            
            <TelegramShareButton url={url}>
                <TelegramIcon round={true} size={32}/>
            </TelegramShareButton>            
            
            <WhatsappShareButton url={url}>
                <WhatsappIcon round={true} size={32}/>
            </WhatsappShareButton>

        </div>
    )
}

export default ShareModal

 

 

 

 

편지모양을 누르면 다음과 같이 쉐어 모달이 나온다. 

 

 

 

해당링크를 누르면 링크를 공유할수있도록 로그인 화면이 나온다. 

 

 

 

 

 

 

 

이제, 홈페이지 오른쪽에 사용자를 추천해주는(팔로우하지 않은 사람)기능을 만들자. 

userrouter

userRouter.get('/suggestion/:id', auth, async(req, res)=>{
    try{
        const user = await User.findOne({_id:req.user.id})
        const newArr=[...user.following, req.user.id]

        const num = req.query.num || 10

        const users = await User.aggregate([
            {$match:{_id:{$nin:newArr}}},
            {$sample:{size:Number(num)}},
            {$lookup:{from:'User', localField:'followers', foreignField:'_id', as:'followers'}},
            {$lookup:{from:'User', localField:'following', foreignField:'_id', as:'following'}},

        ]).project("-password")

        res.json({
            users,
            result:users.length
        })

    }catch(err){
        return res.status(500).json({message:err.message})
    }
})



module.exports = userRouter

 

 

userconstant

export const GET_USER_SUGGESTION_REQUEST = 'GET_USER_SUGGESTION_REQUEST'
export const GET_USER_SUGGESTION_SUCCESS = 'GET_USER_SUGGESTION_SUCCESS'
export const GET_USER_SUGGESTION_FAIL = 'GET_USER_SUGGESTION_FAIL'

 

suggestionActions

import axios from "axios"
import { GET_USER_SUGGESTION_FAIL, GET_USER_SUGGESTION_REQUEST, GET_USER_SUGGESTION_SUCCESS } from "../_constants/userConstants"

export const getSuggestions = ()=>async (dispatch, getState)=>{
    dispatch({
        type:GET_USER_SUGGESTION_REQUEST,
        payload:{loading:true}
    })
    const {userLogin:{userInfo}} = getState()
    try{
        const res = await axios.get(`/api/users/suggestion/${userInfo.user._id}`,{headers:{authorization : `Bearer ${userInfo?.token}`}
        })


        dispatch({
            type:GET_USER_SUGGESTION_SUCCESS,
            payload:res.data
        })

    }catch (err){
        dispatch({
            type:GET_USER_SUGGESTION_FAIL,
            payload:{error:err.response && err.response.data.message? err.response.data.message : err.message}
        })
    }
}

 

suggestionReducers

import { GET_USER_SUGGESTION_FAIL, GET_USER_SUGGESTION_REQUEST, GET_USER_SUGGESTION_SUCCESS } from "../_constants/userConstants";
const initialState={
    users:[],
    loading:false
}

export const suggestionReducer = (state={}, action)=>{
    switch(action.type){
        case GET_USER_SUGGESTION_REQUEST:
            return {...state, loading:true}
        case GET_USER_SUGGESTION_SUCCESS:
            return {...state, loading:false, success:true ,users:action.payload.users, result:action.payload.result}
        case GET_USER_SUGGESTION_FAIL:
            return {...state, loading:false, succass:false, error:action.payload}
        default:
            return state;
    }
}

 

store.js

    suggestion:suggestionReducer,

 

component>RightSideBar.js

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import UserCard from './UserCard'
import LoadIcon from '../images/loading.gif'
import FollowBtn from './FollowBtn'
import { getSuggestions } from '../_actions/suggestionActions'

function RightSideBar() {

    const userLogin = useSelector(state => state.userLogin)
    const {userInfo} = userLogin

    const suggestion = useSelector(state => state.suggestion)

    const dispatch = useDispatch()

    return (
        <div className="mt-3">

            <UserCard user={userInfo.user}/>

            <div className="d-flex justify-content-between align-items-center my-2">
                <h5 className="text-danger">Suggestions for you </h5>
                {
                    !suggestion.loading &&
                    <i className="fas fa-redo" style={{cursor:'pointer'}} onClick={()=>dispatch(getSuggestions())}/>
                }
            </div>

            {
                suggestion.loading
                ? <img src={LoadIcon} alt="loading" className="d-block mx-auto my-4"/>
                : suggestion.users &&
                <div className="suggeston">
                    {
                        suggestion.users.map(user=>(
                            <UserCard key={user._id}  user={user}>
                                <FollowBtn user={user}/>
                            </UserCard>
                        ))
                    }
                </div>
            }

            
        </div>
    )
}

export default RightSideBar

 

pages>Homepage

import React from 'react'
import { useSelector } from 'react-redux'
import Header from '../component/Haader'
import Status from '../component/Status'
import Post from '../component/Post'
import RightSideBar from '../component/RightSideBar'

function HomePage(props) {
    const userLogin = useSelector(state => state.userLogin)
    const userInfo = userLogin

    if(!userInfo){
        props.history.push('/login')
    }
    return (
        <div className="home row mx-0">
            <div className="col-md-8">
                <Status/>
                <Post />
            </div>
            <div className="col-md-4">
                <RightSideBar/>
            </div>
        </div>
    )
}

export default HomePage

 

 

 

새로고침하면 순서가 바뀌어서(랜덤으로)가지고 온다.