This repository has no description
again
author
damedotblog
date
(Feb 27, 2025, 4:22 PM -0500)
commit
b6f471cb
b6f471cb78c00c3efee960996753715afc929293
parent
5e863a30
5e863a30f00b68f5e63b60485ec3187140ab71eb
-191
-191
src/components/Resources/ResourceSubmission.js
-191
src/components/Resources/ResourceSubmission.js
···
1
-
import React, { useState, useEffect } from 'react';
2
-
import { submitResource, getCategories } from '../services/supabase';
3
-
4
-
const ResourceSubmission = () => {
5
-
const [categories, setCategories] = useState([]);
6
-
const [subcategories, setSubcategories] = useState([]);
7
-
const [selectedCategory, setSelectedCategory] = useState('');
8
-
const [formData, setFormData] = useState({
9
-
name: '',
10
-
url: '',
11
-
description: '',
12
-
domain: '',
13
-
category_id: '',
14
-
subcategory_id: '',
15
-
submitter_email: '',
16
-
submitter_handle: ''
17
-
});
18
-
const [isSubmitting, setIsSubmitting] = useState(false);
19
-
const [submitSuccess, setSubmitSuccess] = useState(false);
20
-
const [error, setError] = useState(null);
21
-
22
-
useEffect(() => {
23
-
// Fetch categories
24
-
async function fetchCategories() {
25
-
try {
26
-
const data = await getCategories();
27
-
setCategories(data);
28
-
} catch (error) {
29
-
console.error('Error fetching categories:', error);
30
-
}
31
-
}
32
-
33
-
fetchCategories();
34
-
}, []);
35
-
36
-
// Auto-extract domain from URL
37
-
useEffect(() => {
38
-
if (formData.url) {
39
-
try {
40
-
const url = new URL(formData.url);
41
-
setFormData(prev => ({ ...prev, domain: url.hostname }));
42
-
} catch (error) {
43
-
// Not a valid URL yet, ignore
44
-
}
45
-
}
46
-
}, [formData.url]);
47
-
48
-
const handleInputChange = (e) => {
49
-
const { name, value } = e.target;
50
-
setFormData(prev => ({ ...prev, [name]: value }));
51
-
52
-
// When category changes, fetch relevant subcategories
53
-
if (name === 'category_id') {
54
-
setSelectedCategory(value);
55
-
// You would add API call to get subcategories here
56
-
}
57
-
};
58
-
59
-
const handleSubmit = async (e) => {
60
-
e.preventDefault();
61
-
setIsSubmitting(true);
62
-
setError(null);
63
-
64
-
try {
65
-
await submitResource(formData);
66
-
setSubmitSuccess(true);
67
-
// Reset form
68
-
setFormData({
69
-
name: '',
70
-
url: '',
71
-
description: '',
72
-
domain: '',
73
-
category_id: '',
74
-
subcategory_id: '',
75
-
submitter_email: '',
76
-
submitter_handle: ''
77
-
});
78
-
} catch (error) {
79
-
setError('There was an error submitting your resource. Please try again.');
80
-
console.error('Submission error:', error);
81
-
} finally {
82
-
setIsSubmitting(false);
83
-
}
84
-
};
85
-
86
-
return (
87
-
<div className="submission-form-container">
88
-
<h2>Submit a Resource</h2>
89
-
<p>Know a great tool for Bluesky? Submit it here for consideration.</p>
90
-
91
-
{submitSuccess ? (
92
-
<div className="success-message">
93
-
<h3>Thank you for your submission!</h3>
94
-
<p>Your resource has been submitted for review. We'll consider adding it to our directory.</p>
95
-
<button onClick={() => setSubmitSuccess(false)}>Submit Another Resource</button>
96
-
</div>
97
-
) : (
98
-
<form onSubmit={handleSubmit}>
99
-
{error && <div className="error-message">{error}</div>}
100
-
101
-
<div className="form-group">
102
-
<label htmlFor="name">Resource Name*</label>
103
-
<input
104
-
type="text"
105
-
id="name"
106
-
name="name"
107
-
value={formData.name}
108
-
onChange={handleInputChange}
109
-
required
110
-
/>
111
-
</div>
112
-
113
-
<div className="form-group">
114
-
<label htmlFor="url">URL*</label>
115
-
<input
116
-
type="url"
117
-
id="url"
118
-
name="url"
119
-
value={formData.url}
120
-
onChange={handleInputChange}
121
-
required
122
-
/>
123
-
</div>
124
-
125
-
<div className="form-group">
126
-
<label htmlFor="description">Description*</label>
127
-
<textarea
128
-
id="description"
129
-
name="description"
130
-
value={formData.description}
131
-
onChange={handleInputChange}
132
-
required
133
-
/>
134
-
</div>
135
-
136
-
<div className="form-group">
137
-
<label htmlFor="category_id">Category*</label>
138
-
<select
139
-
id="category_id"
140
-
name="category_id"
141
-
value={formData.category_id}
142
-
onChange={handleInputChange}
143
-
required
144
-
>
145
-
<option value="">Select a category</option>
146
-
{categories.map(category => (
147
-
<option key={category.id} value={category.id}>
148
-
{category.emoji} {category.name}
149
-
</option>
150
-
))}
151
-
</select>
152
-
</div>
153
-
154
-
{/* Add subcategory dropdown */}
155
-
156
-
<div className="form-group">
157
-
<label htmlFor="submitter_email">Your Email (optional)</label>
158
-
<input
159
-
type="email"
160
-
id="submitter_email"
161
-
name="submitter_email"
162
-
value={formData.submitter_email}
163
-
onChange={handleInputChange}
164
-
/>
165
-
</div>
166
-
167
-
<div className="form-group">
168
-
<label htmlFor="submitter_handle">Your Bluesky Handle (optional)</label>
169
-
<input
170
-
type="text"
171
-
id="submitter_handle"
172
-
name="submitter_handle"
173
-
value={formData.submitter_handle}
174
-
onChange={handleInputChange}
175
-
/>
176
-
</div>
177
-
178
-
<button
179
-
type="submit"
180
-
className="submit-button"
181
-
disabled={isSubmitting}
182
-
>
183
-
{isSubmitting ? 'Submitting...' : 'Submit Resource'}
184
-
</button>
185
-
</form>
186
-
)}
187
-
</div>
188
-
);
189
-
};
190
-
191
-
export default ResourceSubmission;