Skip to content

Commit

Permalink
ui folder up to date
Browse files Browse the repository at this point in the history
  • Loading branch information
@YunPearce
YunPearce committed Mar 20, 2024
1 parent 1da3bdd commit e3c4772
Show file tree
Hide file tree
Showing 11 changed files with 577 additions and 220 deletions.
12 changes: 6 additions & 6 deletions ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>near</title>
<title>%gateways</title>
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="/src/assets/favicon.svg" sizes="any" type="image/svg+xml" />
<link rel="mask-icon" href="/src/assets/safari-pinned-tab.svg" color="#000000" />
<link rel="apple-touch-icon" sizes="180x180" href="/src/assets/apple-touch-icon.png" />
<link rel="manifest" href="/src/assets/manifest.json" />
<link rel="icon" href="./src/assets/favicon.svg" sizes="any" type="image/svg+xml" />
<link rel="mask-icon" href="./src/assets/safari-pinned-tab.svg" color="#000000" />
<link rel="apple-touch-icon" sizes="180x180" href="./src/assets/apple-touch-icon.png" />
<link rel="manifest" href="./src/assets/manifest.json" />
</head>
<body class="font-sans text-gray-900 bg-white antialiased">
<div id="app"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="module" src="./src/main.jsx"></script>
</body>
</html>
212 changes: 122 additions & 90 deletions ui/package-lock.json
View file

Large diffs are not rendered by default.

64 changes: 22 additions & 42 deletions ui/src/app.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
import React, { useEffect, useState } from 'react';
import Urbit from '@urbit/http-api';
import NewGateway from './components/NewGateway.jsx'
import HeardGateways from './components/HeardGateways.jsx'
import PublishedGateways from './components/PublishedGateways.jsx'


// const api = new Urbit(
// 'http://localhost:80',
// 'lidlut-tabwed-pillex-ridrup',
// 'near-handler'
// )
// api.ship = 'zod'
const api = new Urbit('', '', 'near-handler');
api.ship = window.ship;

export function App() {
const api = new Urbit('', '', 'near-handler');
api.ship = window.ship;

// const api = new Urbit(
// 'http://localhost:80',
// 'lidlut-tabwed-pillex-ridrup',
// 'near-handler'
// )
//api.ship = 'zod'


const [heard, setHeard] = useState([])
const [published, setPublished] = useState([])
const [installed, setInstalled] = useState([])
const [showHeard, setShowHeard] = useState(false)
const [showPublished, setShowPublished] = useState(false)
const [showNew, setShowNew] = useState(true)
const [loading, setLoading] = useState(false)
const [loading, setLoading] = useState(true)

async function scryToGateways() {
console.log('scrying to gateways')
let scryPublish = await api.scry({
app: 'near-gateways',
path: '/published'
})
console.log(scryPublish)
setPublished(scryPublish)
let scryInstalled = await api.scry({
app: 'near-gateways',
path: '/installed'
})
console.log(scryInstalled)
setInstalled(scryInstalled)
let scryHeard = await api.scry({ app: 'near-gateways', path: '/heard' })
setHeard(scryHeard)
Expand All @@ -47,38 +47,18 @@ export function App() {
}, [loading])


const containerBody = "grid grid-cols-3 justify-items-stretch"
const containerNav = "col-start-2 col-end-3 grid grid-cols-3 justify-items-stretch gap-4"
const btnStyle= "text-center pt-3 hover:font-semibold"
const containerComponent = ""
const containerMain = "col-start-2 col-end-3"

return (
<div className={containerBody}>
<div className={containerNav}>
<button onClick={()=>{setShowHeard(true), setShowNew(false), setShowPublished(false),setLoading(true)}}
className={btnStyle}>Heard</button>
<button onClick={()=>{setShowPublished(true), setShowNew(false), setShowHeard(false), setLoading(true)}}
className={btnStyle}>Published</button>
<button onClick={()=>{setShowNew(true), setShowHeard(false), setShowPublished(false)}}
className={btnStyle}>New Gateway</button>
</div>
<div className={containerMain}>
<div className='containerBody'>
<div className='containerMain'>
{loading ? <div>loading</div> :
<div>
<div>
{showNew ?
<div className={containerComponent}>
<NewGateway api={api}/></div> :
<div></div>
}</div>
{showPublished && !loading ?
<div className={containerComponent}>
<PublishedGateways published={published} loading={loading}/></div> : <div></div>}
{showHeard && !loading ?
<div className={containerComponent}>
<HeardGateways api={api} heard={heard} installed={installed} loading={loading}/></div> :
<div></div>}
<h2 className='headers'>Published</h2>
<div className='containerComponent'>
<PublishedGateways published={published} loading={loading} api={api}/></div>
<h2 className='headers'>Heard</h2>
<div className='containerComponent'>
<HeardGateways api={api} heard={heard} installed={installed} loading={loading}/></div>
</div>
}</div>
</div>
Expand Down
107 changes: 72 additions & 35 deletions ui/src/components/HeardGateways.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
import React from 'react'
import React, { useState, useEffect } from 'react'

function HeardGateways(arg) {
const api= arg.api
const heard = arg.heard
const installed = arg.installed
const loading = arg.loading

const [installedGateways, setInstalledGateways] = useState([])
const [newGateways, setNewGateways] = useState([])

async function pokeInstall(gateway) {
console.log(gateway)
console.log({'install': {
'identifier' : {'ship' : gateway.ship,
'id' : gateway.id},
'metadata' : {'name' : gateway.name,
'url' : gateway.url}
'url' : gateway.url,
'about' :gateway.about}
}})
api.poke({
app:"near-gateways",
Expand All @@ -21,47 +25,80 @@ function HeardGateways(arg) {
'identifier' : {'ship' : gateway.ship,
'id' : gateway.id},
'metadata' : {'name' : gateway.name,
'url' : gateway.url}
'url' : gateway.url,
'about' :gateway.about}
}},
onSuccess: () => window.location.reload(), //reload page here
onSuccess: () => window.location.reload(),
onError: () => console.log("install of " + gateway.name + " failed")
})
}

