Rework store

src/components/MessageBar/MessageBar.tsx

@@ -1,36 +1,13 @@
 import type { Component } from "solid-js";
-import { dispatch } from "../../store/state";
-import { UserActionTypes } from "../../store/user";
-import { AuthActionTypes } from "../../store/auth";
 
 const MessageBar: Component = () => {
-    const onRefresh = () => {
-        dispatch({
-            type: AuthActionTypes.FETCH_REFRESH_START,
-        });
-    };
-    const onSend = () => {
-        dispatch({
-            type: UserActionTypes.FETCH_LOGGED_USER_ID_START,
-        });
-    };
-
     return (
         <div class="absolute w-full bottom-0 p-4 z-10">
             <div class="bg-stone-800/25 backdrop-blur-lg h-16 shadow-bar p-2 flex flex-row gap-2 rounded-full">
                 <label class="bg-stone-800/50 backdrop-blur-lg input w-full h-full rounded-full focus:border-none outline-none">
                     <input type="text" placeholder="Send a message..." />
                 </label>
-                <button
+                <button class="bg-black/50 backdrop-blur-lg btn btn-neutral h-full rounded-full">
-                    class="bg-black/50 backdrop-blur-lg btn btn-neutral h-full rounded-full"
-                    onClick={onRefresh}
-                >
-                    Refresh test
-                </button>
-                <button
-                    class="bg-black/50 backdrop-blur-lg btn btn-neutral h-full rounded-full"
-                    onClick={onSend}
-                >
                     Send
                 </button>
             </div>

src/store/auth/auth.ts

@@ -1,27 +1,22 @@
 import { fetchLogin, fetchRefresh } from "../../services/auth";
+import { setState } from "../state";
 import { AuthActionTypes, AuthAction } from "./actions";
 import { IAuthState } from "./types";
 
-function authReducer(state: IAuthState, action: AuthAction): IAuthState {
+function authReducer(_state: IAuthState, action: AuthAction) {
     switch (action.type) {
         case AuthActionTypes.FETCH_LOGIN_START:
             fetchLogin(action.payload.username, action.payload.password);
-            return state;
+            break;
         case AuthActionTypes.FETCH_LOGIN_FINISH:
-            return {
+            setState("auth", "session", action.payload);
-                ...state,
+            break;
-                session: action.payload,
-            };
         case AuthActionTypes.FETCH_REFRESH_START:
             fetchRefresh();
-            return state;
+            break;
         case AuthActionTypes.FETCH_REFRESH_FINISH:
-            return {
+            setState("auth", "session", action.payload);
-                ...state,
+            break;
-                session: action.payload,
-            };
-        default:
-            return state;
     }
 }
 

src/store/community/community.ts

@@ -1,33 +1,25 @@
 import { fetchCommunity } from "../../services/community";
+import { setState } from "../state";
 import { CommunityActionTypes, CommunityAction } from "./actions";
 import { ICommunityState } from "./types";
 
-function communityReducer(
+function communityReducer(state: ICommunityState, action: CommunityAction) {
-    state: ICommunityState,
-    action: CommunityAction,
-): ICommunityState {
     switch (action.type) {
         case CommunityActionTypes.FETCH_COMMUNITY_START:
             fetchCommunity(action.payload);
-            return state;
+            break;
         case CommunityActionTypes.FETCH_COMMUNITY_FINISH:
-            return {
+            setState("community", "communities", {
-                ...state,
-                communities: {
                 ...state.communities,
                 [action.payload.id]: action.payload,
-                },
+            });
-            };
+            break;
         case CommunityActionTypes.SET_COMMUNITY:
-            return {
+            setState("community", "communities", {
-                ...state,
-                communities: {
                 ...state.communities,
                 [action.payload.id]: action.payload,
-                },
+            });
-            };
+            break;
-        default:
-            return state;
     }
 }
 

src/store/reducers.ts

@@ -4,12 +4,10 @@ import { AuthAction, authReducer } from "./auth";
 import { UserAction, userReducer } from "./user";
 import { CommunityAction, communityReducer } from "./community";
 
-function reducer(state: IState, action: Action): IState {
+function reducer(state: IState, action: Action) {
-    return {
+    authReducer(state.auth, action as AuthAction);
-        auth: authReducer(state.auth, action as AuthAction),
+    userReducer(state.user, action as UserAction);
-        user: userReducer(state.user, action as UserAction),
+    communityReducer(state.community, action as CommunityAction);
-        community: communityReducer(state.community, action as CommunityAction),
-    };
 }
 
 export { reducer };

src/store/state.ts

@@ -17,11 +17,7 @@ const [state, setState] = createStore<IState>({
 });
 
 function dispatch(action: Action) {
-    setState(reducer(state, action));
+    reducer(state, action);
 }
 
-async function dispatchAsync(action: Action) {
+export { state, setState, dispatch };
-    setState(reducer(state, action));
-}
-
-export { state, setState, dispatch, dispatchAsync };

src/store/user/user.ts

@@ -3,37 +3,32 @@ import {
     fetchUser,
     fetchUserCommunities,
 } from "../../services/user";
+import { setState } from "../state";
 import { UserActionTypes, UserAction } from "./actions";
 import { IUserState } from "./types";
 
-function userReducer(state: IUserState, action: UserAction): IUserState {
+function userReducer(state: IUserState, action: UserAction) {
     switch (action.type) {
         case UserActionTypes.FETCH_LOGGED_USER_ID_START:
             fetchLoggedUser();
-            return state;
+            break;
         case UserActionTypes.FETCH_LOGGED_USER_ID_FINISH:
-            return {
+            setState("user", "loggedUserId", action.payload.id);
-                ...state,
+            break;
-                loggedUserId: action.payload.id,
-            };
         case UserActionTypes.FETCH_USER_START:
             fetchUser(action.payload);
-            return state;
+            break;
         case UserActionTypes.FETCH_USER_FINISH:
-            return {
+            setState("user", "users", {
-                ...state,
-                users: {
                 ...state.users,
                 [action.payload.id]: action.payload,
-                },
+            });
-            };
+            break;
         case UserActionTypes.FETCH_USER_COMMUNITIES_START:
             fetchUserCommunities(action.payload);
-            return state;
+            break;
         case UserActionTypes.FETCH_USER_COMMUNITIES_FINISH:
-            return {
+            setState("user", "users", {
-                ...state,
-                users: {
                 ...state.users,
                 [action.payload.id]: {
                     id: action.payload.id,
@@ -41,10 +36,8 @@ function userReducer(state: IUserState, action: UserAction): IUserState {
                         (community) => community.id,
                     ),
                 },
-                },
+            });
-            };
+            break;
-        default:
-            return state;
     }
 }
 

src/views/CommunityView/CommunityView.tsx

@@ -1,35 +1,48 @@
-import type { Component } from "solid-js";
+import { createMemo, type Component } from "solid-js";
 import { Community } from "../../components/Community";
+import { state } from "../../store/state";
 
 const CommunityView: Component = () => {
-    const communitiesTest = [
+    const communityIds = createMemo(() => {
-        {
+        const loggedUserId = state.user.loggedUserId;
-            id: "21",
+        if (!loggedUserId) {
-            communityName: "Community 1",
+            return [];
-            avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
+        }
-        },
+
-        {
+        const loggedUser = state.user.users[loggedUserId];
-            id: "22",
+        if (!loggedUser) {
-            communityName: "Gamer's Lair",
+            return [];
-            avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
+        }
-        },
+
-    ];
+        return loggedUser.communities ?? [];
+    });
 
     const onCommunityClick = (id: string) => {
         console.log(id);
     };
 
+    const mapCommunity = (communityId: string) => {
+        const community = state.community.communities[communityId];
+        if (!community) {
+            return undefined;
+        }
+
+        return (
+            <Community
+                id={community.id}
+                name={community.name ?? ""}
+                avatar={
+                    "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp"
+                }
+                onCommunityClick={onCommunityClick}
+            />
+        );
+    };
+
     return (
         <div class="p-3 h-full">
             <div class="bg-stone-950 w-20 h-full rounded-full shadow-panel z-30 flex flex-col p-3 gap-3">
-                {communitiesTest.map((community) => (
+                {communityIds().map(mapCommunity)}
-                    <Community
-                        id={community.id}
-                        name={community.communityName}
-                        avatar={community.avatar}
-                        onCommunityClick={onCommunityClick}
-                    />
-                ))}
             </div>
         </div>
     );

src/views/LoginView/LoginView.tsx

@@ -1,11 +1,14 @@
-import { createSignal, type Component } from "solid-js";
+import { createEffect, createSignal, type Component } from "solid-js";
-import { dispatch } from "../../store/state";
+import { dispatch, state } from "../../store/state";
 import { AuthActionTypes } from "../../store/auth";
+import { useNavigate } from "@solidjs/router";
 
 const LoginView: Component = () => {
     const [getUsername, setUsername] = createSignal("");
     const [getPassword, setPassword] = createSignal("");
 
+    const navigate = useNavigate();
+
     const onLogin = () => {
         dispatch({
             type: AuthActionTypes.FETCH_LOGIN_START,
@@ -16,6 +19,12 @@ const LoginView: Component = () => {
         });
     };
 
+    createEffect(() => {
+        if (state.auth.session?.id) {
+            navigate("/");
+        }
+    });
+
     return (
         <div>
             <fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 mx-auto mt-32 lg:mt-64">

src/views/MainView/MainView.tsx

@@ -1,9 +1,33 @@
-import type { Component } from "solid-js";
+import { createEffect, createMemo, onMount, type Component } from "solid-js";
 import { ChannelView } from "../ChannelView";
 import { ChatView } from "../ChatView";
 import { MemberView } from "../MemberView";
+import { dispatch, state } from "../../store/state";
+import { UserActionTypes } from "../../store/user";
+import { AuthActionTypes } from "../../store/auth";
 
 const MainView: Component = () => {
+    onMount(() => {
+        dispatch({
+            type: AuthActionTypes.FETCH_REFRESH_START,
+        });
+    });
+
+    createEffect(() => {
+        if (state.auth.session?.token) {
+            dispatch({ type: UserActionTypes.FETCH_LOGGED_USER_ID_START });
+        }
+    });
+
+    createEffect(() => {
+        if (state.user.loggedUserId) {
+            dispatch({
+                type: UserActionTypes.FETCH_USER_COMMUNITIES_START,
+                payload: state.user.loggedUserId,
+            });
+        }
+    });
+
     return (
         <div class="flex flex-row h-screen">
             <ChannelView />