new svelte files organisation for sockets and store

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

@@ -1,70 +1,11 @@
-
 <script lang="ts">
 
 	import Layouts from './Chat_layouts.svelte';
+	import { init_socket } from './Socket_init';
+
 	export let color = "transparent";
 
-	/* web sockets with socket.io
-	*/
-	//import { socket, user } from './Chat_socket.svelte';
-	import { init_socket, socket, user } from './Socket';
-	import { msgs } from './Store_msg.js';
-
 	init_socket();
-/*
-	async function socket_actions()
-	{
-		await init_socket();
-
-		// pbm: sometimes socket is still undefined here
-		socket.on('connect', function(){
-			console.log("socket.io connected");
-		});
-		socket.on('disconnect', function(){
-			console.log("socket.io disconnected");
-		});
-		socket.on('connect_error', function(){
-			console.log("socket.io connect_error");
-		});
-		socket.on('connect_timeout', function(){
-			console.log("socket.io connect_timeout");
-		});
-		socket.on('error', function(){
-			console.log("socket.io error");
-		});
-		socket.on('reconnect', function(){
-			console.log("socket.io reconnect");
-		});
-		socket.on('reconnect_attempt', function(){
-			console.log("socket.io reconnect_attempt");
-		});
-		socket.on('reconnecting', function(){
-			console.log("socket.io reconnecting");
-		});
-		socket.on('reconnect_error', function(){
-			console.log("socket.io reconnect_error");
-		});
-		socket.on('reconnect_failed', function(){
-			console.log("socket.io reconnect_failed");
-		});
-		socket.on('ping', function(){
-			console.log("socket.io ping");
-		});
-		socket.on('pong', function(){
-			console.log("socket.io pong");
-		});
-
-		socket.on('message', function(from, message)
-		{
-			console.log("received msg:", message, from);
-			if (from === user.username)
-				from = "me";
-			msgs.update(msgs => [...msgs, { content: message, name: from }]);
-		});
-	};
-
-	socket_actions();
-*/
 
 </script>
 

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

@@ -1,4 +1,3 @@
-
 <script lang="ts">
 
 	export let color;

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

@@ -1,4 +1,3 @@
-
 <script lang="ts">
 
 	import Debug from './tmp_debug.svelte';
@@ -16,7 +15,7 @@
 	import MuteLayout      from './Layout_mute.svelte';
 	import UserLayout      from './Layout_user.svelte';
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
 
 	/* global variables
 	*/

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

@@ -1,26 +0,0 @@
-<script context="module">
-
-	import io from 'socket.io-client';
-	export let user;
-	export let socket;
-
-	const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
-
-	fetch(`${address}/api/v2/user`)
-	.then((resp) => resp.json())
-	.then((data) =>
-	{
-		user = data;
-		console.log("user:", user);
-		socket = io(address,
-		{
-			path: '/chat',
-			query:
-			{
-				username: user.username,
-			},
-		});
-	});
-
-</script>
-

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

@@ -1,4 +1,3 @@
-
 <!--
 	<Button
 		bind:layout

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

@@ -1,7 +1,6 @@
-
 <script>
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
 	export let layout;
 
 </script>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
-	import Warning from './Chat_warning.svelte';
+	import Warning from './Element_warning.svelte';
 	export let layout = "";
 	export let back = "";
 

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

@@ -1,10 +1,8 @@
-
 <script>
 
 	import { onMount } from 'svelte';
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
-	import { msgs } from './Store_msg.js';
+	import { msgs, user } from './Store_chat';
-	import { user } from './Chat_socket.svelte';
 	export let layout;
 
 	let rooms = [

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

@@ -1,7 +1,6 @@
-
 <script>
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
 	export let layout = "";
 	export let back = "";
 

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

@@ -1,7 +1,6 @@
-
 <script>
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
 	export let layout = "";
 	export let back = "";
 

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

@@ -1,7 +1,6 @@
-
 <script>
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
 	export let layout = "";
 	export let back = "";
 

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

@@ -1,10 +1,8 @@
-
 <script>
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
-	import Msg from './Chat_msg.svelte';
+	import Msg from './Element_msg.svelte';
-	import { socket } from './Chat_socket.svelte';
+	import { socket, msgs } from './Store_chat';
-	import { msgs } from './Store_msg.js';
 
 	export let layout = "";
 	export let back = "";

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

@@ -1,7 +1,6 @@
-
 <script>
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
 	export let layout = "";
 	export let back = "";
 

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

@@ -1,7 +1,6 @@
-
 <script>
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
 	export let layout = "";
 	export let back = "";
 

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

@@ -1,7 +1,6 @@
-
 <script>
 
-	import Button from './Chat_button.svelte';
+	import Button from './Element_button.svelte';
 	export let layout = "";
 	export let back = "";
 

srcs/requirements/svelte/api_front/src/pieces/chat/Socket_events.ts

@@ -0,0 +1,10 @@
+export function socket_events(socket)
+{
+	socket.on('message', function(from, message)
+	{
+		console.log("received msg:", message, from);
+		if (from === user.username)
+			from = "me";
+		msgs.update(msgs => [...msgs, { content: message, name: from }]);
+	});
+}

srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts

@@ -0,0 +1,28 @@
+import io from 'socket.io-client';
+import { set_socket, set_user } from './Store_chat';
+import { socket_events } from './Socket_events';
+import { connection_states } from './Socket_states';
+
+const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
+
+export async function init_socket()
+{
+	const response = await fetch(`${address}/api/v2/user`);
+	const response_data = await response.json();
+
+	set_user(response_data);
+
+	let socket = await io(address,
+	{
+		path: '/chat',
+		query:
+		{
+			username: response_data.username,
+		},
+	});
+	set_socket(socket);
+
+	connection_states(socket);
+	socket_events(socket);
+}
+

srcs/requirements/svelte/api_front/src/pieces/chat/Socket_states.js

@@ -1 +0,0 @@
-

srcs/requirements/svelte/api_front/src/pieces/chat/Socket_states.ts

@@ -1,45 +1,4 @@
-
+export function connection_states(socket)
-import io from 'socket.io-client';
-export let user;
-export let socket;
-
-const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
-
-export async function init_socket()
-{
-	console.log("inside init_socket");
-	const response = await fetch(`${address}/api/v2/user`);
-	const response_data = await response.json();
-
-	user = response_data;
-	console.log("user:", user);
-
-	socket = await io(address,
-	{
-		path: '/chat',
-		query:
-		{
-			username: user.username,
-		},
-	})
-	console.log("socket:", socket);
-
-	connection_states();
-	socket_events();
-}
-
-function socket_events()
-{
-	socket.on('message', function(from, message)
-	{
-		console.log("received msg:", message, from);
-		if (from === user.username)
-			from = "me";
-		msgs.update(msgs => [...msgs, { content: message, name: from }]);
-	});
-}
-
-function connection_states()
 {
 	socket.on('connect',           function(){ console.log("socket.io connected"); });
 	socket.on('disconnect',        function(){ console.log("socket.io disconnected"); });

srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+
+export let msgs = writable([]);
+
+export let user;
+export let socket;
+
+export function set_user(new_user)     { user = new_user; }
+export function set_socket(new_socket) { socket = new_socket; }
+

srcs/requirements/svelte/api_front/src/pieces/chat/Store_msg.js

@@ -1,7 +0,0 @@
-
-import { writable } from 'svelte/store';
-
-export let user = writable({});
-export let socket = writable({});
-export let msgs = writable([]);
-