jaehyuk-jang

Add pages for allinone web

import React from 'react';
import { useRouter } from 'next/router';
import { useQuery } from '@apollo/client';
import { GET_POST_WITH_COMMENTS } from '@src/gql/post-with-comments';
import Content from '@src/views/Post/Content';
import Comments from '@src/views/Post/Comment';
export default function ArticlePage() {
const { query } = useRouter();
if (!query.num) {
return null; // or redirect 404 ?
}
const { error, data } = useQuery(GET_POST_WITH_COMMENTS, {
variables: {
post_id: Number(query.num),
inputComment: { post_id: Number(query.num) },
},
});
if (error) console.log(JSON.stringify(error, null, 2));
const post = data?.getPost || {};
return (
<div className={'outer-container post-container'}>
<Content {...post} />
<Comments comments={data?.getSomeComments || []} postId={post.id} />
</div>
);
}
import React from 'react';
import { useRouter } from 'next/router';
import { useMutation } from '@apollo/client';
import { CREATE_POST } from '@src/gql/create-post';
import { Form, Input } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { CreateButtons, CreateInputs } from '@src/views/Create';
export default function CreatePage() {
const router = useRouter();
const [createPost] = useMutation(CREATE_POST);
const [form] = Form.useForm();
const [contents, setContents] = React.useState({
title: '',
description: '',
});
const handleChange = (e) => {
const {
target: { name, value },
} = e;
setContents({
...contents,
[name]: value,
});
};
const handleSubmit = async (e) => {
e.preventDefault();
const { title, description } = contents;
const {
query: { name },
} = router;
if (!(title && description)) {
alert('필수항목을 모두 입력해주세요');
return;
}
const { data } = await createPost({
variables: {
input: {
category: name,
content: description,
title,
},
},
});
router.push(`/${name}/article?num=${data.createPost.id}`);
};
const handleCancel = () => {
router.back();
};
return (
<div className={'outer-container create-container'}>
<div className={'form-container'}>
<Form form={form} layout={'vertical'}>
<CreateInputs
forms={[
{
form: {
label: '글제목',
tooltip: '게시글 제목은 필수항목입니다',
},
input: {
Item: Input,
value: 'title',
onChange: handleChange,
},
},
{
form: {
label: '글내용',
tooltip: '게시글의 내용은 필수항목입니다',
},
input: {
Item: TextArea,
value: 'description',
id: 'form-textarea',
onChange: handleChange,
},
},
]}
/>
<CreateButtons
buttons={[
{
title: 'Submit',
onClick: handleSubmit,
type: 'primary',
className: 'form-button submit-button',
},
{
title: 'Cancel',
onClick: handleCancel,
className: 'form-button cancel-button',
},
]}
/>
</Form>
</div>
</div>
);
}
import { AppProps } from "next/app";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "../lib/apollo";
import "antd/dist/antd.css";
import Router from 'next/router';
import { AppProps } from 'next/app';
import Head from 'next/head';
import { ApolloProvider } from '@apollo/client';
import { useApollo } from '../lib/apollo';
import 'antd/dist/antd.css';
import '../assets/styles/app.scss';
import '../assets/styles/main.scss';
import '../assets/styles/category.scss';
import '../assets/styles/post.scss';
import '../assets/styles/create.scss';
import Layout from 'antd/lib/layout/layout';
import Header from '@components/Header';
import Loader, { startLoading, finishLoading } from '@components/Loader';
Router.events.on('routeChangeStart', startLoading);
Router.events.on('routeChangeComplete', finishLoading);
Router.events.on('routeChangeError', finishLoading);
export default function App({ Component, pageProps }: AppProps) {
const apolloClient = useApollo(pageProps);
return (
<>
<Head>
<meta
name={'viewport'}
content={
'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
}
/>
</Head>
<Loader />
<Layout className={'app-layout'}>
<ApolloProvider client={apolloClient}>
<Header />
<Component {...pageProps} />
</ApolloProvider>
</Layout>
</>
);
}
......
import Link from "next/link";
export default function About() {
return (
<div>
Welcome to the about page. Go to the{" "}
<Link href="/">
<a>Home</a>
</Link>{" "}
page.
</div>
);
}
import { useRouter } from 'next/router';
import { useQuery } from '@apollo/client';
import { GET_SOME_POSTS } from '@src/gql/get-some-posts';
import Category from '@src/views/Category';
export default function CategoryPage() {
const {
query: { name },
} = useRouter();
const { error, data } = useQuery(GET_SOME_POSTS, {
variables: {
input: { category: name },
},
});
if (error) console.log(JSON.stringify(error, null, 2));
const getCategoryPosts = data?.getSomePosts || [];
const articleList = getCategoryPosts.filter((post) => post.category === name);
return <Category category={name} articleList={articleList} />;
}
import { GetPostInput, Post } from "@graphql-community/shared";
import { useQuery, gql } from "@apollo/client";
import { message } from "antd";
import { useQuery } from '@apollo/client';
const GET_SOME_POST_QUERY = gql`
query GetSomePosts($getSomePostInput: GetPostInput!) {
getSomePosts(input: $getSomePostInput) {
author
category
}
}
`;
import { GET_ALL_POSTS } from '@src/gql/get-all-posts';
const Index = () => {
const { data, error } = useQuery<
{ getSomePosts: Post[] },
{ getSomePostInput: GetPostInput }
>(GET_SOME_POST_QUERY, {
variables: {
getSomePostInput: {
id: 1,
},
},
});
import Main from '@views/Main';
export default function IndexPage() {
const { error, data } = useQuery(GET_ALL_POSTS);
if (error) console.log(JSON.stringify(error, null, 2));
return (
<>
<div onClick={() => message.success("hi")}>index </div>
<div>{data?.getSomePosts[0].author}</div>
<div>{data?.getSomePosts[0].category}</div>
</>
);
};
let categories = [];
let getAllPosts = data?.getAllPosts || [];
getAllPosts.forEach((post) => {
if (!categories.find((category) => post.category === category)) {
categories.push(post.category);
}
});
export default Index;
return <Main categories={categories} posts={getAllPosts} />;
}
......