antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated to utopia-ui@3.0.0-alpha.138

Browse Source
This commit is contained in:
Anton Tranelis 2024-05-02 22:18:20 +02:00
parent e4a56218f5
commit d3417d6d59
8 changed files with 76 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -7,10 +7,6 @@
<meta name="description" content="collaborative and interactive Maps for Utopians"> <meta name="description" content="collaborative and interactive Maps for Utopians">
<link rel="icon" type="image/png" href="/3markers-globe.svg" /> <link rel="icon" type="image/png" href="/3markers-globe.svg" />
<title>Utopia Map</title> <title>Utopia Map</title>
<meta property="og:title" content="Utopia Map" />
<meta property="og:description" content="collaborative and interactive Maps for Utopians" />
<meta property="og:image" content="/3markers-globe_256.png" />
</head> </head>
<body> <body>

50
package-lock.json generated
View File

@ -16,8 +16,8 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-rnd": "^10.4.1", "react-rnd": "^10.4.1",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.23.0",
"utopia-ui": "^3.0.0-alpha.126" "utopia-ui": "^3.0.0-alpha.138"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.79", "@types/react": "^18.2.79",
@ -1950,8 +1950,9 @@
} }
}, },
"node_modules/@remix-run/router": { "node_modules/@remix-run/router": {
"version": "1.9.0", "version": "1.16.0",
"license": "MIT", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
"integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
"engines": { "engines": {
"node": ">=14.0.0" "node": ">=14.0.0"
} }
@ -1968,20 +1969,20 @@
} }
}, },
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "5.32.0", "version": "5.32.1",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.32.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.32.1.tgz",
"integrity": "sha512-Z3flEgCat55DRXU5UMwYU1U+DgFZKA3iufyOKs+II7iRAo0uXkeU7PH5e6sOH1CGEag0IpKmZxlUFpCg6roSKw==", "integrity": "sha512-mCWa1wdGb1jiny4+qYegbSeadcFj+Nq65KFSs4A1DRveoIq7SrTwUhqu7hrB6d54cQH5x59DfJvxusn3w1Cj/g==",
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "5.32.0", "version": "5.32.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.32.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.32.1.tgz",
"integrity": "sha512-+E3UudQtarnx9A6xhpgMZapyF+aJfNBGFMgI459FnduEZqT/9KhOWnMOneZahLRt52yzskSA0AuOyLkXHK0yBA==", "integrity": "sha512-+nXLMB0JK0XwTJ+lQt49DPNLrbSppni9N5W5yMR085yW3YaRKRUFhfVTER3TvQd1UycHpoGPFnt1gHiijXERAg==",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.32.0" "@tanstack/query-core": "5.32.1"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@ -3048,9 +3049,10 @@
} }
}, },
"node_modules/ejs": { "node_modules/ejs": {
"version": "3.1.9", "version": "3.1.10",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
"integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
"dev": true, "dev": true,
"license": "Apache-2.0",
"dependencies": { "dependencies": {
"jake": "^10.8.5" "jake": "^10.8.5"
}, },
@ -5970,10 +5972,11 @@
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
}, },
"node_modules/react-router": { "node_modules/react-router": {
"version": "6.16.0", "version": "6.23.0",
"license": "MIT", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
"integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
"dependencies": { "dependencies": {
"@remix-run/router": "1.9.0" "@remix-run/router": "1.16.0"
}, },
"engines": { "engines": {
"node": ">=14.0.0" "node": ">=14.0.0"
@ -5983,11 +5986,12 @@
} }
}, },
"node_modules/react-router-dom": { "node_modules/react-router-dom": {
"version": "6.16.0", "version": "6.23.0",
"license": "MIT", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
"integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
"dependencies": { "dependencies": {
"@remix-run/router": "1.9.0", "@remix-run/router": "1.16.0",
"react-router": "6.16.0" "react-router": "6.23.0"
}, },
"engines": { "engines": {
"node": ">=14.0.0" "node": ">=14.0.0"
@ -7241,9 +7245,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/utopia-ui": { "node_modules/utopia-ui": {
"version": "3.0.0-alpha.126", "version": "3.0.0-alpha.138",
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.126.tgz", "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.138.tgz",
"integrity": "sha512-RM4N4NNwLp+5fUwcboD/8Y7V/ocu9X3qEH/F5Isz45M7q3qymeshMn/ytQEvFdPKJq5aWBplvbnCYzfSUELqHw==", "integrity": "sha512-tW7IL5hW6Cgg9jClxwra6qdmMFWbNg2gT2vJT7y4JRil5LLHZzECabqYn1jo5ia8C0c07bRqXRtZdrRcODk3JA==",
"dependencies": { "dependencies": {
"@heroicons/react": "^2.0.17", "@heroicons/react": "^2.0.17",
"@tanstack/react-query": "^5.17.8", "@tanstack/react-query": "^5.17.8",

4
package.json
View File

@ -18,8 +18,8 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-rnd": "^10.4.1", "react-rnd": "^10.4.1",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.23.0",
"utopia-ui": "^3.0.0-alpha.126" "utopia-ui": "^3.0.0-alpha.138"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.79", "@types/react": "^18.2.79",

49
src/App.tsx
View File

@ -26,11 +26,11 @@ function App() {
const [map, setMap] = useState<any>(); const [map, setMap] = useState<any>();
const [layers, setLayers] = useState<any>(); const [layers, setLayers] = useState<any>();
const [layerPageRoutes, setLayerPageRoutes] = useState<any>(); const [layerPageRoutes, setLayerPageRoutes] = useState<any>();
const [loading, setLoading] = useState<boolean>(true);
useEffect(() => { useEffect(() => {
setPermissionsApiInstance(new permissionsApi()); setPermissionsApiInstance(new permissionsApi());
setTagsApi(new itemsApi<Tag>('tags', undefined, "36fc9ba7-1a6b-4fc2-9db1-39d67aaf6918"));
setMapApiInstance(new mapApi(window.location.origin)); setMapApiInstance(new mapApi(window.location.origin));
}, []) }, [])
@ -42,7 +42,8 @@ function App() {
const getMap = async () => { const getMap = async () => {
const map = await mapApiInstance?.getItems(); const map = await mapApiInstance?.getItems();
map && setMap(map); map && setMap(map);
map && setLayersApiInstance(new layersApi(map.id)); map && map!="null" && setLayersApiInstance(new layersApi(map.id));
map && map!="null" && map.own_tag_space ? setTagsApi(new itemsApi<Tag>('tags', undefined, map.id)) : setTagsApi(new itemsApi<Tag>('tags'));
} }
useEffect(() => { useEffect(() => {
@ -61,20 +62,24 @@ function App() {
} }
useEffect(() => { useEffect(() => {
if(map && map.name){ if (map && map.name) {
document.title = map?.name && map.name; document.title = map?.name && map.name;
let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement
if (!link) { if (!link) {
link = document.createElement('link'); link = document.createElement('link');
link.rel = 'icon'; link.rel = 'icon';
document.getElementsByTagName('head')[0].appendChild(link); document.getElementsByTagName('head')[0].appendChild(link);
} }
link.href = map?.logo && "https://api.utopia-lab.org/assets/"+map.logo; // Specify the path to your favicon link.href = map?.logo && "https://api.utopia-lab.org/assets/" + map.logo; // Specify the path to your favicon
}
setLoading(false);
}
}, [map]) }, [map])
if (map && layers) return ( if (map && layers) return (
@ -84,7 +89,7 @@ if(map && map.name){
<AuthProvider userApi={new userApi}> <AuthProvider userApi={new userApi}>
<AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName={map.name}> <AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName={map.name}>
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions> <Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
<Tags api={tagsApi}></Tags> {tagsApi && <Tags api={tagsApi}></Tags>}
<Modal> <Modal>
<ModalContent map={map} /> <ModalContent map={map} />
</Modal> </Modal>
@ -95,7 +100,7 @@ if(map && map.name){
<Route path="/*" element={<MapContainer map={map} layers={layers} />}> <Route path="/*" element={<MapContainer map={map} layers={layers} />}>
<Route path='login' element={<LoginPage />} /> <Route path='login' element={<LoginPage />} />
<Route path='signup' element={<SignupPage />} /> <Route path='signup' element={<SignupPage />} />
<Route path='reset-password' element={<RequestPasswordPage reset_url="https://map.collaborative-finance.org/set-new-password/" />} /> <Route path='reset-password' element={<RequestPasswordPage reset_url={map.url + "/set-new-password/"} />} />
<Route path='set-new-password' element={<SetNewPasswordPage />} /> <Route path='set-new-password' element={<SetNewPasswordPage />} />
<Route path="profile/*" element={<OverlayProfile />} /> <Route path="profile/*" element={<OverlayProfile />} />
<Route path="item/*" element={<OverlayItemProfile />} /> <Route path="item/*" element={<OverlayItemProfile />} />
@ -106,7 +111,7 @@ if(map && map.name){
<Route path="landingpage" element={<Landingpage />} /> <Route path="landingpage" element={<Landingpage />} />
{ {
layers.map((l: any) => layers.map((l: any) =>
<Route key={l.id} path={l.name} element={<OverlayItemsIndexPage layerName={l.name} breadcrumbs={[{ name: "Home", path: "/" }, { name: l.name, path: "/" + l.name }]} itemNameField={'name'} itemTextField={'text'} itemImageField={'image'} url={'/item/'} parameterField={'id'} itemSymbolField={'symbol'} itemSubnameField={'subname'} />} /> <Route key={l.id} path={l.name} element={<OverlayItemsIndexPage plusButton={l.index_plus_button} layerName={l.name} breadcrumbs={[{ name: "Home", path: "/" }, { name: l.name, path: "/" + l.name }]} itemNameField={'name'} itemTextField={'text'} itemImageField={'image'} url={'/item/'} parameterField={'id'} itemSymbolField={'symbol'} itemSubnameField={'subname'} />} />
) )
} }
</Route> </Route>
@ -116,12 +121,18 @@ if(map && map.name){
</AuthProvider> </AuthProvider>
</div> </div>
) )
else if (map == "null" && !loading) return (
<div className="flex items-center justify-center h-screen">
<div>
<p className='text-xl font-semibold'>This map does not exist</p>
</div>
</div>
)
else return ( else return (
<div className="flex items-center justify-center h-screen"> <div className="flex items-center justify-center h-screen">
<div> <span className="loading loading-spinner loading-lg"></span>
<p className='text-xl font-semibold'>This map does not exist</p>
</div>
</div> </div>
) )
} }

2
src/api/itemsApi.ts
View File

@ -30,7 +30,7 @@ export class itemsApi<T> implements ItemsApi<T>{
async getItems() { async getItems() {
try { try {
return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', "relations.*", { user_created: ['*', {offers: ['*'], needs: ['*']}] }], filter: this.filter, limit: 500 })); return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', "relations.*", "user_created.*", {offers: ['*'], needs: ['*']}] , filter: this.filter, limit: 500 }));
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
if (error.errors[0]?.message) if (error.errors[0]?.message)

3
src/api/mapApi.ts
View File

@ -13,7 +13,8 @@ export class mapApi {
async getItems() { async getItems() {
try { try {
const map = await directusClient.request(readItems("maps" as any, { fields: ['*'], filter: { "url": { "_eq": this.url } } as any, limit: 500 })); const map = await directusClient.request(readItems("maps" as any, { fields: ['*'], filter: { "url": { "_eq": this.url } } as any, limit: 500 }));
return map[0]; if(map[0]) return map[0];
else return "null";
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
if (error.errors[0]?.message) if (error.errors[0]?.message)

12
src/pages/MapContainer.tsx
View File

@ -13,8 +13,12 @@ function MapContainer({ layers, map }: { layers: Array<LayerProps>, map: any })
const [apis, setApis] = useState<Array<layerApi>>([]); const [apis, setApis] = useState<Array<layerApi>>([]);
useEffect(() => { useEffect(() => {
layers.map(layer => { layers.map((layer:LayerProps) => {
apis && setApis(current => [...current, { id: layer.id!, api: new itemsApi<Place>('items', layer.id) }]) apis && setApis(current => [...current, { id: layer.id!, api: new itemsApi<Place>('items', layer.id, undefined, {
...(layer.itemType.name == "event" && { "end": {
"_gte": "$NOW"
}})
}) }])
}) })
}, [layers]) }, [layers])
@ -36,7 +40,7 @@ function MapContainer({ layers, map }: { layers: Array<LayerProps>, map: any })
markerIcon={layer.markerIcon} markerIcon={layer.markerIcon}
markerShape={layer.markerShape} markerShape={layer.markerShape}
onlyOnePerOwner={layer.onlyOnePerOwner} onlyOnePerOwner={layer.onlyOnePerOwner}
markerDefaultColor='#3D3846' markerDefaultColor={layer.menuColor}
itemType={layer.itemType} itemType={layer.itemType}
itemNameField='name' itemNameField='name'
itemTextField='text' itemTextField='text'
@ -44,6 +48,8 @@ function MapContainer({ layers, map }: { layers: Array<LayerProps>, map: any })
itemSubnameField='subname' itemSubnameField='subname'
itemColorField='color' itemColorField='color'
itemOwnerField='user_created' itemOwnerField='user_created'
itemOffersField='offers'
itemNeedsField='needs'
customEditLink='/edit-item' customEditLink='/edit-item'
customEditParameter='id' customEditParameter='id'
api={apis?.find(api => api.id === layer.id)?.api}> api={apis?.find(api => api.id === layer.id)?.api}>

10
tailwind.config.js
View File

@ -1,12 +1,12 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ["./src/**/*.{html,js,jsx,tsx,ts}"], content: ["./src/**/*.{html,js,jsx,tsx,ts}"],
theme: { theme: {
extend: { extend: {
// that is animation class // that is animation class
animation: { animation: {
fade: 'fadeOut 1s ease-in-out', fade: 'fadeOut 1s ease-in-out',
}, },
}, },
}, },
plugins: [require("daisyui")], plugins: [require("daisyui")],