Skip to content

Commit 5fbbc82

Browse files
flovflov
committed
⏪ reverts to ssr for blog
1 parent fc8d02f commit 5fbbc82

File tree

6 files changed

+76
-65
lines changed

6 files changed

+76
-65
lines changed

‎pages/blog/[id]/edit.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,14 @@ import Head from 'next/head';
1212

1313
export const getServerSideProps: GetServerSideProps = async ({ query }) => {
1414
const id = query.id;
15-
const post = await getPost(id as string);
16-
return {
17-
props: { post: JSON.parse(JSON.stringify(post.data)) },
18-
};
15+
try {
16+
const post = await getPost(id as string);
17+
return {
18+
props: { post: JSON.parse(JSON.stringify(post.data)) },
19+
};
20+
} catch (error) {
21+
return { notFound: true };
22+
}
1923
};
2024

2125
const EditBlogPost: NextPage<{ post: Post }> = ({ post }) => {

‎pages/blog/[id]/index.tsx

+25-26
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,37 @@
1-
import { GetServerSideProps, NextPage } from 'next';
2-
import React, { useEffect, useState } from 'react';
3-
import { Post } from '../../../src/types/Post';
4-
import { getPost } from '../../../src/db/posts';
1+
import React from 'react';
2+
3+
import Head from 'next/head';
54
import ReactMarkdown from 'react-markdown';
6-
import CommentSection from '../../../src/components/Blog/CommentSection';
7-
import PostComponent from '../../../src/components/Blog/Post';
85
import { Breadcrumb } from 'flowbite-react';
96
import { FaHome } from 'react-icons/fa';
10-
import Head from 'next/head';
11-
import { createPostComment } from '../../../src/db/comments';
7+
import { GetServerSideProps, NextPage } from 'next';
128

13-
export const getServerSideProps: GetServerSideProps = async ({ query }) => {
14-
const id = query?.id as string;
9+
import CommentSection from '@/components/Blog/CommentSection';
10+
import PostComponent from '@/components/Blog/Post';
11+
import { Post } from '@/types/Post';
12+
import { createPostComment } from '@/db/comments';
13+
import { getPost } from '@/db/posts';
1514

16-
return {
17-
props: {
18-
id,
19-
},
20-
};
21-
};
15+
export const getServerSideProps: GetServerSideProps = async ({ query }) => {
16+
try {
17+
const id = query?.id;
2218

23-
const BlogPost: NextPage<{ id: string }> = ({ id }) => {
24-
const [post, setPost] = useState<Post>();
19+
const res = await getPost(id as string);
20+
const post = res.data;
2521

26-
useEffect(() => {
27-
const fetchPost = async () => {
28-
const res = await getPost(id as string);
29-
setPost(JSON.parse(JSON.stringify(res.data)));
22+
return {
23+
props: {
24+
post: JSON.parse(JSON.stringify(post)),
25+
},
3026
};
31-
fetchPost();
32-
}, []);
33-
34-
if (!post) return <div>Loading...</div>;
27+
} catch (error) {
28+
return {
29+
notFound: true,
30+
};
31+
}
32+
};
3533

34+
const BlogPost: NextPage<{ post: Post }> = ({ post }) => {
3635
return (
3736
<main className="pb-16 bg-white lg:pb-24 dark:bg-gray-900">
3837
<Head>

‎pages/blog/index.tsx

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
1-
import { GetStaticProps, NextPage } from 'next';
1+
import React from 'react';
2+
23
import Head from 'next/head';
34
import Link from 'next/link';
4-
import React, { useEffect, useState } from 'react';
5-
import PostCard from '../../src/components/Blog/PostCard';
6-
import { getPosts } from '../../src/db/posts';
7-
import { Post } from '../../src/types/Post';
5+
import { GetStaticProps, NextPage } from 'next';
86

9-
const Blog: NextPage = () => {
10-
const [posts, setPosts] = useState<Post[]>();
7+
import PostCard from '@/components/Blog/PostCard';
8+
import { Post } from '@/types/Post';
9+
import { getPosts } from '@/db/posts';
1110

12-
useEffect(() => {
13-
const fetchPosts = async () => {
14-
const res = await getPosts();
15-
setPosts(res.data);
11+
export const getStaticProps: GetStaticProps = async () => {
12+
try {
13+
const posts = await getPosts();
14+
return {
15+
props: { posts: JSON.parse(JSON.stringify(posts.data)) },
1616
};
17-
fetchPosts();
18-
}, []);
19-
20-
if (!posts) return null;
17+
} catch (error) {
18+
return {
19+
props: { posts: [] },
20+
};
21+
}
22+
};
2123

24+
const Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
2225
return (
2326
<>
2427
<Head>

‎pages/blog/new.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react';
22

3+
import Head from 'next/head';
34
import { Formik } from 'formik';
45
import { NextPage } from 'next';
56
import { useRouter } from 'next/router';
6-
import PostForm from '../../src/components/Blog/PostForm';
7-
import { useToasts } from '../../src/components/contexts/ToastContext';
8-
import { createPost } from '../../src/db/posts';
9-
import Head from 'next/head';
7+
8+
import PostForm from '@/components/Blog/PostForm';
9+
import { createPost } from '@/db/posts';
10+
import { useToasts } from '@/components/contexts/ToastContext';
1011

1112
const New: NextPage = () => {
1213
const { addToast } = useToasts();

‎pages/hitchhikers/[id]/send_message.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import React from 'react';
2+
23
import Head from 'next/head';
4+
import { Alert } from 'flowbite-react';
35
import { Formik, FormikValues } from 'formik';
46
import { GetServerSideProps, NextPage } from 'next';
5-
import { SendMessageForm } from '../../../src/components/Forms';
6-
import { capitalize } from '../../../src/utils';
7-
import { sendMessage } from '../../../src/db/users';
8-
import { useToasts } from '../../../src/components/contexts/ToastContext';
9-
import { useAuth } from '../../../src/components/contexts/AuthContext';
10-
import { Alert } from 'flowbite-react';
117
import { useRouter } from 'next/router';
128

9+
import { SendMessageForm } from '@/components/Forms';
10+
import { capitalize } from '@/utils';
11+
import { sendMessage } from '@/db/users';
12+
import { useAuth } from '@/components/contexts/AuthContext';
13+
import { useToasts } from '@/components/contexts/ToastContext';
14+
1315
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
1416
const id = params?.id;
1517

‎pages/hitchhikers/edit_profile.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1+
import React, { useState } from 'react';
2+
3+
import Head from 'next/head';
4+
import Image from 'next/image';
15
import { Alert, Button } from 'flowbite-react';
26
import { Formik, FormikValues } from 'formik';
3-
import { GoogleApiWrapper } from 'google-maps-react';
47
import { GetServerSideProps, NextPage } from 'next';
8+
import { GoogleApiWrapper } from 'google-maps-react';
59
import { useRouter } from 'next/router';
6-
import React, { useState } from 'react';
7-
import { useAuth } from '../../src/components/contexts/AuthContext';
8-
import { useToasts } from '../../src/components/contexts/ToastContext';
9-
import EditProfileForm from '../../src/components/EditProfileForm';
10-
import LoadingContainer from '../../src/components/LoadingContainer';
11-
import { updateUser } from '../../src/db/users';
12-
import { profilePicture, showErrors } from '../../src/utils/viewHelpers';
13-
import Image from 'next/image';
14-
import Head from 'next/head';
10+
11+
import EditProfileForm from '@/components/EditProfileForm';
12+
import LoadingContainer from '@/components/LoadingContainer';
13+
import { profilePicture, showErrors } from '@/utils/viewHelpers';
14+
import { updateUser } from '@/db/users';
15+
import { useAuth } from '@/components/contexts/AuthContext';
16+
import { useToasts } from '@/components/contexts/ToastContext';
1517

1618
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
1719
try {

0 commit comments

Comments
 (0)