mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
Add replit page
This commit is contained in:
Malted
parent
d1b0747b5f
commit
2b5bc50245
4 changed files with 104 additions and 88 deletions
|
|
@ -1,35 +1,21 @@
|
|||
// pages/api/replit/progress.js
|
||||
import fetch from 'node-fetch'
|
||||
|
||||
export default async function handler(req, res) {
|
||||
if (req.method === 'GET') {
|
||||
const { token } = req.query
|
||||
|
||||
if (!token) {
|
||||
return res.status(400).json({ error: 'Token is required' })
|
||||
}
|
||||
if (!token) return res.status(400).json({ error: 'Token is required' })
|
||||
|
||||
try {
|
||||
// Construct the URL with the token query parameter
|
||||
const url = new URL('https://replit-takeout.hackclub.com/progress')
|
||||
const url = new URL('http://takeout.hackclub.com/progress')
|
||||
url.searchParams.append('token', token)
|
||||
|
||||
// Make the request to the replit-takeout service
|
||||
const response = await fetch(url.toString(), {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
const response = await fetch(url)
|
||||
|
||||
if (!response.ok) {
|
||||
if (!response.ok)
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.text()
|
||||
|
||||
// Forward the response from the replit-takeout service to the client
|
||||
res.status(200).json(data)
|
||||
console.info(data)
|
||||
res.status(200).send(data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching progress:', error)
|
||||
res
|
||||
|
|
|
|||
|
|
@ -1,22 +1,13 @@
|
|||
import fetch from 'node-fetch'
|
||||
|
||||
export default async function handler(req, res) {
|
||||
if (req.method === 'POST') {
|
||||
try {
|
||||
const { token, email } = req.body
|
||||
|
||||
// Construct the URL with query parameters
|
||||
const url = new URL('http://68.183.252.105/signup')
|
||||
const url = new URL('http://takeout.hackclub.com/signup')
|
||||
url.searchParams.append('token', token)
|
||||
url.searchParams.append('email', email)
|
||||
|
||||
// Make the request to the replit-takeout service
|
||||
const response = await fetch(url.toString(), {
|
||||
method: 'POST', // The URL suggests this might be a GET request
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
const response = await fetch(url, { method: 'POST' })
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
|
|
|
|||
141
pages/replit.js
141
pages/replit.js
|
|
@ -9,7 +9,8 @@ import {
|
|||
Text,
|
||||
Label,
|
||||
Input,
|
||||
Card
|
||||
Card,
|
||||
Progress
|
||||
} from 'theme-ui'
|
||||
import Head from 'next/head'
|
||||
import Meta from '@hackclub/meta'
|
||||
|
|
@ -21,39 +22,58 @@ import Submit from '../components/submit'
|
|||
import ForceTheme from '../components/force-theme'
|
||||
|
||||
const ReplitPage = () => {
|
||||
const [savedToken, setSavedToken] = useState('')
|
||||
const [savedEmail, setSavedEmail] = useState('')
|
||||
const [userDetails, setUserDetails] = useState({ token: null, email: null })
|
||||
|
||||
const [responseText, setResponseText] = useState('')
|
||||
const [progressText, setProgressText] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
// Load saved data from localStorage on component mount
|
||||
const token = localStorage.getItem('replitToken')
|
||||
const email = localStorage.getItem('replitEmail')
|
||||
if (token) setSavedToken(token)
|
||||
if (email) setSavedEmail(email)
|
||||
const token = localStorage.getItem('token')
|
||||
const email = localStorage.getItem('email')
|
||||
setUserDetails({ token, email })
|
||||
|
||||
if (token) {
|
||||
const progressUrl = new URL('http://68.183.252.105/progress')
|
||||
progressUrl.searchParams.append('token', token)
|
||||
|
||||
// setInterval(() => {
|
||||
// fetch(progressUrl)
|
||||
// }, 1_000)
|
||||
}
|
||||
setInterval(() => {
|
||||
try {
|
||||
fetch(`/api/replit/progress?token=${localStorage.getItem('token')}`)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const split = data.split('/')
|
||||
console.log(data, split)
|
||||
setProgressText(split[0] / split[1])
|
||||
})
|
||||
} catch (e) {
|
||||
console.warn(e)
|
||||
}
|
||||
}, 5_000)
|
||||
}, [])
|
||||
|
||||
const { status, data, useField, formProps } = useForm(
|
||||
'/api/replit/signup',
|
||||
response => {
|
||||
// Callback function after successful submission
|
||||
localStorage.setItem('replitToken', data.token)
|
||||
localStorage.setItem('replitEmail', data.email)
|
||||
alert('Form submitted successfully!')
|
||||
},
|
||||
{
|
||||
clearOnSubmit: false,
|
||||
initData: { token: savedToken, email: savedEmail }
|
||||
const handleSubmit = async event => {
|
||||
event.preventDefault()
|
||||
const formData = new FormData(event.target)
|
||||
const data = {
|
||||
email: formData.get('email'),
|
||||
token: formData.get('token')
|
||||
}
|
||||
)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/replit/signup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
localStorage.setItem('token', result.token)
|
||||
localStorage.setItem('email', result.email)
|
||||
setUserDetails({ token: result.token, email: result.email })
|
||||
setResponseText('Success!')
|
||||
} catch (error) {
|
||||
setResponseText('Error submitting form')
|
||||
console.error('Error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const tokenSteps = [
|
||||
{
|
||||
|
|
@ -120,32 +140,65 @@ const ReplitPage = () => {
|
|||
</Text>
|
||||
</Box>
|
||||
|
||||
<Text sx={{ fontSize: '0.1rem' }}>{JSON.stringify(userDetails)}</Text>
|
||||
|
||||
<Box sx={{ maxWidth: '100ch', marginX: 'auto' }}>
|
||||
<Box sx={{ marginTop: '3rem' }}>
|
||||
<Heading as="h2" sx={{ marginBottom: '0.5em' }}>
|
||||
Export your repls
|
||||
</Heading>
|
||||
<Card>
|
||||
<form {...formProps}>
|
||||
<Card sx={{ background: 'smoke' }}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Label sx={{ fontSize: 1 }} htmlFor="email">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
name="email"
|
||||
type="email"
|
||||
defaultValue={userDetails.email}
|
||||
/>
|
||||
|
||||
<Label sx={{ fontSize: 1, pt: 2 }} htmlFor="token">
|
||||
Replit connect.sid token
|
||||
</Label>
|
||||
<Input {...useField('token')} />
|
||||
<Input name="token" defaultValue={userDetails.token} />
|
||||
|
||||
<Label sx={{ fontSize: 1, pt: 2 }} htmlFor="email">
|
||||
Email override
|
||||
</Label>
|
||||
<Input {...useField('email', 'email')} />
|
||||
|
||||
<Submit
|
||||
sx={{ backgroundColor: 'black', mt: '0.5rem' }}
|
||||
status={status}
|
||||
value="Submit"
|
||||
<Input
|
||||
type="submit"
|
||||
sx={{ backgroundColor: 'black', mt: '0.5rem', color: 'white' }}
|
||||
text="Submit"
|
||||
/>
|
||||
</form>
|
||||
<Text>{responseText}</Text>
|
||||
|
||||
{progressText ? (
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: '1rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Progress max={1} value={progressText}>
|
||||
{progressText * 100}%
|
||||
</Progress>
|
||||
|
||||
<Text sx={{ flexShrink: 0 }}>
|
||||
{progressText * 100}% of your repls have processed.
|
||||
{progressText <= 0 ? ' Please wait!' : null}
|
||||
{progressText <= 1 ? ' Check your email!' : null}
|
||||
</Text>
|
||||
</Box>
|
||||
) : null}
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
<Card sx={{ background: 'smoke', marginTop: '3rem' }}>
|
||||
3: Something about free stickers
|
||||
</Card>
|
||||
|
||||
<Box sx={{ marginTop: '3rem' }}>
|
||||
<Heading as="h2" sx={{ marginBottom: '0.5em' }}>
|
||||
How to get your Replit <code>connect.sid</code> token
|
||||
|
|
@ -154,18 +207,16 @@ const ReplitPage = () => {
|
|||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
overflowX: 'auto',
|
||||
padding: '1rem'
|
||||
flexDirection: 'column',
|
||||
gap: '1rem'
|
||||
}}
|
||||
>
|
||||
{tokenSteps.map((step, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
sx={{
|
||||
padding: '1rem !important',
|
||||
lineHeight: 0,
|
||||
minWidth: '64rem'
|
||||
background: 'smoke'
|
||||
}}
|
||||
>
|
||||
<Heading as="h3" sx={{ lineHeight: 1.5 }}>
|
||||
|
|
|
|||
12
todo.txt
12
todo.txt
|
|
@ -1,12 +0,0 @@
|
|||
light & friendly
|
||||
1. enter email
|
||||
2. enter token
|
||||
3. get free hack club and github stickers in the mail (first 5k ppl)
|
||||
|
||||
|
||||
4. how to get the token - should be a carousel, click next and have gifs, one for each browser
|
||||
|
||||
|
||||
|
||||
todos
|
||||
make replit-takeou repo public
|
||||
Loading…
Add table
Reference in a new issue