home rooms are charging correctly

srcs/requirements/nestjs/api_back/src/chat/chat.controller.ts

@@ -3,6 +3,7 @@ import { AuthenticateGuard, TwoFactorGuard } from 'src/auth/42/guards/42guards';
 import { ChatService } from './chat.service';
 import { User } from 'src/users/entities/user.entity';
 import { joinRoomDto } from './dto/joinRoom.dto';
+import { setCurrentRoomDto } from './dto/setCurrentRoom.dto';
 
 @Controller('chat')
 export class ChatController {
@@ -16,17 +17,26 @@ export class ChatController {
 	@Get('rooms')
 	async getRooms(@Req() req, @Res() res)
 	{
-		console.log("in getRooms");
+		//console.log("in getRooms");
 		return await this.chatService.getRooms(req.user, res);
 	}
 
+	@UseGuards(AuthenticateGuard)
+	@UseGuards(TwoFactorGuard)
+	@Get('current')
+	async setCurrentRoom(@Body() setCurrentRoomDto: setCurrentRoomDto, @Req() req, @Res() res)
+	{
+		//console.log("in setCurrentRoom");
+		return await this.chatService.setCurrentRoom(req.user, setCurrentRoomDto.name, res);
+	}
+
 	@UseGuards(AuthenticateGuard)
 	@UseGuards(TwoFactorGuard)
 	@Post('join')
 	async joinRoom(@Body() joinRoomDto: joinRoomDto, @Req() req, @Res() res)
 	{
-		const user: User = req.user;
+		//console.log("in joinRoom");
-		return await this.chatService.addUserToRoom(user, joinRoomDto, res);
+		return await this.chatService.addUserToRoom(req.user, joinRoomDto, res);
 	}
 
 	@UseGuards(AuthenticateGuard)

srcs/requirements/nestjs/api_back/src/chat/chat.service.ts

@@ -17,22 +17,49 @@ export class ChatService {
 		private readonly chatroomRepository: Repository<Chatroom>,
 	) { }
 
-	//async add_message(server, message) {
+
-	//	return server.emit('message', message);
+	// temp for test
-	//}
+	sleep(ms) {
+		return new Promise(resolve => setTimeout(resolve, ms));
+	}
 
 	async getRooms(user: User, @Res() res)
 	{
+		const rooms = await this.chatroomRepository
+			.createQueryBuilder('chatroom')
+			.where(':user_id IN (chatroom.users)', { user_id: user.fortyTwoId })
+			.getMany();
 
-		/*
+		return res.status(HttpStatus.OK).json({ rooms: rooms });
+	}
+
+	async findRoomByName(name: string, @Res() res)
+	{
 		const room = await this.chatroomRepository
 			.createQueryBuilder('chatroom')
-			.where(':user_id IN chatroom.users', { user_id: user.fortyTwoId })
+			.where('chatroom.name = :name', { name: name })
-			.getMany();
+			.getOne();
-		console.log(room);
-		*/
 
-		//return chatrooms;
+		return res.status(HttpStatus.OK).json({ room: room });
+	}
+
+	async findRoomById(id: number, @Res() res)
+	{
+		const room = await this.chatroomRepository
+			.createQueryBuilder('chatroom')
+			.where('chatroom.id = :id', { id: id })
+			.getOne();
+
+		return res.status(HttpStatus.OK).json({ room: room });
+	}
+
+	async setCurrentRoom(user: User, name: string, @Res() res)
+	{
+		const user_db = await this.usersService.findOneByFourtyTwoId(user.fortyTwoId);
+		user_db.currentRoom = name;
+		this.userRepository.save(user_db);
+		
+		return res.status(HttpStatus.OK).json({ message: `room "${name}" is now current room` });
 	}
 
 	async addUserToRoom(user: User, joinRoomDto: joinRoomDto, @Res() res)
@@ -41,7 +68,6 @@ export class ChatService {
 			.createQueryBuilder('chatroom')
 			.where('chatroom.name = :name', { name: joinRoomDto.room_name })
 			.getOne();
-		console.log(room);
 		if (room)
 			throw new HttpException(`This room already exist`, HttpStatus.CONFLICT);
 
@@ -53,6 +79,8 @@ export class ChatService {
 		newChatroom.users = [user.fortyTwoId];
 		this.chatroomRepository.save(newChatroom);
 
+		this.setCurrentRoom(user, joinRoomDto.room_name, res)
+
 		return res.status(HttpStatus.OK).json({ room_name: joinRoomDto.room_name, message: "successfull room creation" });
 	}
 

srcs/requirements/nestjs/api_back/src/chat/dto/joinRoom.dto.ts

@@ -1,18 +1,18 @@
 import { IsBoolean, IsEmpty, IsInt, IsNotEmpty, IsNumber, IsString, IsOptional } from "class-validator";
 import { IsNull } from "typeorm";
 
-export class joinRoomDto {
+export class joinRoomDto
+{
+	@IsString()
+	@IsNotEmpty()
+	room_name: string;
 
 	@IsString()
 	@IsNotEmpty()
-	room_name : string
+	room_type: 'public' | 'private' | 'direct';
-
-	@IsString()
-	@IsNotEmpty()
-	room_type : 'public' | 'private' | 'direct';
 
 	@IsString()
 	@IsOptional()
-	room_password : string
+	room_password: string;
 }
 

srcs/requirements/nestjs/api_back/src/chat/dto/setCurrentRoom.dto.ts

@@ -0,0 +1,10 @@
+import { IsBoolean, IsEmpty, IsInt, IsNotEmpty, IsNumber, IsString, IsOptional } from "class-validator";
+import { IsNull } from "typeorm";
+
+export class setCurrentRoomDto
+{
+	@IsString()
+	@IsNotEmpty()
+	name: string;
+}
+

srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts

@@ -54,10 +54,15 @@ export class User {
 	@OneToOne(() => UserStats, { cascade: true })
 	stats: UserStats;
 
-//	@OneToMany(type => Chatroom, chatroom => chatroom.owner)
+	// ROOMS :
-//	ownedRooms: Chatroom[];
+
-//
+	//@OneToMany(type => Chatroom, chatroom => chatroom.owner)
-//	@ManyToMany(type => Chatroom)
+	//ownedRooms: Chatroom[];
-//	@JoinTable()
+
-//	userRooms: Chatroom[];
+	//@ManyToMany(type => Chatroom)
+	//@JoinTable()
+	//userRooms: Chatroom[];
+
+	@Column({ nullable: true })
+	currentRoom: string;
 }

srcs/requirements/svelte/api_front/public/build/bundle.js

@@ -3897,11 +3897,11 @@ var app = (function () {
 
     function get_each_context$5(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[6] = list[i];
+    	child_ctx[7] = list[i];
     	return child_ctx;
     }
 
-    // (32:1) <Button bind:layout new_layout="settings" my_class="settings dots icon">
+    // (31:1) <Button bind:layout new_layout="settings" my_class="settings dots icon">
     function create_default_slot_3$5(ctx) {
     	let t;
 
@@ -3921,14 +3921,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_3$5.name,
     		type: "slot",
-    		source: "(32:1) <Button bind:layout new_layout=\\\"settings\\\" my_class=\\\"settings dots icon\\\">",
+    		source: "(31:1) <Button bind:layout new_layout=\\\"settings\\\" my_class=\\\"settings dots icon\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (37:1) <Button bind:layout new_layout="new" my_class="new transparent">
+    // (36:1) <Button bind:layout new_layout="new" my_class="new transparent">
     function create_default_slot_2$9(ctx) {
     	let t;
 
@@ -3948,14 +3948,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_2$9.name,
     		type: "slot",
-    		source: "(37:1) <Button bind:layout new_layout=\\\"new\\\" my_class=\\\"new transparent\\\">",
+    		source: "(36:1) <Button bind:layout new_layout=\\\"new\\\" my_class=\\\"new transparent\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (42:1) <Button bind:layout new_layout="close" my_class="close icon">
+    // (41:1) <Button bind:layout new_layout="close" my_class="close icon">
     function create_default_slot_1$9(ctx) {
     	let t;
 
@@ -3975,16 +3975,134 @@ var app = (function () {
     		block,
     		id: create_default_slot_1$9.name,
     		type: "slot",
-    		source: "(42:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
+    		source: "(41:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (54:4) <Button bind:layout new_layout="room" my_class="list">
+    // (1:0)  <script>   import { onMount }
+    function create_catch_block$1(ctx) {
+    	const block = {
+    		c: noop,
+    		m: noop,
+    		p: noop,
+    		i: noop,
+    		o: noop,
+    		d: noop
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_catch_block$1.name,
+    		type: "catch",
+    		source: "(1:0)  <script>   import { onMount }",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (55:3) {:then}
+    function create_then_block$1(ctx) {
+    	let each_1_anchor;
+    	let current;
+    	let each_value = /*rooms*/ ctx[1];
+    	validate_each_argument(each_value);
+    	let each_blocks = [];
+
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
+    	}
+
+    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+    		each_blocks[i] = null;
+    	});
+
+    	const block = {
+    		c: function create() {
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+
+    			each_1_anchor = empty$1();
+    		},
+    		m: function mount(target, anchor) {
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].m(target, anchor);
+    			}
+
+    			insert_dev(target, each_1_anchor, anchor);
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*layout, rooms*/ 3) {
+    				each_value = /*rooms*/ ctx[1];
+    				validate_each_argument(each_value);
+    				let i;
+
+    				for (i = 0; i < each_value.length; i += 1) {
+    					const child_ctx = get_each_context$5(ctx, each_value, i);
+
+    					if (each_blocks[i]) {
+    						each_blocks[i].p(child_ctx, dirty);
+    						transition_in(each_blocks[i], 1);
+    					} else {
+    						each_blocks[i] = create_each_block$5(child_ctx);
+    						each_blocks[i].c();
+    						transition_in(each_blocks[i], 1);
+    						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+    					}
+    				}
+
+    				group_outros();
+
+    				for (i = each_value.length; i < each_blocks.length; i += 1) {
+    					out(i);
+    				}
+
+    				check_outros();
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+
+    			for (let i = 0; i < each_value.length; i += 1) {
+    				transition_in(each_blocks[i]);
+    			}
+
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			each_blocks = each_blocks.filter(Boolean);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				transition_out(each_blocks[i]);
+    			}
+
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			destroy_each(each_blocks, detaching);
+    			if (detaching) detach_dev(each_1_anchor);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_then_block$1.name,
+    		type: "then",
+    		source: "(55:3) {:then}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (57:5) <Button bind:layout new_layout="room" my_class="list">
     function create_default_slot$b(ctx) {
-    	let t0_value = /*room*/ ctx[6].room_name + "";
+    	let t0_value = /*room*/ ctx[7].name + "";
     	let t0;
     	let t1;
 
@@ -3997,7 +4115,9 @@ var app = (function () {
     			insert_dev(target, t0, anchor);
     			insert_dev(target, t1, anchor);
     		},
-    		p: noop,
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*rooms*/ 2 && t0_value !== (t0_value = /*room*/ ctx[7].name + "")) set_data_dev(t0, t0_value);
+    		},
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(t0);
     			if (detaching) detach_dev(t1);
@@ -4008,21 +4128,21 @@ var app = (function () {
     		block,
     		id: create_default_slot$b.name,
     		type: "slot",
-    		source: "(54:4) <Button bind:layout new_layout=\\\"room\\\" my_class=\\\"list\\\">",
+    		source: "(57:5) <Button bind:layout new_layout=\\\"room\\\" my_class=\\\"list\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (53:3) {#each rooms as room}
+    // (56:4) {#each rooms as room}
     function create_each_block$5(ctx) {
     	let button;
     	let updating_layout;
     	let current;
 
     	function button_layout_binding(value) {
-    		/*button_layout_binding*/ ctx[5](value);
+    		/*button_layout_binding*/ ctx[6](value);
     	}
 
     	let button_props = {
@@ -4050,7 +4170,7 @@ var app = (function () {
     		p: function update(ctx, dirty) {
     			const button_changes = {};
 
-    			if (dirty & /*$$scope*/ 512) {
+    			if (dirty & /*$$scope, rooms*/ 1026) {
     				button_changes.$$scope = { dirty, ctx };
     			}
 
@@ -4080,7 +4200,39 @@ var app = (function () {
     		block,
     		id: create_each_block$5.name,
     		type: "each",
-    		source: "(53:3) {#each rooms as room}",
+    		source: "(56:4) {#each rooms as room}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (52:21)      <!-- promise is pending -->     <p>rooms are loaded...</p>    {:then}
+    function create_pending_block$1(ctx) {
+    	let p;
+
+    	const block = {
+    		c: function create() {
+    			p = element("p");
+    			p.textContent = "rooms are loaded...";
+    			add_location(p, file$p, 53, 4, 1121);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, p, anchor);
+    		},
+    		p: noop,
+    		i: noop,
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(p);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_pending_block$1.name,
+    		type: "pending",
+    		source: "(52:21)      <!-- promise is pending -->     <p>rooms are loaded...</p>    {:then}",
     		ctx
     	});
 
@@ -4108,7 +4260,7 @@ var app = (function () {
     	let current;
 
     	function button0_layout_binding(value) {
-    		/*button0_layout_binding*/ ctx[2](value);
+    		/*button0_layout_binding*/ ctx[3](value);
     	}
 
     	let button0_props = {
@@ -4126,7 +4278,7 @@ var app = (function () {
     	binding_callbacks.push(() => bind(button0, 'layout', button0_layout_binding));
 
     	function button1_layout_binding(value) {
-    		/*button1_layout_binding*/ ctx[3](value);
+    		/*button1_layout_binding*/ ctx[4](value);
     	}
 
     	let button1_props = {
@@ -4144,7 +4296,7 @@ var app = (function () {
     	binding_callbacks.push(() => bind(button1, 'layout', button1_layout_binding));
 
     	function button2_layout_binding(value) {
-    		/*button2_layout_binding*/ ctx[4](value);
+    		/*button2_layout_binding*/ ctx[5](value);
     	}
 
     	let button2_props = {
@@ -4160,17 +4312,19 @@ var app = (function () {
 
     	button2 = new Chat_button({ props: button2_props, $$inline: true });
     	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));
-    	let each_value = /*rooms*/ ctx[1];
-    	validate_each_argument(each_value);
-    	let each_blocks = [];
 
-    	for (let i = 0; i < each_value.length; i += 1) {
+    	let info = {
-    		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
+    		ctx,
-    	}
+    		current: null,
+    		token: null,
+    		hasCatch: false,
+    		pending: create_pending_block$1,
+    		then: create_then_block$1,
+    		catch: create_catch_block$1,
+    		blocks: [,,,]
+    	};
 
-    	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+    	handle_promise(/*get_rooms*/ ctx[2], info);
-    		each_blocks[i] = null;
-    	});
 
     	const block = {
     		c: function create() {
@@ -4190,23 +4344,19 @@ var app = (function () {
     			p1 = element("p");
     			p1.textContent = "/ you have no chat room yet /";
     			t6 = space();
-
+    			info.block.c();
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].c();
-    			}
-
     			attr_dev(p0, "class", "title svelte-1jygwt2");
-    			add_location(p0, file$p, 47, 2, 872);
+    			add_location(p0, file$p, 46, 2, 889);
     			attr_dev(p1, "class", "__center");
-    			add_location(p1, file$p, 50, 4, 982);
+    			add_location(p1, file$p, 49, 4, 999);
     			attr_dev(div0, "class", "__show_if_only_child");
-    			add_location(div0, file$p, 49, 3, 943);
+    			add_location(div0, file$p, 48, 3, 960);
     			attr_dev(div1, "class", "room_list");
-    			add_location(div1, file$p, 48, 2, 916);
+    			add_location(div1, file$p, 47, 2, 933);
     			attr_dev(div2, "class", "panel panel_home __border_top svelte-1jygwt2");
-    			add_location(div2, file$p, 46, 1, 826);
+    			add_location(div2, file$p, 45, 1, 843);
     			attr_dev(div3, "class", "grid_box svelte-1jygwt2");
-    			add_location(div3, file$p, 28, 0, 467);
+    			add_location(div3, file$p, 27, 0, 484);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -4226,17 +4376,16 @@ var app = (function () {
     			append_dev(div1, div0);
     			append_dev(div0, p1);
     			append_dev(div1, t6);
-
+    			info.block.m(div1, info.anchor = null);
-    			for (let i = 0; i < each_blocks.length; i += 1) {
+    			info.mount = () => div1;
-    				each_blocks[i].m(div1, null);
+    			info.anchor = null;
-    			}
-
     			current = true;
     		},
-    		p: function update(ctx, [dirty]) {
+    		p: function update(new_ctx, [dirty]) {
+    			ctx = new_ctx;
     			const button0_changes = {};
 
-    			if (dirty & /*$$scope*/ 512) {
+    			if (dirty & /*$$scope*/ 1024) {
     				button0_changes.$$scope = { dirty, ctx };
     			}
 
@@ -4249,7 +4398,7 @@ var app = (function () {
     			button0.$set(button0_changes);
     			const button1_changes = {};
 
-    			if (dirty & /*$$scope*/ 512) {
+    			if (dirty & /*$$scope*/ 1024) {
     				button1_changes.$$scope = { dirty, ctx };
     			}
 
@@ -4262,7 +4411,7 @@ var app = (function () {
     			button1.$set(button1_changes);
     			const button2_changes = {};
 
-    			if (dirty & /*$$scope*/ 512) {
+    			if (dirty & /*$$scope*/ 1024) {
     				button2_changes.$$scope = { dirty, ctx };
     			}
 
@@ -4273,55 +4422,24 @@ var app = (function () {
     			}
 
     			button2.$set(button2_changes);
-
+    			update_await_block_branch(info, ctx, dirty);
-    			if (dirty & /*layout, rooms*/ 3) {
-    				each_value = /*rooms*/ ctx[1];
-    				validate_each_argument(each_value);
-    				let i;
-
-    				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context$5(ctx, each_value, i);
-
-    					if (each_blocks[i]) {
-    						each_blocks[i].p(child_ctx, dirty);
-    						transition_in(each_blocks[i], 1);
-    					} else {
-    						each_blocks[i] = create_each_block$5(child_ctx);
-    						each_blocks[i].c();
-    						transition_in(each_blocks[i], 1);
-    						each_blocks[i].m(div1, null);
-    					}
-    				}
-
-    				group_outros();
-
-    				for (i = each_value.length; i < each_blocks.length; i += 1) {
-    					out(i);
-    				}
-
-    				check_outros();
-    			}
     		},
     		i: function intro(local) {
     			if (current) return;
     			transition_in(button0.$$.fragment, local);
     			transition_in(button1.$$.fragment, local);
     			transition_in(button2.$$.fragment, local);
-
+    			transition_in(info.block);
-    			for (let i = 0; i < each_value.length; i += 1) {
-    				transition_in(each_blocks[i]);
-    			}
-
     			current = true;
     		},
     		o: function outro(local) {
     			transition_out(button0.$$.fragment, local);
     			transition_out(button1.$$.fragment, local);
     			transition_out(button2.$$.fragment, local);
-    			each_blocks = each_blocks.filter(Boolean);
 
-    			for (let i = 0; i < each_blocks.length; i += 1) {
+    			for (let i = 0; i < 3; i += 1) {
-    				transition_out(each_blocks[i]);
+    				const block = info.blocks[i];
+    				transition_out(block);
     			}
 
     			current = false;
@@ -4331,7 +4449,9 @@ var app = (function () {
     			destroy_component(button0);
     			destroy_component(button1);
     			destroy_component(button2);
-    			destroy_each(each_blocks, detaching);
+    			info.block.d();
+    			info.token = null;
+    			info = null;
     		}
     	};
 
@@ -4358,13 +4478,11 @@ var app = (function () {
     		{ room_name: 'ho room' }
     	];
 
-    	// ask for the rooms
+    	// ask api for the rooms
-    	onMount(() => {
+    	const get_rooms = fetch('/api/v2/chat/rooms').then(resp => resp.json()).then(data => {
-    		console.log("onmount");
+    		console.log(data.rooms);
-
+    		for (let room of data.rooms) console.log(room.name);
-    		fetch('/api/v2/chat/rooms').then(resp => resp.json()).then(data => {
+    		$$invalidate(1, rooms = data.rooms);
-    			console.log(data);
-    		}); //rooms = data;
     	});
 
     	$$self.$$.on_mount.push(function () {
@@ -4403,7 +4521,13 @@ var app = (function () {
     		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
     	};
 
-    	$$self.$capture_state = () => ({ onMount, Button: Chat_button, layout, rooms });
+    	$$self.$capture_state = () => ({
+    		onMount,
+    		Button: Chat_button,
+    		layout,
+    		rooms,
+    		get_rooms
+    	});
 
     	$$self.$inject_state = $$props => {
     		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
@@ -4417,6 +4541,7 @@ var app = (function () {
     	return [
     		layout,
     		rooms,
+    		get_rooms,
     		button0_layout_binding,
     		button1_layout_binding,
     		button2_layout_binding,

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte

@@ -12,16 +12,15 @@
 		{room_name: 'ho room'},
 	];
 
-	// ask for the rooms
+	// ask api for the rooms
-	onMount(() => {
+	const get_rooms = fetch('/api/v2/chat/rooms')
-		console.log("onmount");
+	.then(resp => resp.json())
-		const get_rooms = fetch('/api/v2/chat/rooms')
+	.then(data =>
-		.then(resp => resp.json())
+	{
-		.then(data =>
+		console.log(data.rooms);
-		{
+		for (let room of data.rooms)
-			console.log(data);
+			console.log(room.name);
-			//rooms = data;
+		rooms = data.rooms;
-		});
 	});
 
 </script>
@@ -50,11 +49,16 @@
 			<div class="__show_if_only_child">
 				<p class="__center">/ you have no chat room yet /</p>
 			</div>
-			{#each rooms as room}
+			{#await get_rooms}
-				<Button bind:layout new_layout="room" my_class="list">
+				<!-- promise is pending -->
-					{room.room_name}
+				<p>rooms are loaded...</p>
-				</Button>
+			{:then}
-			{/each}
+				{#each rooms as room}
+					<Button bind:layout new_layout="room" my_class="list">
+						{room.name}
+					</Button>
+				{/each}
+			{/await}
 
 			<!-- placeholders 
 			<Button bind:layout new_layout="room" my_class="list">