updated to utopia-ui@3.0.0-alpha-62

package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@directus/sdk": "^12.0.1",
-    "@heroicons/react": "^2.0.17",
+    "@heroicons/react": "^2.1.1",
     "@types/geojson": "^7946.0.10",
+    "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
-    "utopia-ui": "^3.0.0-alpha.41"
+    "utopia-ui": "^3.0.0-alpha.62"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
@@ -25,7 +26,7 @@
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.16",
-    "daisyui": "^3.8.0",
+    "daisyui": "^4.6.1",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",

src/App.tsx

@@ -1,4 +1,4 @@
-import { AppShell, SideBar, Content, AuthProvider, UserSettings, ProfileSettings, Modal, LoginPage, SignupPage, Quests } from 'utopia-ui'
+import { AppShell, SideBar, Content, AuthProvider, UserSettings, ProfileSettings, Modal, LoginPage, SignupPage, Quests, RequestPasswordPage, SetNewPasswordPage } from 'utopia-ui'
 import { bottomRoutes, routes } from './routes/sidebar'
 import { Route, Routes } from 'react-router-dom'
 import MapContainer from "./pages/MapContainer"
@@ -11,8 +11,6 @@ import { assetsApi } from './api/assetsApi'
 import { ModalContent } from './ModalContent'
 import { ProfileView } from './pages/ProfileView'
 
