Skip to content

Commit ac5366c

Browse files
dthyressondthyresson
committed
More loading. Restore comment delete.
1 parent 818610a commit ac5366c

5 files changed

Lines changed: 114 additions & 96 deletions

File tree

‎app/lib/comment-item.tsx‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { TrashIcon } from "@heroicons/react/outline";
12
import { Auth } from "@supabase/ui";
23
import Link from "next/link";
34
import { useRouter } from "next/router";
@@ -59,34 +60,29 @@ export function CommentItem(props: {
5960
<div className="flex-1 space-y-1">
6061
<div className="flex items-center justify-between">
6162
<h3 className="text-sm font-medium">
62-
{props.comment.profile?.username}
63+
<Link href={`/profile/${props.comment.profile?.id}`}>
64+
<a className="text-gray-800">{props.comment.profile?.username}</a>
65+
</Link>
6366
</h3>
6467
<p className="text-sm text-gray-500">{createdAt}</p>
6568
</div>
66-
<p className="text-sm text-gray-500">{props.comment.message}</p>
69+
<p className="text-sm text-gray-500">
70+
{props.comment.message}
71+
{user?.id && user.id === props.comment.profile?.id ? (
72+
<button
73+
type="button"
74+
className="inline-flex items-center ml-2 p-1 border border-transparent rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
75+
onClick={() => {
76+
deleteComment({
77+
commentId: props.comment.id,
78+
});
79+
}}
80+
>
81+
<TrashIcon className="h-2 w-2" />
82+
</button>
83+
) : null}
84+
</p>
6785
</div>
6886
</div>
69-
70-
// <div className="pb-4">
71-
// <div className="text-sm">
72-
// <Link href={`/profile/${props.comment.profile?.id}`}>
73-
// <a className="font-bold">{props.comment.profile?.username} </a>
74-
// </Link>
75-
// <span>{createdAt}</span>
76-
// {user?.id && user.id === props.comment.profile?.id ? (
77-
// <button
78-
// className="ml-2 text-xs text-gray-400 hover:text-gray-900"
79-
// onClick={() => {
80-
// deleteComment({
81-
// commentId: props.comment.id,
82-
// });
83-
// }}
84-
// >
85-
// delete
86-
// </button>
87-
// ) : null}
88-
// </div>
89-
// <div className="flex-1 md:flex-grow">{props.comment.message}</div>
90-
// </div>
9187
);
9288
}

‎app/pages/about.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -114,26 +114,32 @@ const About: NextPage = () => {
114114
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
115115
},
116116
{
117-
id: 4,
117+
id: 5,
118118
question: "Supabase Auth",
119119
answer:
120120
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
121121
},
122122
{
123-
id: 4,
124-
question: "Postgres Triggers",
123+
id: 6,
124+
question: "pg_graphql Postgres Extension",
125125
answer:
126126
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
127127
},
128128
{
129-
id: 5,
130-
question: "Postgres Functions",
129+
id: 7,
130+
question: "Postgres RLS",
131131
answer:
132132
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
133133
},
134134
{
135-
id: 5,
136-
question: "pg_graphql Postgres Extension",
135+
id: 8,
136+
question: "Postgres Triggers",
137+
answer:
138+
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
139+
},
140+
{
141+
id: 9,
142+
question: "Postgres Functions",
137143
answer:
138144
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
139145
},

‎app/pages/account.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { CombinedError, useMutation, useQuery } from "urql";
66
import { Input } from "@supabase/ui";
77
import { DocumentType, gql } from "../gql";
88
import { Container } from "../lib/container";
9+
import { Loading } from "../lib/loading";
910
import { MainSection } from "../lib/main-section";
1011

