jaehyuk-jang

Add pages for allinone web

1 +import React from 'react';
2 +import { useRouter } from 'next/router';
3 +import { useQuery } from '@apollo/client';
4 +import { GET_POST_WITH_COMMENTS } from '@src/gql/post-with-comments';
5 +import Content from '@src/views/Post/Content';
6 +import Comments from '@src/views/Post/Comment';
7 +
8 +export default function ArticlePage() {
9 + const { query } = useRouter();
10 +
11 + if (!query.num) {
12 + return null; // or redirect 404 ?
13 + }
14 +
15 + const { error, data } = useQuery(GET_POST_WITH_COMMENTS, {
16 + variables: {
17 + post_id: Number(query.num),
18 + inputComment: { post_id: Number(query.num) },
19 + },
20 + });
21 + if (error) console.log(JSON.stringify(error, null, 2));
22 +
23 + const post = data?.getPost || {};
24 +
25 + return (
26 + <div className={'outer-container post-container'}>
27 + <Content {...post} />
28 + <Comments comments={data?.getSomeComments || []} postId={post.id} />
29 + </div>
30 + );
31 +}
1 +import React from 'react';
2 +import { useRouter } from 'next/router';
3 +import { useMutation } from '@apollo/client';
4 +import { CREATE_POST } from '@src/gql/create-post';
5 +import { Form, Input } from 'antd';
6 +import TextArea from 'antd/lib/input/TextArea';
7 +
8 +import { CreateButtons, CreateInputs } from '@src/views/Create';
9 +
10 +export default function CreatePage() {
11 + const router = useRouter();
12 + const [createPost] = useMutation(CREATE_POST);
13 + const [form] = Form.useForm();
14 + const [contents, setContents] = React.useState({
15 + title: '',
16 + description: '',
17 + });
18 +
19 + const handleChange = (e) => {
20 + const {
21 + target: { name, value },
22 + } = e;
23 +
24 + setContents({
25 + ...contents,
26 + [name]: value,
27 + });
28 + };
29 +
30 + const handleSubmit = async (e) => {
31 + e.preventDefault();
32 + const { title, description } = contents;
33 + const {
34 + query: { name },
35 + } = router;
36 +
37 + if (!(title && description)) {
38 + alert('필수항목을 모두 입력해주세요');
39 + return;
40 + }
41 +
42 + const { data } = await createPost({
43 + variables: {
44 + input: {
45 + category: name,
46 + content: description,
47 + title,
48 + },
49 + },
50 + });
51 +
52 + router.push(`/${name}/article?num=${data.createPost.id}`);
53 + };
54 +
55 + const handleCancel = () => {
56 + router.back();
57 + };
58 +
59 + return (
60 + <div className={'outer-container create-container'}>
61 + <div className={'form-container'}>
62 + <Form form={form} layout={'vertical'}>
63 + <CreateInputs
64 + forms={[
65 + {
66 + form: {
67 + label: '글제목',
68 + tooltip: '게시글 제목은 필수항목입니다',
69 + },
70 + input: {
71 + Item: Input,
72 + value: 'title',
73 + onChange: handleChange,
74 + },
75 + },
76 + {
77 + form: {
78 + label: '글내용',
79 + tooltip: '게시글의 내용은 필수항목입니다',
80 + },
81 + input: {
82 + Item: TextArea,
83 + value: 'description',
84 + id: 'form-textarea',
85 + onChange: handleChange,
86 + },
87 + },
88 + ]}
89 + />
90 + <CreateButtons
91 + buttons={[
92 + {
93 + title: 'Submit',
94 + onClick: handleSubmit,
95 + type: 'primary',
96 + className: 'form-button submit-button',
97 + },
98 + {
99 + title: 'Cancel',
100 + onClick: handleCancel,
101 + className: 'form-button cancel-button',
102 + },
103 + ]}
104 + />
105 + </Form>
106 + </div>
107 + </div>
108 + );
109 +}
1 -import { AppProps } from "next/app"; 1 +import Router from 'next/router';
2 -import { ApolloProvider } from "@apollo/client"; 2 +import { AppProps } from 'next/app';
3 -import { useApollo } from "../lib/apollo"; 3 +import Head from 'next/head';
4 -import "antd/dist/antd.css"; 4 +
5 +import { ApolloProvider } from '@apollo/client';
6 +import { useApollo } from '../lib/apollo';
7 +
8 +import 'antd/dist/antd.css';
9 +import '../assets/styles/app.scss';
10 +import '../assets/styles/main.scss';
11 +import '../assets/styles/category.scss';
12 +import '../assets/styles/post.scss';
13 +import '../assets/styles/create.scss';
14 +
15 +import Layout from 'antd/lib/layout/layout';
16 +import Header from '@components/Header';
17 +import Loader, { startLoading, finishLoading } from '@components/Loader';
18 +
19 +Router.events.on('routeChangeStart', startLoading);
20 +Router.events.on('routeChangeComplete', finishLoading);
21 +Router.events.on('routeChangeError', finishLoading);
5 22
6 export default function App({ Component, pageProps }: AppProps) { 23 export default function App({ Component, pageProps }: AppProps) {
7 const apolloClient = useApollo(pageProps); 24 const apolloClient = useApollo(pageProps);
8 25
9 return ( 26 return (
10 - <ApolloProvider client={apolloClient}> 27 + <>
11 - <Component {...pageProps} /> 28 + <Head>
12 - </ApolloProvider> 29 + <meta
30 + name={'viewport'}
31 + content={
32 + 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
33 + }
34 + />
35 + </Head>
36 + <Loader />
37 + <Layout className={'app-layout'}>
38 + <ApolloProvider client={apolloClient}>
39 + <Header />
40 + <Component {...pageProps} />
41 + </ApolloProvider>
42 + </Layout>
43 + </>
13 ); 44 );
14 } 45 }
......
1 -import Link from "next/link";
2 -
3 -export default function About() {
4 - return (
5 - <div>
6 - Welcome to the about page. Go to the{" "}
7 - <Link href="/">
8 - <a>Home</a>
9 - </Link>{" "}
10 - page.
11 - </div>
12 - );
13 -}
1 +import { useRouter } from 'next/router';
2 +import { useQuery } from '@apollo/client';
3 +
4 +import { GET_SOME_POSTS } from '@src/gql/get-some-posts';
5 +
6 +import Category from '@src/views/Category';
7 +
8 +export default function CategoryPage() {
9 + const {
10 + query: { name },
11 + } = useRouter();
12 +
13 + const { error, data } = useQuery(GET_SOME_POSTS, {
14 + variables: {
15 + input: { category: name },
16 + },
17 + });
18 +
19 + if (error) console.log(JSON.stringify(error, null, 2));
20 +
21 + const getCategoryPosts = data?.getSomePosts || [];
22 + const articleList = getCategoryPosts.filter((post) => post.category === name);
23 +
24 + return <Category category={name} articleList={articleList} />;
25 +}
1 -import { GetPostInput, Post } from "@graphql-community/shared"; 1 +import { useQuery } from '@apollo/client';
2 -import { useQuery, gql } from "@apollo/client";
3 -import { message } from "antd";
4 2
5 -const GET_SOME_POST_QUERY = gql` 3 +import { GET_ALL_POSTS } from '@src/gql/get-all-posts';
6 - query GetSomePosts($getSomePostInput: GetPostInput!) {
7 - getSomePosts(input: $getSomePostInput) {
8 - author
9 - category
10 - }
11 - }
12 -`;
13 4
14 -const Index = () => { 5 +import Main from '@views/Main';
15 - const { data, error } = useQuery< 6 +
16 - { getSomePosts: Post[] }, 7 +export default function IndexPage() {
17 - { getSomePostInput: GetPostInput } 8 + const { error, data } = useQuery(GET_ALL_POSTS);
18 - >(GET_SOME_POST_QUERY, {
19 - variables: {
20 - getSomePostInput: {
21 - id: 1,
22 - },
23 - },
24 - });
25 if (error) console.log(JSON.stringify(error, null, 2)); 9 if (error) console.log(JSON.stringify(error, null, 2));
26 10
27 - return ( 11 + let categories = [];
28 - <> 12 + let getAllPosts = data?.getAllPosts || [];
29 - <div onClick={() => message.success("hi")}>index </div> 13 +
30 - <div>{data?.getSomePosts[0].author}</div> 14 + getAllPosts.forEach((post) => {
31 - <div>{data?.getSomePosts[0].category}</div> 15 + if (!categories.find((category) => post.category === category)) {
32 - </> 16 + categories.push(post.category);
33 - ); 17 + }
34 -}; 18 + });
35 19
36 -export default Index; 20 + return <Main categories={categories} posts={getAllPosts} />;
21 +}
......