const heardContainer = "font-medium p-4 mt-4"
const gatewayContainer = "border-2 border-gray-100 p-4 grid align-center"
const btnStyle = "text-white bg-gray-400 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium w-full sm:w-auto px-3 py-2 text-center m-3"
const header = "text-center p-3"
const frame = "border-2 border-grey-900 w-fit"
const linkStyle= "text-center pt-3 hover:font-semibold"
const sortHeard = () =>{
if (heard !== null && installed !== null){
for (let i = 0; i < heard.length; i++){
let gateway = heard[i]
let isInstalled = installed.find(instGateway => instGateway.id === gateway.id)
console.log(installed.find(instGateway => instGateway.id === gateway.id))
if (isInstalled !== undefined){
console.log('gateway installed', gateway)
setInstalledGateways(current => [...current, gateway])
}else{
console.log('gatewa not installed', gateway)
setNewGateways(current => [...current, gateway])
}
}
}else if (heard !== null && installed === null){
console.log('no installed but heard')
setNewGateways(heard)
}else{
setNewGateways([])
}
}

useEffect(() => {
if (heard !== null){
sortHeard()
}
}, [])

return(
<div className={heardContainer}>
<h2 className={header}>Heard:</h2>
<div>
{(heard !== null) && !loading ?
<div>{heard.map((gateway, index) => {
let name = gateway.name
let isInstalled = installed.find(instGateway => instGateway.id === gateway.id)
//let url = 'http://localhost:80/apps/near/' + gateway.ship + '/' + gateway.id + '/index.html'
let url = './' + gateway.ship + '/' + gateway.id + '/index.html'

return(
<div key={index} className={gatewayContainer}>
{(isInstalled !== undefined) &&
<div className="text-center">
<iframe src={url} title={url} className={frame}></iframe>
<a href={url} className={linkStyle}>visit {name}</a>
</div>}
<h2 className="text-left">{name}</h2>
<h3 className="text-left">{gateway.ship}</h3>
{(isInstalled === undefined) &&
<button onClick={() => pokeInstall(gateway)} className={btnStyle}
>install</button>}
</div>)}
)
}
</div> :
<div>Yet to be dicovered</div>}
<div className='flexBox'>
{installedGateways.map((gateway, index) => {
let name = gateway.name
//let url = 'http://localhost:80/apps/near/' + gateway.ship + '/' + gateway.id + '/gateway/'
let url = './near/' + gateway.ship + '/' + gateway.id + '/gateway/'
return(
<div className='gatewayContainer' id={index} key={index}>
<iframe src={url} title={url} className='frame'></iframe>
<div className='info'>
<h2 className='name' href={url}>{name}</h2>
<h3 className='ship'>{gateway.ship}</h3>
<h4 className='text'>{gateway.about}</h4>
</div>
<div className="git">
<a href={url}>Gateway</a>
</div></div>
)})}
{newGateways !== null ?
(newGateways.map((gateway, index) =>{
return(
<div className='gatewayContainer' id='new' key={index}>
<h1 className='addButton'>+</h1>
<div className='info'>
<h2 className="name">{gateway.name}</h2>
<h3 className="ship">{gateway.ship}</h3>
<h4 className='text'>{gateway.about}</h4>
</div>
<div className='install'>
<button onClick={() => pokeInstall(gateway)}
>Mirror</button>
</div>
</div>)})):<div></div>}
</div>
: <div><h2 className="headers">Yet to be dicovered. Get some %pals</h2></div>
}
</div>
)