-
-
 function App() {
 
   return (
@@ -20,7 +18,7 @@ function App() {
     <div className="App overflow-x-hidden">
 
       <AuthProvider userApi={new userApi}>
-        <AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Utopia Game">
+        <AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Utopia Game" nameWidth={180}>
         <Modal>
           <ModalContent/>
         </Modal>
@@ -28,14 +26,17 @@ function App() {
           <Content>
             <Quests /> 
             <Routes>
-              <Route path="/*" element={<MapContainer />} />
+              <Route path="/*" element={<MapContainer />}>
+                <Route path='login' element={<LoginPage />}/>
+                <Route path='signup' element={<SignupPage />}/>
+                <Route path='reset-password' element={<RequestPasswordPage reset_url="https://utopia-game.org/set-new-password/"/>}/>
+                <Route path='set-new-password' element={<SetNewPasswordPage />}/>
+              </Route>
               <Route path="/settings" element={<UserSettings />} />
               <Route path="/profile" element={<ProfileSettings />} />
               <Route path="/concept" element={<Concept/>} />
               <Route path="/projects" element={<Projects/>} />
               <Route path="/projects/*" element={<ProjectView/>} />
-              <Route path="/login" element={<LoginPage/>} />
-              <Route path="/signup" element={<SignupPage/>} />
               <Route path="/profile/*" element={<ProfileView/>} />
             </Routes>
           </Content>

src/api/itemsApi.ts

@@ -7,14 +7,16 @@ import { ItemsApi } from 'utopia-ui/dist/types';
 export class itemsApi<T> implements ItemsApi<T>{
 
   collectionName: string;
+  filter: any;
 
-  constructor(collectionName: string) {
+  constructor(collectionName: string, filter?: any) {
     this.collectionName = collectionName;
+    this.filter = filter;
   }
 
   async getItems() {
     try {
-      return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', { user_created: ['*'] }], limit: 500 }));
+      return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', { user_created: ['*'] }], filter: this.filter, limit: 500 }));
     } catch (error: any) {
       console.log(error);
       if (error.errors[0]?.message)

src/api/refiBcnApi.ts

@@ -0,0 +1,24 @@
+import axios from 'axios';
+import { ItemsApi } from 'utopia-ui/dist/types';
+
+
+export class refiBcnApi implements ItemsApi<any>{
+
+  collectionName: string;
+
+  constructor(collectionName: string) {
+    this.collectionName = collectionName;
+  }
+
+  async getItems() {
+    try {
+      return (await axios.get('https://antontranelis.github.io/ReFi-Barcelona-Prototype/projects/index.json')).data.data;
+    } catch (error: any) {
+      console.log(error);
+      if (error.errors[0]?.message)
+        throw error.errors[0].message;
+      else throw error;
+    }
+  }
+
+}

src/api/userApi.ts

@@ -1,4 +1,4 @@
-import { createUser, readMe, updateMe} from '@directus/sdk';
+import { createUser, passwordRequest, passwordReset, readMe, updateMe} from '@directus/sdk';
 import {  directusClient } from './directus';
 import { UserApi, UserItem } from 'utopia-ui/dist/types';
 
@@ -75,6 +75,29 @@ export class userApi implements UserApi {
       else throw error;
     }
   }
+
+  async requestPasswordReset(email:string, reset_url?:string): Promise<any> {
+    try {
+    return await directusClient.request(passwordRequest(email,reset_url));
+    } catch (error: any) {
+      console.log(error);
+      if (error.errors[0].message)
+        throw error.errors[0].message;
+      else throw error;
+    }
+  }
+
+  async passwordReset(reset_token:string, new_password:string): Promise<any> {
+    try {
+    return await directusClient.request(passwordReset(reset_token, new_password));
+    } catch (error: any) {
+      console.log(error);
+      if (error.errors[0].message)
+        throw error.errors[0].message;
+      else throw error;
+    }
+  }
+
 }
 
 

src/pages/MapContainer.tsx

@@ -3,6 +3,7 @@ import { itemsApi } from '../api/itemsApi';
 import { permissionsApi } from '../api/permissionsApi';
 import { Place, Event, Tag } from '../api/directus';
 import { useEffect, useState } from 'react';
+import {CalendarDaysIcon, MapPinIcon, UserIcon} from '@heroicons/react/20/solid'
 
 function MapContainer() {
 
@@ -22,26 +23,34 @@ function MapContainer() {
     setEventsApi(new itemsApi<Event>('events'));
     setTagsApi(new itemsApi<Tag>('tags'));
     setPermissionsApiInstance(new permissionsApi());
-    setUpdatesApiInstance(new itemsApi('updates'));
+    setUpdatesApiInstance(new itemsApi('updates', {
+      "latest": {
+        "_eq": true
+      }
+    }));
   }, []);
 
+  const icon = CalendarDaysIcon;
+
+
   return (
 
+
     <UtopiaMap zoom={5} height='calc(100dvh - 64px)' width="100%">
       <Layer
-        name='events'
-        menuIcon='CalendarDaysIcon'
+        name='Events'
+        menuIcon={icon}
         menuText='add new event'
         menuColor='#f9a825'
         markerIcon='calendar-days-solid'
         markerShape='square'
-        markerDefaultColor='#777'
+        markerDefaultColor='#818583'
         //     data={events}
         api={eventsApi}>
         <ItemForm>
           <PopupTextInput dataField='name' placeholder='Name'></PopupTextInput>
           <PopupStartEndInput></PopupStartEndInput>
-          <PopupTextAreaInput dataField='text' placeholder={'Test'} style="tw-h-40"></PopupTextAreaInput>
+          <PopupTextAreaInput dataField='text' placeholder={'Text ...'} style="tw-h-40"></PopupTextAreaInput>
         </ItemForm>
         <ItemView>
           <StartEndView></StartEndView>
@@ -49,37 +58,42 @@ function MapContainer() {
         </ItemView>
       </Layer>
       <Layer
-        name='places'
-        menuIcon='MapPinIcon'
+        name='Places'
+        menuIcon={MapPinIcon}
         menuText='add new place'
         menuColor='#2E7D32'
         markerIcon='circle-solid'
         markerShape='circle'
-        markerDefaultColor='#777'
+        markerDefaultColor='#818583'
         // data={places}
         api={placesApi} />
       <Layer
-        name='people'
-        menuIcon='UserIcon'
+        name='People'
+        menuIcon={UserIcon}
         menuText='place your profile on the map'
         menuColor='#C62828'
         markerIcon='user'
         markerShape='square'
-        markerDefaultColor='#777'
-        itemTitleField='user_created.first_name'
+        markerDefaultColor='#818583'
+        itemNameField='user_created.first_name'
+        itemTextField='user_created.description'
         itemAvatarField='user_created.avatar'
         itemColorField='user_created.color'
         itemOwnerField="user_created.id"
+        onlyOnePerOwner={true}
         // data={places}
         api={updatesApiInstance}>
         <ItemView>
           <PopupButton url={'/profile'} parameterField={'user_created.id'} text={'Profile'} colorField={'user_created.color'} />
-          <TextView></TextView>
+          <TextView truncate></TextView>
         </ItemView>
-        <ItemForm>
-          <PopupTextAreaInput dataField='text' placeholder={'Test'} style="tw-h-40"></PopupTextAreaInput>
+        <ItemForm title='Place yor Profile'>
+          <div className='flex justify-center'>
+          <p>Press Save to place your Profile to the Map</p>
+          </div>
         </ItemForm>
       </Layer>
+
       <Tags api={tagsApi}></Tags>
       <Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
     </UtopiaMap>

src/pages/ProfileView.tsx

@@ -32,7 +32,7 @@ export const ProfileView = () => {
         <>
           <div className="flex flex-row">
             
-            <p className="text-4xl"><img className='h-20 rounded-full inline' src={`https://api.utopia-lab.org/assets/${user.avatar} : ''}`}></img> {user?.first_name}</p>
+            <p className="text-4xl">{user.avatar && <img className='h-20 rounded-full inline' src={`https://api.utopia-lab.org/assets/${user.avatar} : ''}`}></img> } {user?.first_name}</p>
 
           </div>
           <p className='text-sm mt-8 mb-2 whitespace-pre-wrap	'>{user?.description}</p>

tailwind.config.js

@@ -5,5 +5,8 @@ export default {
     extend: {},
   },
   plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark", "cupcake", "retro", "cyberpunk", "aqua"]
+  }
 }
 

vite.config.ts

@@ -7,8 +7,12 @@ import { VitePWA } from 'vite-plugin-pwa'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    react(),
-    VitePWA({manifest: {
+    react()
+  ]
+})
+
+{/**
+VitePWA({manifest: {
       "short_name": "Utopia Game",
       "name": "Utopia - A Real Life Manifestation Game",
       "icons": [
@@ -27,5 +31,4 @@ export default defineConfig({
       "display": "fullscreen",
       "orientation": "natural"
     }})
-  ]
-})
+   */}