Rework store
This commit is contained in:
parent
ef526cd2db
commit
8881070cac
9 changed files with 119 additions and 122 deletions
|
|
@ -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
|
||||
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}
|
||||
>
|
||||
<button class="bg-black/50 backdrop-blur-lg btn btn-neutral h-full rounded-full">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
...state,
|
||||
session: action.payload,
|
||||
};
|
||||
setState("auth", "session", action.payload);
|
||||
break;
|
||||
case AuthActionTypes.FETCH_REFRESH_START:
|
||||
fetchRefresh();
|
||||
return state;
|
||||
break;
|
||||
case AuthActionTypes.FETCH_REFRESH_FINISH:
|
||||
return {
|
||||
...state,
|
||||
session: action.payload,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
setState("auth", "session", action.payload);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,25 @@
|
|||
import { fetchCommunity } from "../../services/community";
|
||||
import { setState } from "../state";
|
||||
import { CommunityActionTypes, CommunityAction } from "./actions";
|
||||
import { ICommunityState } from "./types";
|
||||
|
||||
function communityReducer(
|
||||
state: ICommunityState,
|
||||
action: CommunityAction,
|
||||
): ICommunityState {
|
||||
function communityReducer(state: ICommunityState, action: CommunityAction) {
|
||||
switch (action.type) {
|
||||
case CommunityActionTypes.FETCH_COMMUNITY_START:
|
||||
fetchCommunity(action.payload);
|
||||
return state;
|
||||
break;
|
||||
case CommunityActionTypes.FETCH_COMMUNITY_FINISH:
|
||||
return {
|
||||
...state,
|
||||
communities: {
|
||||
setState("community", "communities", {
|
||||
...state.communities,
|
||||
[action.payload.id]: action.payload,
|
||||
},
|
||||
};
|
||||
});
|
||||
break;
|
||||
case CommunityActionTypes.SET_COMMUNITY:
|
||||
return {
|
||||
...state,
|
||||
communities: {
|
||||
setState("community", "communities", {
|
||||
...state.communities,
|
||||
[action.payload.id]: action.payload,
|
||||
},
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
return {
|
||||
auth: authReducer(state.auth, action as AuthAction),
|
||||
user: userReducer(state.user, action as UserAction),
|
||||
community: communityReducer(state.community, action as CommunityAction),
|
||||
};
|
||||
function reducer(state: IState, action: Action) {
|
||||
authReducer(state.auth, action as AuthAction);
|
||||
userReducer(state.user, action as UserAction);
|
||||
communityReducer(state.community, action as CommunityAction);
|
||||
}
|
||||
|
||||
export { reducer };
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
setState(reducer(state, action));
|
||||
}
|
||||
|
||||
export { state, setState, dispatch, dispatchAsync };
|
||||
export { state, setState, dispatch };
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
...state,
|
||||
loggedUserId: action.payload.id,
|
||||
};
|
||||
setState("user", "loggedUserId", action.payload.id);
|
||||
break;
|
||||
case UserActionTypes.FETCH_USER_START:
|
||||
fetchUser(action.payload);
|
||||
return state;
|
||||
break;
|
||||
case UserActionTypes.FETCH_USER_FINISH:
|
||||
return {
|
||||
...state,
|
||||
users: {
|
||||
setState("user", "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 {
|
||||
...state,
|
||||
users: {
|
||||
setState("user", "users", {
|
||||
...state.users,
|
||||
[action.payload.id]: {
|
||||
id: action.payload.id,
|
||||
|
|
@ -41,10 +36,8 @@ function userReducer(state: IUserState, action: UserAction): IUserState {
|
|||
(community) => community.id,
|
||||
),
|
||||
},
|
||||
},
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
{
|
||||
id: "21",
|
||||
communityName: "Community 1",
|
||||
avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
|
||||
},
|
||||
{
|
||||
id: "22",
|
||||
communityName: "Gamer's Lair",
|
||||
avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
|
||||
},
|
||||
];
|
||||
const communityIds = createMemo(() => {
|
||||
const loggedUserId = state.user.loggedUserId;
|
||||
if (!loggedUserId) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const loggedUser = state.user.users[loggedUserId];
|
||||
if (!loggedUser) {
|
||||
return [];
|
||||
}
|
||||
|
||||
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) => (
|
||||
<Community
|
||||
id={community.id}
|
||||
name={community.communityName}
|
||||
avatar={community.avatar}
|
||||
onCommunityClick={onCommunityClick}
|
||||
/>
|
||||
))}
|
||||
{communityIds().map(mapCommunity)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { createSignal, type Component } from "solid-js";
|
||||
import { dispatch } from "../../store/state";
|
||||
import { createEffect, createSignal, type Component } from "solid-js";
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue