Better spinners and a couple of other fixes.

.gitignore

@@ -18,4 +18,5 @@ server/deploy/local/create-secrets.sh
 server/jest.config.js
 /client/src/gql/
 deploy/blogql/charts
-create-secrets.sh
+**/create-secrets.sh
+**/googlecid.ts

client/src/blogs/BlogsList.tsx

@@ -7,7 +7,7 @@ import {useQuery} from '@apollo/client/react/hooks/useQuery';
 import {BLOGS_QUERY} from '../graphql/queries';
 import React, {useState} from 'react';
 import {Heading} from "../common/Heading";
-import {Button, Table} from "antd";
+import {Button, Spin, Table} from "antd";
 import {Link} from "react-router-dom";
 import {BlogEdge} from "../gql/graphql";
 
@@ -30,7 +30,14 @@ export function BlogsList() {
         }
     );
 
-    if (loading) { return (<p>Loading...</p>); }
+    if (loading) {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+                <Spin size="large" tip="Loading blogs..." />
+            </div>
+        );
+    }
+
     if (error) { return (<p>error!</p>); }
     if (!data) { return (<p>no data!</p>); }
 

client/src/common/DateTime.tsx

@@ -19,7 +19,8 @@ type TimeUnit = 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second';
 
 // for use on Entries page, e.g. "4 days ago"
 export function RelativeDateTime(props: DateTimeProps) {
-    const updated = props.when.getTime();
+    const date = new Date(props.when); // Convert to Date object
+    const updated = date.getTime();
     const span = Date.now() - updated;
 
     const rtf = useMemo(() => new Intl.RelativeTimeFormat('en-US', { style: 'long', numeric: 'auto' }), []);

client/src/entries/Drafts.tsx

@@ -9,7 +9,7 @@ import {DRAFTS_QUERY} from '../graphql/queries';
 import {Link, useParams} from 'react-router-dom';
 import {RequireAuth} from '../common/Authentication';
 import {useNavigate} from 'react-router';
-import {Button, Table} from "antd";
+import {Button, Spin, Table} from "antd";
 import {Heading} from "../common/Heading";
 import {EntryEdge} from "../gql/graphql";
 import {SimpleDateTime} from "../common/DateTime";
@@ -33,7 +33,14 @@ function Drafts() {
         },
     });
 
-    if (loading) { return (<p>Loading...</p>); }
+    if (loading) {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+                <Spin size="large" tip="Loading blogs..." />
+            </div>
+        );
+    }
+
     if (error) { return (<p>error!</p>); }
     if (!data) { return (<p>no data!</p>); }
 

client/src/entries/Entries.tsx

@@ -9,7 +9,7 @@ import {useQuery} from '@apollo/client/react/hooks/useQuery';
 import {ENTRIES_QUERY} from '../graphql/queries';
 import {Heading} from "../common/Heading";
 import {EntryEdge} from "../gql/graphql";
-import {Avatar, Button, List, Space, Tooltip} from "antd";
+import {Avatar, Button, List, Space, Spin, Tooltip} from "antd";
 import {stripHtml} from "string-strip-html";
 import {RelativeDateTime, SimpleDateTime} from "../common/DateTime";
 import {ClockCircleOutlined, EditOutlined, LinkOutlined} from "@ant-design/icons";
@@ -33,7 +33,14 @@ function Entries() {
         },
     });
 
-    if (loading) { return (<p>Loading...</p>); }
+    if (loading) {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+                <Spin size="large" tip="Loading blogs..." />
+            </div>
+        );
+    }
+
     if (error) { return (<p>error!</p>); }
     if (!data) { return (<p>no data!</p>); }
 

server/schema.graphql

@@ -3,6 +3,22 @@
 # Licensed under Apache Software License v2.
 #
 
+# public user can only do these things:
+# get a list of blogs in the system
+# view the public (published) entries of any blog
+# cannot create a blog
+# cannot view draft entries of any blog
+# cannot create blog entries
+# cannot update blogs
+# cannot create API keys
+
+# a logged in user can do these things:
+# create one blog
+# create an API key
+# update blog settings
+# within that blog, create, view, update and delete blog entries
+# within that blog, edit settings and get an API key
+
 scalar DateTime
 
 schema {
@@ -16,6 +32,7 @@ interface Node {
 
 type Blog implements Node {
     created: DateTime!
+    # only owner of blog can access drafts of blog
     drafts(first: Int, last: Int, before: String, after: String): EntryConnection
     entries(first: Int, last: Int, before: String, after: String): EntryConnection
     entry(id: ID!): Entry
@@ -41,6 +58,7 @@ input EntryCreateInput {
     title: String
 }
 
+# only owner of blog can mutate that blog
 type BlogMutation {
     createEntry(entry: EntryCreateInput): Entry
     delete: Node
@@ -79,6 +97,7 @@ input EntryUpdateInput {
     title: String
 }
 
+# only user who ones blog can perform these mutations
 type EntryMutation {
     delete: Node
     publish: Entry
@@ -98,6 +117,7 @@ type EntryConnection {
     pageInfo: PageInfo!
 }
 
+# Only authenticated users can perform these mutations
 type Mutation {
     issueApiKey: String
     blog(handle: String!): BlogMutation
@@ -118,10 +138,13 @@ type Query {
     blog(handle: String!): Blog
     blogForUser(userId: ID!): Blog
     blogs(first: Int, last: Int, before: String, after: String): BlogConnection
+
+    # only logged in user with userId can access this
     apiKeyForUser(userId: ID!): String
 }
 
 "Represents a user of BlogQL."
+# only logged in user with userId can access this
 type User implements Node {
     "Date user was created."
     created: DateTime!

server/src/entries/entry.ts

@@ -25,6 +25,7 @@ export class Entry extends Model implements Node {
             blogId: {
                 type: DataTypes.STRING,
                 allowNull: false,
+                field: 'blog_id'
             },
             title: {
                 type: DataTypes.STRING,