1112
const UserProfileQuery = gql(/* GraphQL */ `
@@ -39,6 +40,14 @@ const Account: NextPage = () => {
3940

4041
if (profile) {
4142
return <AccountForm profile={profile} />;
43+
} else {
44+
{
45+
return (
46+
<div className="w-full">
47+
profileQuery.fetching && <Loading />
48+
</div>
49+
);
50+
}
4251
}
4352

4453
return null;

‎app/pages/item/[postId].tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { gql } from "../../gql";
88
import { CommentItem } from "../../lib/comment-item";
99
import { Container } from "../../lib/container";
1010
import { FeedItem } from "../../lib/feed-item";
11+
import { Loading } from "../../lib/loading";
1112
import { MainSection } from "../../lib/main-section";
1213
import { noopUUID } from "../../lib/noop-uuid";
1314

@@ -99,36 +100,36 @@ const Item: NextPage = () => {
99100

100101
const post = itemRouteQuery?.data?.post?.edges?.[0];
101102

102-
if (post == null) {
103-
return null;
104-
}
105-
106103
return (
107104
<Container>
108105
<MainSection>
109-
{post.node == null ? null : (
110-
<>
111-
<Head>
112-
<title>supanews | {post.node?.title}</title>
113-
<meta name="description" content={post.node?.url} />
114-
</Head>
115-
<section className="text-gray-600 body-font overflow-hidden w-full">
116-
<div className="container px-5 py-24 mx-auto">
117-
<FeedItem post={post.node} key={post.cursor} />
106+
<div className="h-screen w-full">
107+
{itemRouteQuery.fetching && <Loading />}
108+
109+
{post?.node == null ? null : (
110+
<>
111+
<Head>
112+
<title>supanews | {post.node?.title}</title>
113+
<meta name="description" content={post.node?.url} />
114+
</Head>
115+
<section className="text-gray-600 body-font overflow-hidden w-full">
116+
<div className="container px-5 py-24 mx-auto">
117+
<FeedItem post={post.node} key={post.cursor} />
118118

119-
<div className="max-w-md">
120-
<PostCommentForm postId={post.node.id} />
119+
<div className="max-w-md">
120+
<PostCommentForm postId={post.node.id} />
121121

122-
<div className="mt-10">
123-
{post.node?.comments?.edges.map((edge) => (
124-
<CommentItem comment={edge.node!} key={edge.cursor} />
125-
))}
122+
<div className="mt-10">
123+
{post.node?.comments?.edges.map((edge) => (
124+
<CommentItem comment={edge.node!} key={edge.cursor} />
125+
))}
126+
</div>
126127
</div>
127128
</div>
128-
</div>
129-
</section>
130-
</>
131-
)}
129+
</section>
130+
</>
131+
)}
132+
</div>
132133
</MainSection>
133134
</Container>
134135
);

‎app/pages/profile/[profileId].tsx‎

Lines changed: 48 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { gql } from "../../gql";
66
import { CommentItem } from "../../lib/comment-item";
77
import { Container } from "../../lib/container";
88
import { FeedItem } from "../../lib/feed-item";
9+
import { Loading } from "../../lib/loading";
910
import { MainSection } from "../../lib/main-section";
1011

1112
const ProfileRouteQuery = gql(/* GraphQL */ `
@@ -75,50 +76,55 @@ const Profile: NextPage = () => {
7576
</Head>
7677

7778
<MainSection>
78-
{profile == null ? null : (
79-
<section className="text-gray-600 body-font overflow-hidden">
80-
<div className="container px-5 py-24 pt-10 mx-auto">
81-
<div>
82-
<span className="inline-block font-bold pr-2 w-20">User</span>{" "}
83-
{profile.username}
84-
</div>
85-
<div>
86-
<span className="inline-block font-bold pr-2 w-20">Avatar</span>{" "}
87-
<img
88-
className="inline-block h-6 w-6 rounded-full"
89-
src={profile.avatarUrl}
90-
/>
91-
</div>
92-
<div>
93-
<span className="inline-block font-bold pr-2 w-20">
94-
Website
95-
</span>{" "}
96-
{profile.website}
97-
</div>
98-
99-
<div className="mb-10">
100-
<span className="inline-block font-bold pr-2 w-20">Bio</span>{" "}
101-
{profile.bio}
102-
</div>
103-
<h1 className="font-semibold text-xl tracking-tight mb-5">
104-
Latest Posts
105-
</h1>
106-
<div>
107-
{profile.latestPosts?.edges.map((edge) => (
108-
<FeedItem post={edge.node!} key={edge.cursor} />
79+
<div className="w-full">
80+
{profileQuery.fetching && <Loading />}
81+
{profile == null ? null : (
82+
<section className="text-gray-600 body-font overflow-hidden">
83+
<div className="container px-5 py-24 pt-10 mx-auto">
84+
<h1 className="font-semibold text-xl tracking-tight mb-5">
85+
Profile
86+
</h1>{" "}
87+
<div>
88+
<span className="inline-block font-bold pr-2 w-20">User</span>{" "}
89+
{profile.username}
90+
</div>
91+
<div>
92+
<span className="inline-block font-bold pr-2 w-20">
93+
Avatar
94+
</span>{" "}
95+
<img
96+
className="inline-block h-6 w-6 rounded-full"
97+
src={profile.avatarUrl}
98+
/>
99+
</div>
100+
<div>
101+
<span className="inline-block font-bold pr-2 w-20">
102+
Website
103+
</span>{" "}
104+
{profile.website}
105+
</div>
106+
<div className="mb-10">
107+
<span className="inline-block font-bold pr-2 w-20">Bio</span>{" "}
108+
{profile.bio}
109+
</div>
110+
<h1 className="font-semibold text-xl tracking-tight mb-5">
111+
Latest Posts
112+
</h1>
113+
<div>
114+
{profile.latestPosts?.edges.map((edge) => (
115+
<FeedItem post={edge.node!} key={edge.cursor} />
116+
))}
117+
</div>
118+
<h1 className="font-semibold text-xl tracking-tight mb-5">
119+
Latest Comments
120+
</h1>
121+
{profile.latestComments?.edges.map((edge) => (
122+
<CommentItem comment={edge.node!} key={edge.cursor} />
109123
))}
110124
</div>
111-
112-
<h1 className="font-semibold text-xl tracking-tight mb-5">
113-
Latest Comments
114-
</h1>
115-
116-
{profile.latestComments?.edges.map((edge) => (
117-
<CommentItem comment={edge.node!} key={edge.cursor} />
118-
))}
119-
</div>
120-
</section>
121-
)}
125+
</section>
126+
)}
127+
</div>
122128
</MainSection>
123129
</Container>
124130
);

0 commit comments

Comments
 (0)