fixed packages

package.json

@@ -13,14 +13,14 @@
     "@aws-amplify/ui-react": "^6.1.8",
     "@aws-sdk/client-bedrock-runtime": "^3.564.0",
     "@aws-sdk/client-s3": "^3.564.0",
-    "aws-amplify": "^6.1.5-unstable.89ecc6d.0",
+    "aws-amplify": "^6.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
-    "@aws-amplify/backend": "^0.13.3",
-    "@aws-amplify/backend-cli": "^0.14.0",
+    "@aws-amplify/backend": "^0.15.0",
+    "@aws-amplify/backend-cli": "^0.15.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/throttle-debounce": "^5.0.2",

src/App.tsx

@@ -16,17 +16,18 @@ function generateRandomEmoji() {
 
 const client = generateClient<Schema>()
 
-const defaultRoom: Schema["Room"] = {
+const defaultRoom = {
   id: "default",
   topic: "default",
   createdAt: "",
-  updatedAt: ""
-}
+  updatedAt: "",
+  pictures: async () => ({ data: [] })
+} satisfies Schema["Room"]["type"]
 
 function App() {
   const [username, setUsername] = useState<string>(generateRandomEmoji())
   const [currentRoomId, setCurrentRoomId] = useState<string>("default")
-  const [rooms, setRooms] = useState<Schema["Room"][]>([defaultRoom])
+  const [rooms, setRooms] = useState<Schema["Room"]["type"][]>([defaultRoom])
 
   useEffect(() => {
     const sub = client.models.Room.observeQuery().subscribe({

src/ControlPanel.tsx

@@ -3,7 +3,7 @@ import { RoomSelector } from "./RoomSelector";
 
 export function ControlPanel(props: {
   currentRoomId: string,
-  rooms: Schema["Room"][],
+  rooms: Schema["Room"]["type"][],
   onRoomChange: (roomId: string) => void,
   username: string,
   onUsernameChange: React.MouseEventHandler<HTMLButtonElement>,

src/PictureManager.tsx

@@ -10,7 +10,7 @@ type PictureManagerProps = {
 const client = generateClient<Schema>()
 
 export function PictureManager({ roomId }: PictureManagerProps) {
-  const [pictures, setPictures] = useState<Schema["Picture"][]>([])
+  const [pictures, setPictures] = useState<Schema["Picture"]["type"][]>([])
   const [imageUrls, setImageUrls] = useState<string[]>([])
   const [haiku, setHaiku] = useState<string>()
 
@@ -71,7 +71,9 @@ export function PictureManager({ roomId }: PictureManagerProps) {
 
       <button onClick={async () => {
         const { data } = await client.queries.generateHaiku({ roomId })
-        setHaiku(data)
+        if (data !== null) {
+          setHaiku(data)
+        }
       }}>Generate Haiku</button>
     </div>
   </>

src/RoomSelector.tsx

@@ -8,7 +8,7 @@ export function RoomSelector({
   currentRoomId,
   onRoomChange
 }: {
-  rooms: Schema["Room"][],
+  rooms: Schema["Room"]["type"][],
   currentRoomId: string,
   onRoomChange: (roomId: string) => void
 }) {
@@ -26,7 +26,10 @@ export function RoomSelector({
       const { data: room } = await client.models.Room.create({
         topic: newRoomName
       })
-      onRoomChange(room.id)
+
+      if (room !== null) {
+        onRoomChange(room.id)
+      }
     }}>[+ add]</button>
   </>
 }

src/main.tsx

@@ -5,9 +5,9 @@ import './index.css'
 import { Amplify } from 'aws-amplify';
 import { Authenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css'
-import config from '../amplifyconfiguration.json'
+import outputs from '../amplify_outputs.json'
 
-Amplify.configure(config);
+Amplify.configure(outputs);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>