React블로그

리엑트 블로그 만들기 13 - 라우트

리엑트 블로그 만들기 13 - 라우트

import React from 'react';

const CategoryResult = () => {
    return <h1>CategoryResult</h1>
}

export default CategoryResult;
import { Fragment, useEffect } from "react";
import { Helmet } from "react-helmet";
import { useDispatch, useSelector } from "react-redux";
import { Row, Spinner } from 'reactstrap';
import PostCardOne from "../../components/post/PostCardOne";
import { POSTS_LOADING_REQUEST } from "../../redux/types";

const PostCardList = () => {
    const { posts } = useSelector((state) => state.post)
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch({ type: POSTS_LOADING_REQUEST })
    }, [dispatch])

    return (
        <Fragment>
            <Helmet title="Home" />
            <Row>
                {posts ? <PostCardOne posts={posts} /> : <Spinner />}
            </Row>
        </Fragment>
    )
}

export default PostCardList;
import React from 'react';

const PostDetail = () => {
    return (
        <div>
            PostDetail
        </div>
    )
}

export default PostDetail;
import React from 'react';

const PostEdit = () => {
    return (
        <div>
            PostEdit
        </div>
    )
}

export default PostEdit;
import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Col, Form, FormGroup, Label, Progress, Button, Input } from 'reactstrap'
import { CKEditor } from "@ckeditor/ckeditor5-react"
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import { editorConfiguration } from '../../components/editor/EditorConfig'
import Myinit from '../../components/editor/UploadAdapter'

const PostWrite = () => {
    const { isAuthenticated } = useSelector((state) => state.auth)
    const [form, setValues] = useState({ title: "", contents: "", fileUrl: "" })
    const diapatch = useDispatch

    const onChange = (e) => {
        setValues({
            ...form,
            [e.target.name]: e.target.value
        })
    }

    const onSubmit = async (e) => {
        await e.preventDefault()
        const { title, contents, fileUrl, category } = form
    }

    const getDataFromCKEditor = (event, editor) => {
        console.log("editor")
    }

    return (
        <div>
            {isAuthenticated ? (
                <Form onSubmit={onSubmit}>
                    <FormGroup className="mb-3">
                        <Label for="title">Title</Label>
                        <Input
                            type="text"
                            name="title"
                            id="title"
                            className="form-control"
                            onChange={onChange}
                        />
                    </FormGroup>
                    <FormGroup className="mb-3">
                        <Label for="category">Category</Label>
                        <Input
                            type="text"
                            name="category"
                            id="category"
                            className="form-control"
                            onChange={onChange}
                        />
                    </FormGroup>
                    <FormGroup className="mb-3">
                        <Label for="content">Content</Label>
                        <CKEditor
                            editor={ClassicEditor}
                            config={editorConfiguration}
                            onInit={Myinit}
                            onBlur={getDataFromCKEditor}
                        />
                        <Button
                            color="success"
                            block
                            className="mt-3 col-md-2 offset-md-10 mb-3"
                        >
                            제출하기
                        </Button>
                    </FormGroup>
                </Form>
            ) : (
                <Col width={50} className="p-5 m-5">
                    <Progress animated color="info" value={100} />
                </Col>
            )}
        </div>
    )
}

export default PostWrite
import React from 'react'

const Profile = () => {
    <div>
        Profile
    </div>
}

export default Profile
import React from 'react'

const Search = () => {
    return (
        <div>
            Search
        </div>
    )
}

export default Search
import React, { Fragment } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { Container } from 'reactstrap';
import AppNavbar from "../components/AppNavbar";
import Footer from '../components/Footer';
import Header from '../components/Header';
import CategoryResult from './normalRoute/CategoryResult';
import PostCardList from './normalRoute/PostCardList';
import PostDetail from './normalRoute/PostDetail';
import PostWrite from './normalRoute/PostWrite';
import Search from './normalRoute/Search';

const Router = () => (
    <Fragment>
        <AppNavbar />
        <Header />
        <Container id="main-body">
            <Switch>
                <Route path='/' exact component={PostCardList} />
                <Route path='/post' exact component={PostWrite} />
                <Route path='/post/:id' exact component={PostDetail} />
                <Route path='/post/category/:categoryName' exact component={CategoryResult} />
                <Route path='/search/:searchTerm' exact component={Search} />
                <Redirect from="*" to="/" />
            </Switch>
            {/* <h1>Hello Body</h1> */}
        </Container>
        <Footer />
    </Fragment>
)

export default Router
Share