投稿の作成

ログインの確認

PostWrite.js

import

import { useSelector } from 'react-redux';

ログインの確認

App.jsはセッションを確認したのでis login

のみ確認

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

ログインしていません

投稿の作成は許可されていません

「≪ログイン｜Login｜emdw≫」ボタンをクリックしてホームページを置換し、以前のページが再び表示されないようにします.
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

投稿入力値の保存

入力ウィンドウに入力値

がリアルタイムで表示される.

 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

日、タイムオブジェクトを含むインスタントパッケージ

のインストールとインポート

import moment from 'moment';

初期値の日付を変更する受信部

moment().format()

の使用

.format()-フォーマットに一致する日付を文字列に変換する内蔵関数

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

middleware

Firestoreへのデータの追加

ログインした場合のデータの追加

userのデータ取得reduceに格納された値

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());
    }
 }, []);