Expand Down
43 changes: 23 additions & 20 deletions ui/src/components/NewGateway.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, {useState} from 'react'

function NewGateway(api) {
const [newGateway, setNewGateway]= useState({})

function NewGateway(props) {
const [newGateway, setNewGateway]= useState({})
const api = props.api
const setShowNew = props.setShowNew
function handleChange(e) {
newGateway[e.target.name] = e.target.value
}
Expand All @@ -11,37 +12,39 @@ const [newGateway, setNewGateway]= useState({})
api.poke({
app: "near-gateways",
mark: "near-action",
json: {"publish": {"name":newGateway.name, 'url':newGateway.url}},
json: {"publish": {"name":newGateway.name, "url":newGateway.url, "about":newGateway.about}},
onSuccess: () => setNewGateway({}),
onError: () => setError('Failed to fetch glob from ' + newGateway.url),
});
}

const formContainer = "mt-4 p-4 font-medium w-8/10"
const inputStyle = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-half p-2.5"
const labelStyle = "pt-4 font-medium"
const btnStyle = "text-white bg-gray-400 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium w-full sm:w-auto px-5 py-2.5 text-center m-4"
const paragraph = "mt-3 mb-3"
const formStyle = "grid align-center w-9/12"

return(
<div className={formContainer}>
<p className={paragraph}>
<div className='formContainer'>
<button className='closeNewBtn' onClick={()=>{setShowNew(false)}}>x</button>
<p className='paragraph'>
1. Glob gateway using -landscape!make-glob.
<br/>
2. Upload it to your s3 bucket.
<br/>
3. Publish gateway through form below.
<br/>
------
<br/><br/>
If your gateway is ReactApp before globbing in dist/index.html, change all href of scripts and links from apps/desk/assest/... to ./assets/...
</p>
<form onSubmit={publishPoke} className={formStyle}>
<label className={labelStyle}>name</label>
<input name="name" value={newGateway.name} onChange={(e) => handleChange(e)} className={inputStyle} required="true" />
<label className={labelStyle}>glob url</label>
<input name="url" value={newGateway.url} onChange={(e) => handleChange(e)} className={inputStyle} required="true" />
<button type="submit" className={btnStyle}>publish gateway</button>
<form onSubmit={publishPoke} className='formStyle'>
<div className='nameForm'>
<h3 className='labelStyle'>name</h3>
<input name="name" value={newGateway.name} onChange={(e) => handleChange(e)} className='inputStyle' required="true" />
</div>
<div className='urlForm'>
<h3 className='labelStyle'>glob url</h3>
<input name="url" value={newGateway.url} onChange={(e) => handleChange(e)} className='inputStyle' required="true" />
</div>
<div className='aboutForm'>
<h3 className='labelStyle'>about</h3>
<textarea name="about" value={newGateway.url} onChange={(e) => handleChange(e)} className='inputStyle' maxlength="250" ></textarea>
</div>
<button type="submit" className='btnStyle'>publish gateway</button>
</form>
</div>
)
Expand Down
Loading

0 comments on commit e3c4772

Please sign in to comment.