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.14

Browse Source
This commit is contained in:
Anton 2023-09-14 13:56:30 +02:00
parent 055b285704
commit c8c4c6875a
9 changed files with 132 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -1,16 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="light"> <html lang="en" data-theme="light">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta <meta name="description" content="Utopia is a cooperative real life manifestation game">
name="description"
content="Utopia is a cooperative real life manifestation game">
<title>Utopia Game</title> <title>Utopia Game</title>
</head> <meta property="og:title" content="Utopia Game" />
<body> <meta property="og:description" content="Utopia is a cooperative real life manifestation game" />
</head>
<body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

40
package-lock.json generated
View File

@ -14,7 +14,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2",
"utopia-ui": "^3.0.0-alpha.8" "utopia-ui": "^3.0.0-alpha.14"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",
@ -2341,11 +2341,11 @@
} }
}, },
"node_modules/@remix-run/router": { "node_modules/@remix-run/router": {
"version": "1.6.2", "version": "1.9.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
"integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==", "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
"engines": { "engines": {
"node": ">=14" "node": ">=14.0.0"
} }
}, },
"node_modules/@surma/rollup-plugin-off-main-thread": { "node_modules/@surma/rollup-plugin-off-main-thread": {
@ -5399,29 +5399,29 @@
} }
}, },
"node_modules/react-router": { "node_modules/react-router": {
"version": "6.11.2", "version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
"integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
"dependencies": { "dependencies": {
"@remix-run/router": "1.6.2" "@remix-run/router": "1.9.0"
}, },
"engines": { "engines": {
"node": ">=14" "node": ">=14.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=16.8" "react": ">=16.8"
} }
}, },
"node_modules/react-router-dom": { "node_modules/react-router-dom": {
"version": "6.11.2", "version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
"integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
"dependencies": { "dependencies": {
"@remix-run/router": "1.6.2", "@remix-run/router": "1.9.0",
"react-router": "6.11.2" "react-router": "6.16.0"
}, },
"engines": { "engines": {
"node": ">=14" "node": ">=14.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=16.8", "react": ">=16.8",
@ -6458,16 +6458,16 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
}, },
"node_modules/utopia-ui": { "node_modules/utopia-ui": {
"version": "3.0.0-alpha.8", "version": "3.0.0-alpha.14",
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.8.tgz", "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.14.tgz",
"integrity": "sha512-a8w7mJxNPoVcG8GPbQNaIj64Sbj69lWtaxh7W62hpmg/PxgFmmU1pwxuRunUqalEUh3WYMvQIJxzNlHISZyIsg==", "integrity": "sha512-kKXucX6Ahe5NBSyTlFN4LP7BBS0dLYFj5zVdxXSLbIY8Au9KSI8O5q4mTprb1WoR3U3lbThf6QkD3PcdeKkrQw==",
"dependencies": { "dependencies": {
"@heroicons/react": "^2.0.17", "@heroicons/react": "^2.0.17",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react-leaflet": "^4.2.1", "react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0", "react-leaflet-cluster": "^2.1.0",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.16.0",
"react-string-replace": "^1.1.1", "react-string-replace": "^1.1.1",
"react-toastify": "^9.1.3", "react-toastify": "^9.1.3",
"tributejs": "^5.1.3", "tributejs": "^5.1.3",

2
package.json
View File

@ -16,7 +16,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2",
"utopia-ui": "^3.0.0-alpha.8" "utopia-ui": "^3.0.0-alpha.14"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.28", "@types/react": "^18.0.28",

13
src/App.tsx
View File

@ -1,4 +1,4 @@
import { AppShell, SideBar, Content, AuthProvider, useAuth, Settings, Modal, LoginPage, SignupPage } from 'utopia-ui' import { AppShell, SideBar, Content, AuthProvider, Settings, Modal, LoginPage, SignupPage } from 'utopia-ui'
import { routes } from './routes/sidebar' import { routes } from './routes/sidebar'
import { Route, Routes } from 'react-router-dom' import { Route, Routes } from 'react-router-dom'
import MapContainer from "./pages/MapContainer" import MapContainer from "./pages/MapContainer"
@ -7,23 +7,22 @@ import Concept from './pages/Concept'
import { userApi } from './api/userApi' import { userApi } from './api/userApi'
function App() { function App() {
return ( return (
<div className="App overflow-x-hidden"> <div className="App overflow-x-hidden">
<AuthProvider userApi={new userApi}> <AuthProvider userApi={new userApi}>
<AppShell appName="Utopia Game" useAuth={useAuth}> <AppShell appName="Utopia Game">
<Modal/> <Modal/>
<SideBar routes={routes} /> <SideBar routes={routes} />
<Content> <Content>
{/** <Quests /> */} {/** <Quests /> */ }
<Routes> <Routes>
<Route path="/" element={<MapContainer />} /> <Route path="/*" element={<MapContainer />} />
<Route path="/settings" element={<Settings useAuth={useAuth} />} /> <Route path="/settings" element={<Settings />} />
<Route path="/concept" element={<Concept/>} /> <Route path="/concept" element={<Concept/>} />
<Route path="/login" element={<LoginPage/>} /> <Route path="/login" element={<LoginPage/>} />
<Route path="/signup" element={<SignupPage/>} /> <Route path="/signup" element={<SignupPage/>} />

42
src/api/itemsApi.ts
View File

@ -6,53 +6,53 @@ import { ItemsApi } from 'utopia-ui/dist/types';
export class itemsApi<T> implements ItemsApi<T>{ export class itemsApi<T> implements ItemsApi<T>{
collectionName : string; collectionName: string;
constructor(collectionName : string) { constructor(collectionName: string) {
this.collectionName = collectionName; this.collectionName = collectionName;
} }
async getItems() { async getItems() {
try { try {
return await directusClient.request(readItems(this.collectionName as never,{limit: 500 })); return await directusClient.request(readItems(this.collectionName as never, { limit: 500 }));
} catch (error: any) { } catch (error: any) {
console.log(error.errors[0].message); console.log(error);
throw new Error(error.errors[0].message); } if (error.errors[0]?.message)
throw error.errors[0].message;
else throw error;
}
} }
async createItem(item: T & { id?: string }) { async createItem(item: T & { id?: string }) {
try { try {
return await directusClient.request(createItem(this.collectionName as keyof MyCollections,item)) return await directusClient.request(createItem(this.collectionName as keyof MyCollections, item))
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
throw new Error(error.errors[0].message); if (error.errors[0]?.message)
throw error.errors[0].message;
else throw error;
} }
} }
async updateItem(item: T & { id?: string }) { async updateItem(item: T & { id?: string }) {
try { try {
return await directusClient.request(updateItem(this.collectionName as keyof MyCollections,item.id!, item)) return await directusClient.request(updateItem(this.collectionName as keyof MyCollections, item.id!, item))
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
throw new Error(error.errors[0].message); if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
} }
} }
async deleteItem(id: string ) { async deleteItem(id: string) {
try { try {
return await directusClient.request(deleteItem(this.collectionName as keyof MyCollections,id)) return await directusClient.request(deleteItem(this.collectionName as keyof MyCollections, id))
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
throw new Error(error.errors[0].message); if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
} }
} }
} }

23
src/api/permissionsApi.ts Normal file
View File

@ -0,0 +1,23 @@
import { readPermissions } from '@directus/sdk';
import { directusClient } from './directus';
import { ItemsApi, Permission } from 'utopia-ui/dist/types';
export class permissionsApi implements ItemsApi<Permission>{
constructor() {
}
async getItems() {
try {
return await directusClient.request(readPermissions());
} catch (error: any) {
console.log(error);
if (error.errors[0]?.message)
throw error.errors[0].message;
else throw error;
}
}
}

37
src/api/userApi.ts
View File

@ -8,34 +8,46 @@ export class userApi implements UserApi {
async register(email: string, password: string, userName: string): Promise<any> { async register(email: string, password: string, userName: string): Promise<any> {
try { try {
return await directusClient.request(createUser({email: email, password: password, first_name: userName})); return await directusClient.request(createUser({email: email, password: password, first_name: userName}));
} catch (error) { } catch (error: any) {
console.log(error); console.log(error);
if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
} }
} }
async login(email: string, password: string): Promise<any> { async login(email: string, password: string): Promise<any> {
try { try {
return await directusClient.login(email,password,{mode: 'json'}); return await directusClient.login(email,password,{mode: 'json'});
} catch (error) { } catch (error: any) {
console.log(error); console.log(error);
throw new Error("Failed while logging User in"); if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
} }
} }
async logout(): Promise<any> { async logout(): Promise<any> {
try { try {
return await directusClient.logout(); return await directusClient.logout();
} catch (error) { } catch (error: any) {
console.log(error); console.log(error);
throw new Error("Failed while logging User out"); if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
} }
} }
async getUser(): Promise<any> { async getUser(): Promise<any> {
try { try {
let user = await directusClient.request(readMe()); let user = await directusClient.request(readMe());
return user; return user;
} catch (error) { } catch (error: any) {
console.log(error); console.log(error);
throw new Error("Failed while loading User"); if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
} }
} }
@ -43,9 +55,11 @@ export class userApi implements UserApi {
try { try {
const token = await directusClient.getToken(); const token = await directusClient.getToken();
return token; return token;
} catch (error) { } catch (error: any) {
console.log(error); console.log(error);
throw new Error("Failed while loading User Token"); if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
} }
} }
@ -56,10 +70,11 @@ export class userApi implements UserApi {
return res as any; return res as any;
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
throw new Error("Failed while updating User Profile"); if (error.errors[0].message)
throw error.errors[0].message;
else throw error;
} }
} }
} }

7
src/pages/MapContainer.tsx
View File

@ -1,5 +1,6 @@
import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, TextView, StartEndView } from 'utopia-ui' import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, TextView, StartEndView, Permissions } from 'utopia-ui'
import { itemsApi } from '../api/itemsApi' import { itemsApi } from '../api/itemsApi'
import { permissionsApi } from '../api/permissionsApi';
import { Place, Event, Tag } from '../api/directus'; import { Place, Event, Tag } from '../api/directus';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -9,6 +10,8 @@ function MapContainer() {
const [placesApi, setPlacesApi] = useState<itemsApi<Place>>(); const [placesApi, setPlacesApi] = useState<itemsApi<Place>>();
const [eventsApi, setEventsApi] = useState<itemsApi<Event>>(); const [eventsApi, setEventsApi] = useState<itemsApi<Event>>();
const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>(); const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>();
const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>();
@ -17,6 +20,7 @@ function MapContainer() {
setPlacesApi(new itemsApi<Place>('places')); setPlacesApi(new itemsApi<Place>('places'));
setEventsApi(new itemsApi<Event>('events')); setEventsApi(new itemsApi<Event>('events'));
setTagsApi(new itemsApi<Tag>('tags')); setTagsApi(new itemsApi<Tag>('tags'));
setPermissionsApiInstance(new permissionsApi());
@ -62,6 +66,7 @@ function MapContainer() {
api={placesApi} api={placesApi}
/> />
<Tags api={tagsApi}></Tags> <Tags api={tagsApi}></Tags>
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
</UtopiaMap> </UtopiaMap>
) )
} }

10
vite.config.ts
View File

@ -10,17 +10,17 @@ export default defineConfig({
react(), react(),
VitePWA({manifest: { VitePWA({manifest: {
"short_name": "Utopia Game", "short_name": "Utopia Game",
"name": "Utopia Game: A Cooperative Real Life Manifestation Game", "name": "Utopia Game: The Real Life Manifestation Game",
"icons": [ "icons": [
{ {
"src": "3markers.svg", "src": "3markers.svg",
"sizes": "192x192", "sizes": "any",
"type": "image/svg" "type": "image/svg+xml"
} }
], ],
"start_url": "/index.html", "start_url": "/",
"display": "fullscreen", "display": "fullscreen",
"orientation": "portrait" "orientation": "natural"
}}) }})
] ]
}) })