게시물 작성하기

로그인 체크하기

PostWrite.js

import

import { useSelector } from 'react-redux';

로그인 여부 확인하기

• App.js에서 세션을 이미 확인했기 때문에 is_login만 확인한다

const PostWrite = (props) =>{
    const is_login = useSelector((state) => state.user.is_login);
    }

로그인 안 했을 경우

• 게시물을 작성할 수 없다는 문구 표시

• 로그인 하기 버튼을 누르면 이전에 있던 페이지가 다시 뜨지않도록 메인 페이지와 바꾸기
  history.push('/') => history.replace('/')

    if(!is_login){
        return (
            <Grid margin='100px 0px' padding='16px' center>
                <Text size='24px'>로그인 후에만 작성이 가능합니다</Text>
                <Button 
                _onClick={() => {history.replace('/');}} 
                >로그인 하러가기</Button>
            </Grid>
        )
    }

App.js

게시물 추가 버튼

• 로그인 후 게시물 추가 버튼을 누르면 게시물 작성 페이지로 이동

<Button is_float text='+' _onClick={() => {history.push('/write')}}></Button>

게시물 작성 및 저장(firestore)

PostWrite.js

게시물 입력값 저장

• 실시간으로 input창에 입력된 값을 보여줌

 const [contents, setContents] = React.useState('');
    
 const changeContents = (e) =>{
        setContents(e.target.value)

<Grid padding='16px'>
	<Input _onChange={changeContents} lable='게시글 내용' placeholder='게시글 작성' multiLine/>
</Grid>

post.js

import

• 날짜, 시간 객체를 다루는 moment 패키지 설치 및 import

import moment from 'moment';

초기값 날짜 받아오는 부분 변경

• moment().format() 사용
• .format() - 형식에 맞게 날짜를 문자열로 바꿔주는 내장함수

insert_dt : moment().format('YYYY-MM-DD hh:mm:ss')  

middleware

• firestore에 데이터 추가

• 이미 로그인 한 상태에서 데이터를 추가

  • user의 데이터는 리덕스에 저장된 값을 가져옴

  • id는 자동생성 된 것을 가져옴

const addPostFB = (contents='') => {
    return function(dispatch, getState, {history}){
        // 컬렉션 선택
        const postDB = firestore.collection('post')

        //store에 있는 user 정보를 가져옴
        const _user = getState().user.user;
        
        const user_info = {
            user_name: _user.user_name,
            user_id: _user.uid,
            user_profile: _user.user_profile
        }

        const _post = {
            ...initialPost,
            contents: contents,
            // 게시물이 만들어지는 시점 기록
            insert_dt : moment().format('YYYY-MM-DD hh:mm:ss')  

        }

        // firestore에 추가된 정보 저장
        postDB.add({...user_info, ..._post}).then((doc) =>{
            let post = {user_info, ..._post, id:doc.id};

        }).catch((err) =>{  // 실패했을 때
            console.log('작성 실패', err)
        })
    }
}

PostWrite.js

import

import { useDispatch } from 'react-redux';
import {actionCreators as postActions} from '../redux/modules/post';

addPostFB 호출

const addPost =() =>{
    dispatch(postActions.addPostFB(contents));
}

버튼 onclick 등록

• 버튼 클릭하면 상단의 addPost 함수 실행

<Button text='게시글 작성' _onClick={addPost}>게시글 작성</Button>

게시물 저장(redux)

post.js

middleware

• 리덕스에 데이터 저장

• 게시물 작성 후 페이지 이동

postDB.add({...user_info, ..._post}).then((doc) =>{
            let post = {user_info, ..._post, id:doc.id};
    
            dispatch(addPost(post));
            history.replace('/');
        }).catch((err) =>{  
            console.log('작성 실패', err)
        })

reducer

• redux에 데이터 추가

• .unshift() 사용하여 게시물을 배열의 맨 앞에 붙이기

[ADD_POST] : (state, action) => produce(state, (draft) =>{    draft.list.unshift(action.payload.post);
        })

export

const actionCreators = {
    setPost,
    addPost,
    getPostFB,
    addPostFB,
}

export {actionCreators}

게시물 순서 정리

PostList.js

작성한 게시물을 맨 위로

• PostList 페이지에 가면 기존의 게시물을 바로 가지고 오기 때문에, 게시물이 0개인 경우에만 기존의 게시물을 가져오게 함

• 리스트가 있으면 getPost를 하지 x

 React.useEffect(()=>{

    if(post_list.length === 0){
	dispatch(postActions.getPostFB());
    }
 }, []);