apptemp

import React, { useState, setState } from 'react';
import ReactDom from 'react-dom';
// useState 로 준 초기값을 제거
// setState 를 2개 하면 동시에 된다 첫번째꺼 후에 두번째거가 아니라.
//d


const initialStateComment = [{
    commentValue: '',
    postId: 0,
    commentId:0,
    commentArray: [],
}]

const initialStateList = [{
    listValue: '1',
    postId: -1,
}]

const App = () => {
    const [ list, setList ] = useState(initialStateList);
    const [ input, setInput ] = useState('');
    let [ counter, setCounter ] = useState(0);
    const { listValue, postId } = list
    let [ counterReply, setCounterReply ] = useState(0);
    const [ reply, setReply ] = useState('');
    const [ replyList, setReplyList ] = useState(initialStateComment);
    const [ comments, setComments ] = useState([]);

    const onChange = e => {
     
        setInput(e.target.value);
    };

    const onEditChange = (e) => {
        
        setReply(e.target.value);
    };

    const onEdit= (Id ) => {
        console.log(reply);
        
        setCounterReply(counterReply+1);
        console.log(postId)
        // console.log(counter+1);
        console.log(replyList.commentArray)
        console.log(replyList[postId]) 
        console.log(replyList) 
        console.log(replyList.filter(index => index.postId == Id))
        const fuckyou = replyList.filter(index => index.postId == Id)
        const array =[];
        fuckyou.forEach(el => array.push(el.commentValue) ) 
        setComments(array);
        console.log(comments)
        // setComments(replyList.filter(index => index.postId == Id).commentValue)
        setReplyList([...replyList, {  
            commentValue: reply,
            postId: Id,
            commentId: counterReply,
            commentArray: array,
            }])

    }

    const onInsert = () => {
 
        console.log(list)
        console.log(list.postId)
        // console.log(listItems)
        console.log(list.listItems)
        // console.log(listValue)
        console.log(input)
        setCounter(counter+1)
        setList( [... list, { listValue: input, postId: counter}])
        // setList({ ...listItems, input, postId: 0})
    };
    
    return (
        <div>
            <input type="text" value={input} onChange={onChange} id={0} />
            <button onClick={onInsert}>Add</button>
            <ul>
                {list.map(Item=> (
                    <li key={Item.postId}>
                        {Item.listValue}


                        {/* <button type="button"
                            onClick={() =>  console.log('remove')}
                        >
                            Remove
                        </button> */}

                        <input type="text" value={reply[postId]} onChange={e => onEditChange(e, Item.postId)} id={Item.postId} />
                        <button type="button" id ={Item.postId}
                            onClick={() => onEdit(Item.postId)}
                        >
                            Reply
                        </button>
                        {comments[Item.postId]}

                        {replyList.map((replyItem,i) =>(
                        <div key = {i}>
                            {comments[Item.postId]}
                            
                        </div>
                        ))
                        }

                    </li>
                ))}
            </ul>
        </div>
    );
};

export default App;


// const tasks = [
//     { name : "name1", id: 0},
//     { name : "name2", id: 1},
// ];

// // }
// const App = () => {
//     // Declare a new state variable, which we'll call "count"
//     const [state, setState] = useState([]);
//     const [count, setCount] = useState([]);
//     const [title, setTitle] = useState([]);
     
//     console.log(title)
//     console.log(state);

//     // useEffect(() => {
//     //     fetchTasks({ state, setState });
//     //   }, []);

//     return (
//         <>
//         <div>
//             <p>You clicked {count} times</p>
//             <button onClick={() => setCount(count + 1)}>
//                 Click me
//         </button>
//         <input type="text" value={title}
//           onChange={e => setTitle(e.target.value)}
//         />
//         <button type="button"
//           onClick={() =>setState(title) }
//         >
//             add
//         </button>
        
//       </div>
//       <li>
//       {state.map((value, index) => (
//           <li key={index}>{value}</li>
//         ))}
//       </li>
//       </>
//     );
// }

// export default App