항해 99 - 2022.02.15.THU (수정 기능)

이번 챕터 일정

• 02/11 (금) 19:00 까지 : S.A. 제출 완료✅
• 02/12 (토) 오전 : S.A. 서면 피드백 확인✅
  • 백엔드 스코프가 너무 좁다고 하심
  • 기능이 좀더 추가 되어야 할듯
• 02/14 (월) 저녁 : 팀별 프로젝트 중간 멘토링✅
• 02/17 (목) 저녁 : 팀별 프로젝트 회고 멘토링
• 02/18 (금) 09:00 : 클론코딩 주차 발제
  

오늘 내가 할 일 

• 수정 기능 구현 ✅
• 알고리즘 문제풀고 정리 ✅

하루 종일 수정 기능 하나로 애먹은 하루,,,,,, 이것저것 만지다 보면 디자인도 바꾸고 싶고 욕심만 그득그득 생긴다...
확실히 서버가 있으니까 코드작성시 어려움이 좀 적어지는 느낌!!!!! 이게 얼마나 다행인지 몰라,,,,흐규규규ㅠㄱ
파이어 베이스로 혼자 할 때는 정말 힘들었는데 서버랑 같이 하니까 좀 나아진 느낌이다. 

 

수정하는 페이지를 따로 제작했다. 

서버에서 값을 받아와서 리로딩돼도 값이 휘발되지 않도록 하는 게 관건 

/PostEdit.js

import React from "react";
import { Grid, Text, Button, Image, Input } from "../elements/Index";
import { actionCreators as postActions } from "../redux/modules/post";
import { useSelector, useDispatch } from "react-redux";
import styled from "styled-components";
import { history} from '../redux/configureStore'

const PostEdit = (props) => {

    const dispatch = useDispatch();   
    const post_id =props.match.params.postid;
    
    React.useEffect(()=>{
        if(!post){
            history.replace('/')
            return;
        }
        dispatch(postActions.getOnePostFB(post_id)) 
    },[])

    const post = useSelector((state)=>state.post.detail)
    
    const [title, setTitle] = React.useState(post? post.title:"");
    const [location, setLocation] = React.useState(post?post.location:"");
    const [comment, setComment] = React.useState(post?post.comment:"");

    return (
        <React.Fragment>
            <Grid width="50%" margin="30px auto" padding="16px" box_shadow border_radius="10px">
            <Grid padding="16px">
                <Text margin="0px" size="36px" bold center>
                  게시글 수정
                </Text>
            </Grid>
            <Grid margin="0px 0px 50px 0px">
                <Style>
                    <Image
                        margin="10px 0px 0px 0px"
                        shape="rectangle"
                        width="50%"
                        src={post.image_url}
                    />
                </Style>
            </Grid>

           <Grid margin="0px 0px 20px 0px">
                <Input
                    defaultValue={post.title}
                    _onChange={(e)=>{setTitle(e.target.value)}}
                    label="가게 이름"
                    placeholder="가게 이름을 적어주세요"
                />
            </Grid>

            <Grid margin="0px 0px 20px 0px">
                <Input
                    defaultValue={post.location}
                    _onChange={(e)=>{setLocation(e.target.value)}}
                    label="위치"
                    placeholder="위치를 적어주세요"
                />

            </Grid>

            <Grid>
                <Input
                    defaultValue={post.comment}
                    _onChange={(e)=>{setComment(e.target.value)}}
                    label="한줄 평"
                    placeholder="한줄 평을 적어주세요"
                />

            </Grid>
          
            <Grid padding="16px" is_end >
                <Button height="45px" width="20%" text="게시글 수정" _onClick={()=>{dispatch(postActions.editPostFB(post_id,{title:title, location:location, comment:comment}))}}></Button>
            </Grid>

            </Grid>
          

        </React.Fragment>
    );
}

const Style = styled.div`
  width: 100%;
  min-height: 150px;
  box-sizing: border-box;
`
export default PostEdit

/post.js

//액션함수 
const EDIT_POST = "EDIT_POST";

//액션생성함수 
const editPost = createAction(EDIT_POST, (post_id, post) => ({ post_id, post }))

//미들웨어
const editPostFB =(post_id=null, post={})=>{
    return function(dispatch ,getState, {history}){
        window.alert("수정되었습니다")
        instance.patch(`/api/getpost/modify/${post_id}`,
        { title :post.title, location:post.location, comment:post.comment,})
        .then(function(response){
            dispatch(editPost(post_id, {...post}))
            history.replace('/')
        }).catch((error)=>{
            console.log(error)
        })
    }}
    
//리덕스    
export default handleActions(
   {
      [EDIT_POST]: (state, action) => produce(state, (draft) => {
         let idx = draft.list.findIndex((p) => p.post_id === action.payload.post_id)
         draft.list[idx] = { ...draft.list[idx], ...action.payload.post }
       })
   },
   initialState
)