Skip to content
This repository was archived by the owner on Jul 16, 2024. It is now read-only.

Commit 27477b9

Browse files
MichaelJComptonMichaelJCompton
committed
sample data and users
1 parent db1cefe commit 27477b9

File tree

14 files changed

+535
-262
lines changed

14 files changed

+535
-262
lines changed

‎deploy/dev-setup/load-data.ts

Lines changed: 79 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import fetch from "cross-fetch"
22
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client"
33
import { GraphQLError } from "graphql"
4-
import { AddCategoryInput, AddPostInput } from "../../src/types/graphql"
4+
import {
5+
AddCategoryInput,
6+
AddPostInput,
7+
AddUserInput,
8+
} from "../../src/types/graphql"
59
import {
610
InitCategoriesMutation,
711
InitCategoriesMutationVariables,
@@ -25,6 +29,23 @@ const categories: Array<AddCategoryInput> = [
2529
{ name: "React" },
2630
]
2731

32+
const diggy: AddUserInput = {
33+
username: "diggy",
34+
displayName: "Diggy",
35+
avatarImg: "/diggy.png",
36+
}
37+
38+
const michael: AddUserInput = {
39+
username: "michael",
40+
displayName: "Michael",
41+
avatarImg: "/michael.png",
42+
}
43+
44+
const virat: AddUserInput = {
45+
username: "virat",
46+
displayName: "Virat",
47+
}
48+
2849
const qsQuote = `
2950
With Dgraph you design your application in GraphQL. You design a set of GraphQL types that describes your requirements. Dgraph takes those types, prepares graph storage for them and generates a GraphQL API with queries and mutations.
3051
@@ -39,33 +60,60 @@ In Dgraph, you do that with code (in any language you like) that implements cust
3960
Dgraph doesn't execute your custom logic itself. It makes external HTTP requests. That means, you can deploy your custom logic into the same Kubernetes cluster as your Dgraph instance, deploy and call, for example, AWS Lambda functions, or even make calls to existing HTTP and GraphQL endpoints.
4061
`
4162

42-
const posts: Array<AddPostInput> = [
43-
{
44-
title: "My first post about GraphQL",
45-
text: qsQuote,
46-
category: { name: "GraphQL" },
47-
},
48-
{
49-
title: "Let me quote from the docs",
50-
text: docsQuote,
51-
category: { name: "GraphQL" },
52-
},
53-
{
54-
title: "I know some things about Dgraph",
55-
text: "It's a GraphQL native DB written from the disk up in Go.",
56-
category: { name: "Dgraph" },
57-
},
58-
{
59-
title: "How should I layout my components?",
60-
text: "Oh man, I can do the code, but the layout, that's not my thing.",
61-
category: { name: "React" },
62-
},
63-
{
64-
title: "Where should I deploy my frontend app?",
65-
text: "Currently",
66-
category: { name: "React" },
67-
},
68-
]
63+
function makePosts(): Array<AddPostInput> {
64+
const now = new Date()
65+
const tenMinsAgo = new Date()
66+
const anHourAgo = new Date()
67+
const yesterday = new Date()
68+
const lastWeek = new Date()
69+
70+
tenMinsAgo.setMinutes(now.getMinutes() - 10)
71+
anHourAgo.setHours(now.getHours() - 1)
72+
yesterday.setDate(now.getDate() - 1)
73+
lastWeek.setDate(now.getDate() - 7)
74+
75+
return [
76+
{
77+
title: "My first post about GraphQL",
78+
text: qsQuote,
79+
datePublished: now,
80+
likes: 1,
81+
category: { name: "GraphQL" },
82+
author: michael,
83+
},
84+
{
85+
title: "Let me quote from the docs",
86+
text: docsQuote,
87+
datePublished: tenMinsAgo,
88+
likes: 5,
89+
category: { name: "GraphQL" },
90+
author: diggy,
91+
},
92+
{
93+
title: "I know some things about Dgraph",
94+
text: "It's a GraphQL native DB written from the disk up in Go.",
95+
datePublished: anHourAgo,
96+
likes: 50,
97+
category: { name: "Dgraph" },
98+
author: diggy,
99+
},
100+
{
101+
title: "How should I layout my components?",
102+
text: "Oh man, I can do the code, but the layout, that's not my thing.",
103+
datePublished: yesterday,
104+
category: { name: "React" },
105+
author: michael,
106+
},
107+
{
108+
title: "Where should I deploy my frontend app?",
109+
text: "I'm developing some new skills in development",
110+
datePublished: lastWeek,
111+
likes: 1000000,
112+
category: { name: "React" },
113+
author: virat,
114+
},
115+
]
116+
}
69117

70118
async function installData(): Promise<Readonly<GraphQLError[]> | undefined> {
71119
const { data: categoryData, errors: categoryErrors } = await client.mutate<
@@ -76,12 +124,14 @@ async function installData(): Promise<Readonly<GraphQLError[]> | undefined> {
76124
variables: { categories },
77125
})
78126

79-
if (categoryErrors || !categoryData?.addCategory?.category ) {
127+
if (categoryErrors || !categoryData?.addCategory?.category) {
80128
return categoryErrors
81129
}
82130

83131
console.log(`added ` + categoryData.addCategory.category.length + ` users`)
84132

133+
const posts = makePosts()
134+
85135
for (let cat of categoryData.addCategory.category) {
86136
for (let post of posts) {
87137
if (cat && cat.name === post.category.name) {

‎deploy/schema.graphql

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
type Post {
2-
id: ID!
3-
title: String!
4-
text: String!
5-
category: Category! @hasInverse(field: posts)
2+
id: ID!
3+
title: String!
4+
text: String!
5+
datePublished: DateTime
6+
likes: Int
7+
author: User!
8+
category: Category! @hasInverse(field: posts)
69
}
710

811
type Category {
9-
id: ID!
10-
name: String!
11-
posts: [Post]
12-
}
12+
id: ID!
13+
name: String!
14+
posts: [Post]
15+
}
16+
17+
type User {
18+
username: String! @id
19+
displayName: String
20+
avatarImg: String
21+
posts: [Post] @hasInverse(field: author)
22+
}

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@types/react-dom": "^16.9.0",
1414
"cross-fetch": "^3.0.5",
1515
"graphql": "^15.1.0",
16+
"luxon": "^1.24.1",
1617
"react": "^16.9.0",
1718
"react-dom": "^16.9.0",
1819
"react-router-dom": "^5.2.0",
@@ -51,6 +52,7 @@
5152
"@graphql-codegen/typescript": "^1.15.4",
5253
"@graphql-codegen/typescript-operations": "^1.15.4",
5354
"@graphql-codegen/typescript-react-apollo": "^1.15.4",
55+
"@types/luxon": "^1.24.1",
5456
"@types/react-router-dom": "^5.1.5",
5557
"ts-node": "^8.10.2"
5658
}

‎public/diggy-graphql.png

549 KB
Loading

‎public/diggy.png

-483 KB
Loading

‎public/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "Discuss clone build with Dgraph GraphQL",
44
"icons": [
55
{
6-
"src": "diggy.png",
6+
"src": "diggy-graphql.png",
77
"type": "image/png",
88
"sizes": "64x64 32x32 24x24 16x16"
99
}

‎public/michael.png

1.45 MB
Loading

‎src/components/header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function AppHeader() {
88
<Menu.Item as="a" header>
99
<Image
1010
size="tiny"
11-
src="/diggy.png"
11+
src="/diggy-graphql.png"
1212
style={{ marginRight: "1.5em" }}
1313
/>
1414
Dgraph Discuss

‎src/components/operations.graphql

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
query allPosts {
2-
queryPost {
3-
id
4-
title
5-
text
6-
category {
7-
name
8-
}
2+
queryPost(order: { desc: datePublished }) {
3+
id
4+
title
5+
text
6+
datePublished
7+
likes
8+
category {
9+
name
910
}
11+
author {
12+
username
13+
displayName
14+
avatarImg
15+
}
16+
}
1017
}

‎src/components/posts.tsx

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,67 @@
11
import React from "react"
2-
import { Container, Header, Feed, Icon, Loader } from "semantic-ui-react"
2+
import {
3+
Container,
4+
Header,
5+
Feed,
6+
Icon,
7+
Loader,
8+
Image,
9+
Popup,
10+
} from "semantic-ui-react"
311
import { useAllPostsQuery } from "./types/operations"
12+
import { DateTime } from "luxon"
413

514
export function PostFeed() {
615
const { data, loading, error } = useAllPostsQuery()
716

817
if (loading) return <Loader />
918
if (error) return `Error! ${error.message}`
1019

11-
const items = data?.queryPost?.map((post) => (
12-
<Feed.Event>
13-
<Feed.Label>
14-
<img src="/diggy.png" />
15-
</Feed.Label>
16-
<Feed.Content>
17-
<Feed.Summary>
18-
<Feed.User>Diggy</Feed.User> {post?.title}
19-
<Feed.Date>1 Hour Ago</Feed.Date>
20-
<Feed.Extra text>
21-
{post?.text.substring(0, 100)}...(posted in{" "}
22-
<a>{post?.category.name}</a>)
23-
</Feed.Extra>
24-
</Feed.Summary>
25-
<Feed.Meta>
26-
<Feed.Like>
27-
<Icon name="like" />1 Like
28-
</Feed.Like>
29-
</Feed.Meta>
30-
</Feed.Content>
31-
</Feed.Event>
32-
))
20+
const items = data?.queryPost?.map((post) => {
21+
let dateStr = "date unknown"
22+
if (post?.datePublished) {
23+
dateStr = DateTime.fromISO(post.datePublished).toRelative() ?? dateStr
24+
}
25+
26+
const likes = post?.likes ?? 0
27+
28+
const avatar = post?.author.avatarImg ? (
29+
<Image src={post.author.avatarImg} />
30+
) : (
31+
<Popup
32+
as="a"
33+
trigger={
34+
<Image
35+
src="https://img.icons8.com/dotty/80/000000/question.png"
36+
href="https://icons8.com/icon/44088/puzzled"
37+
/>
38+
}
39+
content="We couldn't find and icon for this user. This placeholder is a link to the source: Puzzled icon by Icons8"
40+
/>
41+
)
42+
43+
return (
44+
<Feed.Event key={post?.id}>
45+
<Feed.Label>{avatar}</Feed.Label>
46+
<Feed.Content>
47+
<Feed.Summary>
48+
<Feed.User>{post?.author.displayName} </Feed.User> {post?.title}
49+
<Feed.Date>{dateStr}</Feed.Date>
50+
<Feed.Extra text>
51+
{post?.text.substring(0, 100)}...(posted in{" "}
52+
<a>{post?.category.name}</a>)
53+
</Feed.Extra>
54+
</Feed.Summary>
55+
<Feed.Meta>
56+
<Feed.Like>
57+
<Icon name="like" />
58+
{likes} Like{likes === 1 ? "" : "s"}
59+
</Feed.Like>
60+
</Feed.Meta>
61+
</Feed.Content>
62+
</Feed.Event>
63+
)
64+
})
3365

3466
return (
3567
<Container text style={{ marginTop: "7em" }}>

0 commit comments

Comments
 (0)