asSqr/markdown

## markdown
import { iso2TimeString } from '../../utils/util';
import Link from 'next/link';
import Head from 'next/head';
import { formatDate, unescapeHtml } from '../../utils/util';
import Header from '../../components/Header';
import Footer from '../../components/Footer';
import firebase, { db } from '../../firebase/firebase';
import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import { useStore } from '../../store';

export default function PostId(props) {
  const persistor = persistStore(props.store)

  return (
    <PersistGate persistor={persistor}>
      <PostData {...props} />
    </PersistGate>
  )
}

function PostData(props) {
  const [post, setPost] = useState(props.post);
  const user = useSelector(state => state.user).user;

  useEffect(() => {
    const f = async () => {
      if( !post || post.id === user.id ) {
        const snapShot = await db
          .collection('posts')
          .orderBy('created_at', 'desc')
          .get();

        let data = [];
        snapShot.forEach(doc => {
          const docData = doc.data();
          let obj = {};

          for( const key of Object.keys(docData) ) {
            if( key === 'created_at' || key === 'updated_at' )
              obj[key] = docData[key].toDate().toISOString();
            else
              obj[key] = docData[key];
          }

          obj.id = doc.id;

          data.push(obj);
        });

        setPost(data);
      }
    };

    f();
  }, []);

  return (
    <div>
      <Head>
        <title>{post.title} | @{post.author} | blut-schreibt</title>
      </Head>
      <Header />
      <main className="markdown-body article-container">
        <h1>{post.title}</h1>
        <p>{formatDate(new Date(post.created_at))}</p>
        <p><Link href={`../users/${post.author_id}`}><a>{'@' + post.author}</a></Link></p>
        <div
          className="article-body"
          dangerouslySetInnerHTML={{
            __html: `${unescapeHtml(post.body)}`,
          }}
        />
        <Link href="../">
          <button className="footer btn btn-primary">トップに戻る</button>
        </Link>
      </main>

      <Footer />
    </div>
  );
}

export const getServerSideProps = async context => {
  const id = context.params.id;

  let doc = await db
    .collection('posts')
    .doc(id)
    .get()

  const docData = doc.data();
  let obj = {};

  for( const key of Object.keys(docData) ) {
    if( key === 'created_at' || key === 'updated_at' )
      obj[key] = docData[key].toDate().toISOString();
    else
      obj[key] = docData[key];
  }

  obj.id = doc.id;

  return {
    props: {
      post: obj,
    },
  };
};
	import { iso2TimeString } from '../../utils/util';
	import Link from 'next/link';
	import Head from 'next/head';
	import { formatDate, unescapeHtml } from '../../utils/util';
	import Header from '../../components/Header';
	import Footer from '../../components/Footer';
	import firebase, { db } from '../../firebase/firebase';
	import { useState, useEffect } from 'react';
	import { useSelector } from 'react-redux';
	import { persistStore } from 'redux-persist';
	import { PersistGate } from 'redux-persist/integration/react';
	import { useStore } from '../../store';

	export default function PostId(props) {
	const persistor = persistStore(props.store)

	return (
	<PersistGate persistor={persistor}>
	<PostData {...props} />
	</PersistGate>
	)
	}

	function PostData(props) {
	const [post, setPost] = useState(props.post);
	const user = useSelector(state => state.user).user;

	useEffect(() => {
	const f = async () => {
	if( !post \|\| post.id === user.id ) {
	const snapShot = await db
	.collection('posts')
	.orderBy('created_at', 'desc')
	.get();

	let data = [];
	snapShot.forEach(doc => {
	const docData = doc.data();
	let obj = {};

	for( const key of Object.keys(docData) ) {
	if( key === 'created_at' \|\| key === 'updated_at' )
	obj[key] = docData[key].toDate().toISOString();
	else
	obj[key] = docData[key];
	}

	obj.id = doc.id;

	data.push(obj);
	});

	setPost(data);
	}
	};

	f();
	}, []);

	return (
	<div>
	<Head>
	<title>{post.title} \| @{post.author} \| blut-schreibt</title>
	</Head>
	<Header />
	<main className="markdown-body article-container">
	<h1>{post.title}</h1>
	<p>{formatDate(new Date(post.created_at))}</p>
	<p><Link href={`../users/${post.author_id}`}><a>{'@' + post.author}</a></Link></p>
	<div
	className="article-body"
	dangerouslySetInnerHTML={{
	__html: `${unescapeHtml(post.body)}`,
	}}
	/>
	<Link href="../">
	<button className="footer btn btn-primary">トップに戻る</button>
	</Link>
	</main>

	<Footer />
	</div>
	);
	}

	export const getServerSideProps = async context => {
	const id = context.params.id;

	let doc = await db
	.collection('posts')
	.doc(id)
	.get()

	const docData = doc.data();
	let obj = {};

	for( const key of Object.keys(docData) ) {
	if( key === 'created_at' \|\| key === 'updated_at' )
	obj[key] = docData[key].toDate().toISOString();
	else
	obj[key] = docData[key];
	}

	obj.id = doc.id;

	return {
	props: {
	post: obj,
	},
	};
	};