├── notes
└── .gitkeep
├── public
├── style.css
├── favicon.ico
├── chevron-down.svg
├── chevron-up.svg
├── cross.svg
├── checkmark.svg
├── logo.svg
└── index.html
├── server
├── package.json
└── api.server.js
├── credentials.js
├── src
├── FancyBlogPost.js
├── blog
│ └── blog-api.js
├── Comment.client.js
├── App.server.js
├── db.server.js
├── LocationContext.client.js
├── BlogPost.server.js
├── index.client.js
├── BlogPostsList.server.js
├── LikeButton.client.js
├── Cache.client.js
└── Root.client.js
├── scripts
├── init_db.sh
├── build.js
└── seed.js
├── .prettierignore
├── .prettierrc.js
├── .gitignore
├── README.md
├── LICENSE
├── db.json
├── package.json
└── CODE_OF_CONDUCT.md
/notes/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/style.css:
--------------------------------------------------------------------------------
1 | .blog-post {
2 | padding: 10px;
3 | }
4 |
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "commonjs",
3 | "main": "./api.server.js"
4 | }
5 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sidthesloth92/server-components-demo/main/public/favicon.ico
--------------------------------------------------------------------------------
/credentials.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | host: process.env.DB_HOST || 'localhost',
3 | database: 'notesapi',
4 | user: 'notesadmin',
5 | password: 'password',
6 | port: '5432',
7 | };
8 |
--------------------------------------------------------------------------------
/public/chevron-down.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/chevron-up.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/cross.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/checkmark.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/FancyBlogPost.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function FancyBlogPost({children}) {
4 | return (
5 |
9 | {children}
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/blog/blog-api.js:
--------------------------------------------------------------------------------
1 | import {fetch} from 'react-fetch';
2 |
3 | export const getBlogPosts = function() {
4 | return fetch('http://localhost:3000/posts').json();
5 | };
6 |
7 | export const getBlogPost = function(id) {
8 | return fetch(`http://localhost:3000/posts/${id}`).json();
9 | };
10 |
--------------------------------------------------------------------------------
/src/Comment.client.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function Comment() {
4 | const [comment, setComment] = React.useState('');
5 | return (
6 | setComment(value)}
9 | />
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/scripts/init_db.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 |
4 | psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" <<-EOSQL
5 | DROP TABLE IF EXISTS notes;
6 | CREATE TABLE notes (
7 | id SERIAL PRIMARY KEY,
8 | created_at TIMESTAMP NOT NULL,
9 | updated_at TIMESTAMP NOT NULL,
10 | title TEXT,
11 | body TEXT
12 | );
13 | EOSQL
14 |
--------------------------------------------------------------------------------
/src/App.server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 | import BlogPostsList from './BlogPostsList.server';
9 |
10 | export default function App() {
11 | return ;
12 | }
13 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | /node_modules
3 | /.pnp
4 | .pnp.js
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 | /dist
12 |
13 | # misc
14 | .DS_Store
15 | .eslintcache
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
25 | *.html
26 | *.json
27 | *.md
28 |
--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/db.server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {Pool} from 'react-pg';
10 | import credentials from '../credentials';
11 |
12 | // Don't keep credentials in the source tree in a real app!
13 | export const db = new Pool(credentials);
14 |
--------------------------------------------------------------------------------
/src/LocationContext.client.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | import {createContext, useContext} from 'react';
10 |
11 | export const LocationContext = createContext();
12 | export function useLocation() {
13 | return useContext(LocationContext);
14 | }
15 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | */
8 |
9 | 'use strict';
10 |
11 | module.exports = {
12 | arrowParens: 'always',
13 | bracketSpacing: false,
14 | singleQuote: true,
15 | jsxBracketSameLine: true,
16 | trailingComma: 'es5',
17 | printWidth: 80,
18 | };
19 |
--------------------------------------------------------------------------------
/src/BlogPost.server.js:
--------------------------------------------------------------------------------
1 | import {getBlogPost} from './blog/blog-api';
2 | import LikeButton from './LikeButton.client';
3 | import Comment from './Comment.client';
4 |
5 | export default function BlogPost({blog: {id}}) {
6 | const blog = getBlogPost(id);
7 | return (
8 |
9 |
{blog.title}
10 |
{blog.markdown}
11 |
12 |
13 |
43 |
Application Error
44 |
{error.stack}
45 |