Skip to content

Commit 8e69a3f

Browse files
nikgrafnikgraf
committed
remove Address and use Project for template
1 parent f7c826c commit 8e69a3f

File tree

4 files changed

+118
-113
lines changed

4 files changed

+118
-113
lines changed

‎apps/create-hypergraph/template-vite-react/src/mapping.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,6 @@ import type { Mapping } from '@graphprotocol/hypergraph';
22
import { Id } from '@graphprotocol/hypergraph';
33

44
export const mapping: Mapping.Mapping = {
5-
Address: {
6-
typeIds: [Id('5c6e72fb-8340-47c0-8281-8be159ecd495')],
7-
properties: {
8-
name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
9-
description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
10-
},
11-
},
125
Image: {
136
typeIds: [Id('ba4e4146-0010-499d-a0a3-caaa7f579d0e')],
147
properties: {

‎apps/create-hypergraph/template-vite-react/src/routes/private-space/$space-id.tsx‎

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Button } from '@/components/ui/button';
2-
import { Address } from '@/schema';
2+
import { Project } from '@/schema';
33
import {
44
HypergraphSpaceProvider,
55
useCreateEntity,
6+
usePublishToPublicSpace,
67
useQuery,
78
useSpace,
89
useSpaces,
9-
usePublishToPublicSpace,
1010
} from '@graphprotocol/hypergraph-react';
1111
import { createFileRoute } from '@tanstack/react-router';
1212
import { useState } from 'react';
@@ -27,14 +27,15 @@ function RouteComponent() {
2727

2828
function PrivateSpace() {
2929
const { name, ready } = useSpace({ mode: 'private' });
30-
const { data: addresses } = useQuery(Address, { mode: 'private' });
30+
const { data: projects } = useQuery(Project, { mode: 'private' });
3131
const { data: publicSpaces } = useSpaces({ mode: 'public' });
3232
const [selectedSpace, setSelectedSpace] = useState<string>('');
33-
const createAddress = useCreateEntity(Address);
34-
const [addressName, setAddressName] = useState('');
33+
const createProject = useCreateEntity(Project);
34+
const [projectName, setProjectName] = useState('');
35+
const [projectDescription, setProjectDescription] = useState('');
3536
const { mutate: publishToPublicSpace, isPending } = usePublishToPublicSpace({
36-
onSuccess: () => alert('Address published to public space'),
37-
onError: () => alert('Error publishing address to public space'),
37+
onSuccess: () => alert('Project published to your public space'),
38+
onError: () => alert('Error publishing project to your public space'),
3839
});
3940

4041
if (!ready) {
@@ -50,8 +51,9 @@ function PrivateSpace() {
5051

5152
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
5253
e.preventDefault();
53-
createAddress({ name: addressName, description: 'Beautiful address' });
54-
setAddressName('');
54+
createProject({ name: projectName, description: projectDescription });
55+
setProjectName('');
56+
setProjectDescription('');
5557
};
5658

5759
return (
@@ -60,52 +62,70 @@ function PrivateSpace() {
6062
{/* Header */}
6163
<div className="mb-8">
6264
<h1 className="text-3xl font-bold text-foreground mb-2">{name}</h1>
63-
<p className="text-muted-foreground">Manage your private addresses and publish them to public spaces</p>
65+
<p className="text-muted-foreground">Manage your private projects and publish them to public spaces</p>
6466
</div>
6567

6668
<div className="grid gap-8 lg:grid-cols-2">
67-
{/* Create Address Form */}
69+
{/* Create Project Form */}
6870
<div className="space-y-6">
6971
<div className="bg-card border rounded-lg p-6 shadow-sm">
70-
<h2 className="text-xl font-semibold text-card-foreground mb-4">Create New Address</h2>
72+
<h2 className="text-xl font-semibold text-card-foreground mb-4">Create New Project</h2>
7173
<form onSubmit={handleSubmit} className="space-y-4">
7274
<div className="space-y-2">
73-
<label htmlFor="address-name" className="text-sm font-medium text-card-foreground">
74-
Address Name
75+
<label htmlFor="project-name" className="text-sm font-medium text-card-foreground">
76+
Project Name
7577
</label>
7678
<input
77-
id="address-name"
79+
id="project-name"
7880
type="text"
79-
value={addressName}
80-
onChange={(e) => setAddressName(e.target.value)}
81-
placeholder="Enter address name..."
81+
value={projectName}
82+
onChange={(e) => setProjectName(e.target.value)}
83+
placeholder="Enter project name..."
8284
className="w-full px-3 py-2 border border-input bg-background rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
8385
required
8486
/>
8587
</div>
86-
<Button type="submit" className="w-full" disabled={!addressName.trim()}>
87-
Create Address
88+
<div className="space-y-2">
89+
<label htmlFor="project-description" className="text-sm font-medium text-card-foreground">
90+
Project Description
91+
</label>
92+
<input
93+
id="project-description"
94+
type="text"
95+
value={projectDescription}
96+
onChange={(e) => setProjectDescription(e.target.value)}
97+
placeholder="Enter project description..."
98+
className="w-full px-3 py-2 border border-input bg-background rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
99+
/>
100+
</div>
101+
<Button type="submit" className="w-full" disabled={!projectName.trim()}>
102+
Create Project
88103
</Button>
89104
</form>
90105
</div>
91106
</div>
92107

93-
{/* Addresses List */}
108+
{/* Projects List */}
94109
<div className="space-y-6">
95110
<div className="bg-card border rounded-lg p-6 shadow-sm">
96111
<h2 className="text-xl font-semibold text-card-foreground mb-4">
97-
Your Addresses ({addresses?.length || 0})
112+
Your Projects ({projects?.length || 0})
98113
</h2>
99114

100-
{addresses && addresses.length > 0 ? (
115+
{projects && projects.length > 0 ? (
101116
<div className="space-y-4">
102-
{addresses.map((address) => (
103-
<div key={address.id} className="border border-border rounded-lg p-4 bg-background">
117+
{projects.map((project) => (
118+
<div key={project.id} className="border border-border rounded-lg p-4 bg-background">
119+
<div className="flex items-center justify-between mb-3">
120+
<h3 className="font-medium text-foreground">{project.name}</h3>
121+
</div>
122+
123+
<div className="flex items-center justify-between mb-3">
124+
<p className="text-xs text-muted-foreground">ID: {project.id}</p>
125+
</div>
126+
104127
<div className="flex items-center justify-between mb-3">
105-
<h3 className="font-medium text-foreground">{address.name}</h3>
106-
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
107-
ID: {address.id.slice(0, 8)}...
108-
</span>
128+
<p className="text-sm text-muted-foreground">{project.description}</p>
109129
</div>
110130

111131
<div className="space-y-3">
@@ -129,7 +149,7 @@ function PrivateSpace() {
129149
</div>
130150

131151
<Button
132-
onClick={() => publishToPublicSpace({ entity: address, spaceId: selectedSpace })}
152+
onClick={() => publishToPublicSpace({ entity: project, spaceId: selectedSpace })}
133153
disabled={!selectedSpace || isPending}
134154
variant="outline"
135155
size="sm"
@@ -158,8 +178,8 @@ function PrivateSpace() {
158178
/>
159179
</svg>
160180
</div>
161-
<p className="text-muted-foreground">No addresses created yet</p>
162-
<p className="text-sm text-muted-foreground mt-1">Create your first address using the form</p>
181+
<p className="text-muted-foreground">No projects created yet</p>
182+
<p className="text-sm text-muted-foreground mt-1">Create your first project using the form</p>
163183
</div>
164184
)}
165185
</div>

‎apps/create-hypergraph/template-vite-react/src/routes/public-space/$space-id.tsx‎

Lines changed: 66 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Address } from '@/schema';
1+
import { Project } from '@/schema';
22
import { HypergraphSpaceProvider, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
33
import { createFileRoute } from '@tanstack/react-router';
44

@@ -18,7 +18,7 @@ function RouteComponent() {
1818

1919
function PublicSpace() {
2020
const { ready, name } = useSpace({ mode: 'public' });
21-
const { data: addresses } = useQuery(Address, { mode: 'public' });
21+
const { data: projects, isPending } = useQuery(Project, { mode: 'public' });
2222

2323
if (!ready) {
2424
return (
@@ -45,77 +45,74 @@ function PublicSpace() {
4545

4646
{/* Main Content */}
4747
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
48-
<div className="bg-white rounded-lg shadow-sm border border-slate-200">
49-
<div className="px-6 py-4 border-b border-slate-200">
50-
<h2 className="text-xl font-semibold text-slate-900">Addresses</h2>
51-
<p className="text-slate-600 text-sm mt-1">
52-
{addresses ? `${addresses.length} addresses found` : 'Loading addresses...'}
53-
</p>
54-
</div>
48+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
49+
{projects.map((project) => (
50+
<div
51+
key={project.id}
52+
className="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-blue-200 transform hover:-translate-y-1 z-10"
53+
>
54+
{/* Gradient overlay */}
55+
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-purple-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
5556

56-
<div className="p-6">
57-
{!addresses ? (
58-
<div className="space-y-3">
59-
{[...Array(3)].map((_, i) => (
60-
<div key={i} className="animate-pulse">
61-
<div className="h-4 bg-slate-200 rounded w-3/4" />
62-
</div>
63-
))}
64-
</div>
65-
) : addresses.length > 0 ? (
66-
<div className="grid gap-3">
67-
{addresses.map((address) => (
68-
<div
69-
key={address.id}
70-
className="group p-4 rounded-lg border border-slate-200 hover:border-slate-300 hover:shadow-sm transition-all duration-200 bg-slate-50 hover:bg-white"
71-
>
72-
<div className="flex items-center justify-between">
73-
<div className="flex items-center space-x-3">
74-
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
75-
<span className="text-blue-600 font-medium text-sm">
76-
{address.name.charAt(0).toUpperCase()}
77-
</span>
78-
</div>
79-
<div>
80-
<h3 className="font-medium text-slate-900 group-hover:text-blue-600 transition-colors">
81-
{address.name}
82-
</h3>
83-
<p className="text-sm text-slate-500">Address ID: {address.id}</p>
84-
</div>
85-
</div>
86-
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
87-
<svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
88-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
89-
</svg>
90-
</div>
91-
</div>
92-
</div>
93-
))}
94-
</div>
95-
) : (
96-
<div className="text-center py-12">
97-
<div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
98-
<svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
99-
<path
100-
strokeLinecap="round"
101-
strokeLinejoin="round"
102-
strokeWidth={2}
103-
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
104-
/>
105-
<path
106-
strokeLinecap="round"
107-
strokeLinejoin="round"
108-
strokeWidth={2}
109-
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
110-
/>
111-
</svg>
57+
{/* Content */}
58+
<div className="relative p-6">
59+
{/* Project icon/avatar */}
60+
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300 overflow-hidden">
61+
<span className="text-white font-bold text-lg">{project.name.charAt(0).toUpperCase()}</span>
11262
</div>
113-
<h3 className="text-lg font-medium text-slate-900 mb-2">No addresses found</h3>
114-
<p className="text-slate-600">This space doesn't have any addresses yet.</p>
63+
64+
{/* Project name */}
65+
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
66+
{project.name}
67+
</h3>
68+
69+
{/* Project ID */}
70+
<p className="text-[10px] text-gray-500 mb-2 font-mono">{project.id}</p>
71+
72+
{/* Project description */}
73+
{project.description && (
74+
<p className="text-sm text-gray-600 mb-2 line-clamp-2">{project.description}</p>
75+
)}
76+
77+
{/* Project xUrl */}
78+
{project.xUrl && (
79+
<a
80+
href={project.xUrl}
81+
target="_blank"
82+
rel="noopener noreferrer"
83+
className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center gap-1"
84+
>
85+
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
86+
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
87+
</svg>
88+
View on X
89+
</a>
90+
)}
11591
</div>
116-
)}
117-
</div>
92+
93+
{/* Decorative corner accent */}
94+
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-500 opacity-10 group-hover:opacity-20 transition-opacity duration-300 transform rotate-45 translate-x-8 -translate-y-8" />
95+
</div>
96+
))}
11897
</div>
98+
99+
{/* Empty state */}
100+
{isPending === false && projects.length === 0 && (
101+
<div className="text-center py-16">
102+
<div className="w-24 h-24 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
103+
<svg className="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
104+
<path
105+
strokeLinecap="round"
106+
strokeLinejoin="round"
107+
strokeWidth={2}
108+
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
109+
/>
110+
</svg>
111+
</div>
112+
<h3 className="text-xl font-semibold text-gray-900 mb-2">No Projects Found</h3>
113+
<p className="text-gray-500">There are currently no public projects available to explore.</p>
114+
</div>
115+
)}
119116
</div>
120117
</div>
121118
);

‎apps/create-hypergraph/template-vite-react/src/schema.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import { Entity, Type } from '@graphprotocol/hypergraph';
22

3-
export class Address extends Entity.Class<Address>('Address')({
4-
name: Type.String,
5-
description: Type.String,
6-
}) {}
7-
83
export class Image extends Entity.Class<Image>('Image')({
94
url: Type.String,
105
}) {}

0 commit comments

Comments
 (0)