diff --git a/package.json b/package.json index 5fb9361..f2e3904 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pulsar-web", - "version": "0.1.0", + "version": "0.2.0", "description": "", "type": "module", "scripts": { diff --git a/src/api/community/community.ts b/src/api/community/community.ts index 0331eb0..dfbed6a 100644 --- a/src/api/community/community.ts +++ b/src/api/community/community.ts @@ -1,5 +1,14 @@ import { callApi, HTTP } from "../tools"; -import { IFetchCommunityRequest, IFetchCommunityResponse } from "./types"; +import { + IFetchCommunityRequest, + IFetchCommunityResponse, + IFetchCommunityChannelsRequest, + IFetchCommunityChannelsResponse, + IFetchCommunityRolesRequest, + IFetchCommunityRolesResponse, + IFetchCommunityMembersRequest, + IFetchCommunityMembersResponse, +} from "./types"; const fetchCommunityApi = async ( request: IFetchCommunityRequest, @@ -7,4 +16,27 @@ const fetchCommunityApi = async ( return await callApi(HTTP.GET, `community/${request.id}`); }; -export { fetchCommunityApi }; +const fetchCommunityChannelsApi = async ( + request: IFetchCommunityChannelsRequest, +): Promise => { + return await callApi(HTTP.GET, `community/${request.id}/channels`); +}; + +const fetchCommunityRolesApi = async ( + request: IFetchCommunityRolesRequest, +): Promise => { + return await callApi(HTTP.GET, `community/${request.id}/roles`); +}; + +const fetchCommunityMembersApi = async ( + request: IFetchCommunityMembersRequest, +): Promise => { + return await callApi(HTTP.GET, `community/${request.id}/members`); +}; + +export { + fetchCommunityApi, + fetchCommunityChannelsApi, + fetchCommunityRolesApi, + fetchCommunityMembersApi, +}; diff --git a/src/api/community/types.ts b/src/api/community/types.ts index 7605fc3..464380c 100644 --- a/src/api/community/types.ts +++ b/src/api/community/types.ts @@ -12,8 +12,59 @@ interface IFetchCommunityRequest { interface IFetchCommunityResponse extends IFetchCommunity {} +interface IFetchCommunityChannelsRequest { + id: string; +} + +interface IFetchCommunityChannelsResponse { + id: string; + channels: IFetchCommunityChannel[]; +} + +interface IFetchCommunityChannel { + id: string; + name: string; +} + +interface IFetchCommunityRolesRequest { + id: string; +} + +interface IFetchCommunityRolesResponse { + id: string; + roles: IFetchCommunityRole[]; +} + +interface IFetchCommunityRole { + id: string; + name: string; +} + +interface IFetchCommunityMembersRequest { + id: string; +} + +interface IFetchCommunityMembersResponse { + id: string; + members: IFetchCommunityMember[]; +} + +interface IFetchCommunityMember { + id: string; + username: string; +} + export { type IFetchCommunity, type IFetchCommunityRequest, type IFetchCommunityResponse, + type IFetchCommunityChannelsRequest, + type IFetchCommunityChannelsResponse, + type IFetchCommunityChannel, + type IFetchCommunityRolesRequest, + type IFetchCommunityRolesResponse, + type IFetchCommunityRole, + type IFetchCommunityMembersRequest, + type IFetchCommunityMembersResponse, + type IFetchCommunityMember, }; diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx index f8885d6..6b2066d 100644 --- a/src/components/Channel/Channel.tsx +++ b/src/components/Channel/Channel.tsx @@ -1,7 +1,16 @@ import type { Component } from "solid-js"; +import { IChannelProps } from "./types"; -const Channel: Component = () => { - return
; +const Channel: Component = (props: IChannelProps) => { + return ( +
  • props.onChannelClick(props.id)} + > +
     #
    +
    {props.name}
    +
    • + ); }; export { Channel }; diff --git a/src/components/Channel/index.ts b/src/components/Channel/index.ts index 14a35d6..389d2d6 100644 --- a/src/components/Channel/index.ts +++ b/src/components/Channel/index.ts @@ -1 +1,2 @@ export * from "./Channel"; +export * from "./types"; diff --git a/src/components/Channel/types.ts b/src/components/Channel/types.ts new file mode 100644 index 0000000..be06e76 --- /dev/null +++ b/src/components/Channel/types.ts @@ -0,0 +1,8 @@ +interface IChannelProps { + id: string; + name: string; + active: boolean; + onChannelClick: (id: string) => void; +} + +export { type IChannelProps }; diff --git a/src/components/ChannelBar/ChannelBar.tsx b/src/components/ChannelBar/ChannelBar.tsx index bc39db4..858587e 100644 --- a/src/components/ChannelBar/ChannelBar.tsx +++ b/src/components/ChannelBar/ChannelBar.tsx @@ -1,9 +1,15 @@ import type { Component } from "solid-js"; +import { IChannelBarProps } from "./types"; -const ChannelBar: Component = () => { +const ChannelBar: Component = (props: IChannelBarProps) => { return (
    -
    +
    +

    + {props.name ? `# ${props.name}` : undefined} +

    +

    {props.description}

    +
    ); }; diff --git a/src/components/ChannelBar/index.ts b/src/components/ChannelBar/index.ts index 9036212..f85d3b5 100644 --- a/src/components/ChannelBar/index.ts +++ b/src/components/ChannelBar/index.ts @@ -1 +1,2 @@ export * from "./ChannelBar"; +export * from "./types"; diff --git a/src/components/ChannelBar/types.ts b/src/components/ChannelBar/types.ts new file mode 100644 index 0000000..73124bb --- /dev/null +++ b/src/components/ChannelBar/types.ts @@ -0,0 +1,7 @@ +interface IChannelBarProps { + id?: string; + name?: string; + description?: string; +} + +export { type IChannelBarProps }; diff --git a/src/components/Community/Community.tsx b/src/components/Community/Community.tsx index 4be636c..6f40e49 100644 --- a/src/components/Community/Community.tsx +++ b/src/components/Community/Community.tsx @@ -7,7 +7,9 @@ const Community: Component = (props: ICommunityProps) => { class="avatar cursor-pointer" onClick={() => props.onCommunityClick(props.id)} > -
    +
    diff --git a/src/components/Community/types.ts b/src/components/Community/types.ts index 46a969a..7a47526 100644 --- a/src/components/Community/types.ts +++ b/src/components/Community/types.ts @@ -2,6 +2,7 @@ interface ICommunityProps { id: string; name: string; avatar: string; + active: boolean; onCommunityClick: (id: string) => void; } diff --git a/src/components/CommunityBar/CommunityBar.tsx b/src/components/CommunityBar/CommunityBar.tsx new file mode 100644 index 0000000..9af8b02 --- /dev/null +++ b/src/components/CommunityBar/CommunityBar.tsx @@ -0,0 +1,19 @@ +import type { Component } from "solid-js"; +import { ICommunityBarProps } from "./types"; + +const CommunityBar: Component = ( + props: ICommunityBarProps, +) => { + return ( +
    +
    +

    {props.name}

    +

    {props.description}

    +
    +
    + ); +}; + +export { CommunityBar }; diff --git a/src/components/CommunityBar/index.ts b/src/components/CommunityBar/index.ts new file mode 100644 index 0000000..2f691e6 --- /dev/null +++ b/src/components/CommunityBar/index.ts @@ -0,0 +1,2 @@ +export * from "./CommunityBar"; +export * from "./types"; diff --git a/src/components/CommunityBar/types.ts b/src/components/CommunityBar/types.ts new file mode 100644 index 0000000..ab00ff9 --- /dev/null +++ b/src/components/CommunityBar/types.ts @@ -0,0 +1,8 @@ +interface ICommunityBarProps { + id?: string; + name?: string; + description?: string; + avatar?: string; +} + +export { type ICommunityBarProps }; diff --git a/src/components/Member/Member.tsx b/src/components/Member/Member.tsx index e2b7a3f..d6d43e7 100644 --- a/src/components/Member/Member.tsx +++ b/src/components/Member/Member.tsx @@ -1,7 +1,20 @@ import type { Component } from "solid-js"; +import { IMemberProps } from "./types"; -const Member: Component = () => { - return
    ; +const Member: Component = (props: IMemberProps) => { + return ( +
  • props.onMemberClick(props.id)} + > +
    +
    + +
    +
    +
    {props.username}
    +
    • + ); }; export { Member }; diff --git a/src/components/Member/index.ts b/src/components/Member/index.ts index faf531b..801062a 100644 --- a/src/components/Member/index.ts +++ b/src/components/Member/index.ts @@ -1 +1,2 @@ export * from "./Member"; +export * from "./types"; diff --git a/src/components/Member/types.ts b/src/components/Member/types.ts new file mode 100644 index 0000000..5cdf127 --- /dev/null +++ b/src/components/Member/types.ts @@ -0,0 +1,9 @@ +interface IMemberProps { + id: string; + username: string; + avatar: string; + active: boolean; + onMemberClick: (id: string) => void; +} + +export { type IMemberProps }; diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 199d166..316c681 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -3,7 +3,7 @@ import { IMessageProps } from "./types"; const Message: Component = (props: IMessageProps) => { return ( -
  • +
  • props.onProfileClick(props.userId)} diff --git a/src/components/MessageBar/MessageBar.tsx b/src/components/MessageBar/MessageBar.tsx index f547396..47aedad 100644 --- a/src/components/MessageBar/MessageBar.tsx +++ b/src/components/MessageBar/MessageBar.tsx @@ -1,4 +1,5 @@ import type { Component } from "solid-js"; +import { state } from "../../store/state"; const MessageBar: Component = () => { return ( diff --git a/src/services/community/community.ts b/src/services/community/community.ts index 55460d8..206eff9 100644 --- a/src/services/community/community.ts +++ b/src/services/community/community.ts @@ -1,5 +1,13 @@ -import { fetchCommunityApi } from "../../api/community"; +import { + fetchCommunityApi, + fetchCommunityChannelsApi, + fetchCommunityRolesApi, + fetchCommunityMembersApi, +} from "../../api/community"; import { CommunityActionTypes } from "../../store/community"; +import { ChannelActionTypes } from "../../store/channel"; +import { RoleActionTypes } from "../../store/role"; +import { UserActionTypes } from "../../store/user"; import { dispatch } from "../../store/state"; const fetchCommunity = async (id: string) => { @@ -13,4 +21,63 @@ const fetchCommunity = async (id: string) => { }); }; -export { fetchCommunity }; +const fetchCommunityChannels = async (id: string) => { + const data = await fetchCommunityChannelsApi({ + id: id, + }); + + dispatch({ + type: CommunityActionTypes.FETCH_COMMUNITY_CHANNELS_FINISH, + payload: data, + }); + + data.channels.forEach((channel) => { + dispatch({ + type: ChannelActionTypes.SET_CHANNEL, + payload: channel, + }); + }); +}; + +const fetchCommunityRoles = async (id: string) => { + const data = await fetchCommunityRolesApi({ + id: id, + }); + + dispatch({ + type: CommunityActionTypes.FETCH_COMMUNITY_ROLES_FINISH, + payload: data, + }); + + data.roles.forEach((role) => { + dispatch({ + type: RoleActionTypes.SET_ROLE, + payload: role, + }); + }); +}; + +const fetchCommunityMembers = async (id: string) => { + const data = await fetchCommunityMembersApi({ + id: id, + }); + + dispatch({ + type: CommunityActionTypes.FETCH_COMMUNITY_MEMBERS_FINISH, + payload: data, + }); + + data.members.forEach((member) => { + dispatch({ + type: UserActionTypes.SET_USER, + payload: member, + }); + }); +}; + +export { + fetchCommunity, + fetchCommunityChannels, + fetchCommunityRoles, + fetchCommunityMembers, +}; diff --git a/src/store/channel/actions.ts b/src/store/channel/actions.ts index b068c34..dacfa99 100644 --- a/src/store/channel/actions.ts +++ b/src/store/channel/actions.ts @@ -5,10 +5,13 @@ import { IUpdateChannelResponse, IRemoveChannelResponse, } from "../../api/channel"; +import { IFetchCommunityChannel } from "../../api/community"; enum ChannelActionTypes { - FETCH_CHANNEL_START = "FETCH_COMMUNITY_START", - FETCH_CHANNEL_FINISH = "FETCH_COMMUNITY_FINISH", + SET_CHANNEL = "SET_CHANNEL", + SET_ACTIVE_CHANNEL = "SET_ACTIVE_CHANNEL", + FETCH_CHANNEL_START = "FETCH_CHANNEL_START", + FETCH_CHANNEL_FINISH = "FETCH_CHANNEL_FINISH", CREATE_CHANNEL_START = "CREATE_CHANNEL_START", CREATE_CHANNEL_FINISH = "CREATE_CHANNEL_FINISH", UPDATE_CHANNEL_START = "UPDATE_CHANNEL_START", @@ -18,6 +21,14 @@ enum ChannelActionTypes { } type ChannelAction = + | { + type: ChannelActionTypes.SET_CHANNEL; + payload: IFetchCommunityChannel; + } + | { + type: ChannelActionTypes.SET_ACTIVE_CHANNEL; + payload: string; + } | { type: ChannelActionTypes.FETCH_CHANNEL_START; payload: string } | { type: ChannelActionTypes.FETCH_CHANNEL_FINISH; diff --git a/src/store/channel/channel.ts b/src/store/channel/channel.ts index c254959..d2fc70e 100644 --- a/src/store/channel/channel.ts +++ b/src/store/channel/channel.ts @@ -10,14 +10,17 @@ import { IChannelState } from "./types"; function channelReducer(state: IChannelState, action: ChannelAction) { switch (action.type) { + case ChannelActionTypes.SET_CHANNEL: + setState("channel", "channels", action.payload.id, action.payload); + break; + case ChannelActionTypes.SET_ACTIVE_CHANNEL: + setState("channel", "active", action.payload); + break; case ChannelActionTypes.FETCH_CHANNEL_START: fetchChannel(action.payload); break; case ChannelActionTypes.FETCH_CHANNEL_FINISH: - setState("channel", "channels", { - ...state.channels, - [action.payload.id]: action.payload, - }); + setState("channel", "channels", action.payload.id, action.payload); break; case ChannelActionTypes.CREATE_CHANNEL_START: createChannel(action.payload.name, action.payload.communityId); diff --git a/src/store/channel/types.ts b/src/store/channel/types.ts index d7a0590..c7646f0 100644 --- a/src/store/channel/types.ts +++ b/src/store/channel/types.ts @@ -1,4 +1,5 @@ interface IChannelState { + active: string; channels: Record; } diff --git a/src/store/community/actions.ts b/src/store/community/actions.ts index 572e1a2..8cd1c43 100644 --- a/src/store/community/actions.ts +++ b/src/store/community/actions.ts @@ -1,21 +1,61 @@ -import { IFetchCommunityResponse } from "../../api/community"; +import { + IFetchCommunityResponse, + IFetchCommunityChannelsResponse, + IFetchCommunityRolesResponse, + IFetchCommunityMembersResponse, +} from "../../api/community"; import { IFetchUserCommunity } from "../../api/user"; enum CommunityActionTypes { + SET_COMMUNITY = "SET_COMMUNITY", + SET_ACTIVE_COMMUNITY = "SET_ACTIVE_COMMUNITY", FETCH_COMMUNITY_START = "FETCH_COMMUNITY_START", FETCH_COMMUNITY_FINISH = "FETCH_COMMUNITY_FINISH", - SET_COMMUNITY = "SET_COMMUNITY", + FETCH_COMMUNITY_CHANNELS_START = "FETCH_COMMUNITY_CHANNELS_START", + FETCH_COMMUNITY_CHANNELS_FINISH = "FETCH_COMMUNITY_CHANNELS_FINISH", + FETCH_COMMUNITY_ROLES_START = "FETCH_COMMUNITY_ROLES_START", + FETCH_COMMUNITY_ROLES_FINISH = "FETCH_COMMUNITY_ROLES_FINISH", + FETCH_COMMUNITY_MEMBERS_START = "FETCH_COMMUNITY_MEMBERS_START", + FETCH_COMMUNITY_MEMBERS_FINISH = "FETCH_COMMUNITY_MEMBERS_FINISH", } type CommunityAction = + | { + type: CommunityActionTypes.SET_COMMUNITY; + payload: IFetchUserCommunity; + } + | { + type: CommunityActionTypes.SET_ACTIVE_COMMUNITY; + payload: string; + } | { type: CommunityActionTypes.FETCH_COMMUNITY_START; payload: string } | { type: CommunityActionTypes.FETCH_COMMUNITY_FINISH; payload: IFetchCommunityResponse; } | { - type: CommunityActionTypes.SET_COMMUNITY; - payload: IFetchUserCommunity; + type: CommunityActionTypes.FETCH_COMMUNITY_CHANNELS_START; + payload: string; + } + | { + type: CommunityActionTypes.FETCH_COMMUNITY_CHANNELS_FINISH; + payload: IFetchCommunityChannelsResponse; + } + | { + type: CommunityActionTypes.FETCH_COMMUNITY_ROLES_START; + payload: string; + } + | { + type: CommunityActionTypes.FETCH_COMMUNITY_ROLES_FINISH; + payload: IFetchCommunityRolesResponse; + } + | { + type: CommunityActionTypes.FETCH_COMMUNITY_MEMBERS_START; + payload: string; + } + | { + type: CommunityActionTypes.FETCH_COMMUNITY_MEMBERS_FINISH; + payload: IFetchCommunityMembersResponse; }; export { CommunityActionTypes, type CommunityAction }; diff --git a/src/store/community/community.ts b/src/store/community/community.ts index 9c96aa9..b9cb676 100644 --- a/src/store/community/community.ts +++ b/src/store/community/community.ts @@ -1,23 +1,59 @@ -import { fetchCommunity } from "../../services/community"; +import { + fetchCommunity, + fetchCommunityChannels, + fetchCommunityRoles, + fetchCommunityMembers, +} from "../../services/community"; import { setState } from "../state"; import { CommunityActionTypes, CommunityAction } from "./actions"; import { ICommunityState } from "./types"; function communityReducer(state: ICommunityState, action: CommunityAction) { switch (action.type) { + case CommunityActionTypes.SET_COMMUNITY: + setState( + "community", + "communities", + action.payload.id, + action.payload, + ); + break; + case CommunityActionTypes.SET_ACTIVE_COMMUNITY: + setState("community", "active", action.payload); + break; case CommunityActionTypes.FETCH_COMMUNITY_START: fetchCommunity(action.payload); break; case CommunityActionTypes.FETCH_COMMUNITY_FINISH: - setState("community", "communities", { - ...state.communities, - [action.payload.id]: action.payload, + setState( + "community", + "communities", + action.payload.id, + action.payload, + ); + break; + case CommunityActionTypes.FETCH_COMMUNITY_CHANNELS_START: + fetchCommunityChannels(action.payload); + break; + case CommunityActionTypes.FETCH_COMMUNITY_CHANNELS_FINISH: + setState("community", "communities", action.payload.id, { + channels: action.payload.channels.map((channel) => channel.id), }); break; - case CommunityActionTypes.SET_COMMUNITY: - setState("community", "communities", { - ...state.communities, - [action.payload.id]: action.payload, + case CommunityActionTypes.FETCH_COMMUNITY_ROLES_START: + fetchCommunityRoles(action.payload); + break; + case CommunityActionTypes.FETCH_COMMUNITY_ROLES_FINISH: + setState("community", "communities", action.payload.id, { + roles: action.payload.roles.map((role) => role.id), + }); + break; + case CommunityActionTypes.FETCH_COMMUNITY_MEMBERS_START: + fetchCommunityMembers(action.payload); + break; + case CommunityActionTypes.FETCH_COMMUNITY_MEMBERS_FINISH: + setState("community", "communities", action.payload.id, { + members: action.payload.members.map((member) => member.id), }); break; } diff --git a/src/store/community/types.ts b/src/store/community/types.ts index 3c92888..f12663b 100644 --- a/src/store/community/types.ts +++ b/src/store/community/types.ts @@ -1,4 +1,5 @@ interface ICommunityState { + active: string; communities: Record; } @@ -8,6 +9,9 @@ interface ICommunity { description?: string; owner?: string; creationDate?: number; + channels?: string[]; + roles?: string[]; + members?: string[]; } export { type ICommunityState, type ICommunity }; diff --git a/src/store/role/actions.ts b/src/store/role/actions.ts index 694b445..6376028 100644 --- a/src/store/role/actions.ts +++ b/src/store/role/actions.ts @@ -1,3 +1,4 @@ +import { IFetchCommunityRole } from "../../api/community"; import { ICreateRoleRequest, IFetchRoleResponse, @@ -7,6 +8,7 @@ import { } from "../../api/role"; enum RoleActionTypes { + SET_ROLE = "SET_ROLE", FETCH_ROLE_START = "FETCH_ROLE_START", FETCH_ROLE_FINISH = "FETCH_ROLE_FINISH", CREATE_ROLE_START = "CREATE_ROLE_START", @@ -18,6 +20,10 @@ enum RoleActionTypes { } type RoleAction = + | { + type: RoleActionTypes.SET_ROLE; + payload: IFetchCommunityRole; + } | { type: RoleActionTypes.FETCH_ROLE_START; payload: string } | { type: RoleActionTypes.FETCH_ROLE_FINISH; diff --git a/src/store/role/role.ts b/src/store/role/role.ts index 1a4ab5d..ac9fb2b 100644 --- a/src/store/role/role.ts +++ b/src/store/role/role.ts @@ -10,14 +10,14 @@ import { IRoleState } from "./types"; function roleReducer(state: IRoleState, action: RoleAction) { switch (action.type) { + case RoleActionTypes.SET_ROLE: + setState("role", "roles", action.payload.id, action.payload); + break; case RoleActionTypes.FETCH_ROLE_START: fetchRole(action.payload); break; case RoleActionTypes.FETCH_ROLE_FINISH: - setState("role", "roles", { - ...state.roles, - [action.payload.id]: action.payload, - }); + setState("role", "roles", action.payload.id, action.payload); break; case RoleActionTypes.CREATE_ROLE_START: createRole(action.payload.name, action.payload.communityId); diff --git a/src/store/user/actions.ts b/src/store/user/actions.ts index 90c4f00..5065531 100644 --- a/src/store/user/actions.ts +++ b/src/store/user/actions.ts @@ -1,3 +1,4 @@ +import { IFetchCommunityMember } from "../../api/community"; import { IFetchLoggedUserResponse, IFetchUserResponse, @@ -5,6 +6,7 @@ import { } from "../../api/user"; enum UserActionTypes { + SET_USER = "SET_USER", FETCH_LOGGED_USER_ID_START = "FETCH_LOGGED_USER_ID_START", FETCH_LOGGED_USER_ID_FINISH = "FETCH_LOGGED_USER_ID_FINISH", FETCH_USER_START = "FETCH_USER_START", @@ -14,6 +16,10 @@ enum UserActionTypes { } type UserAction = + | { + type: UserActionTypes.SET_USER; + payload: IFetchCommunityMember; + } | { type: UserActionTypes.FETCH_LOGGED_USER_ID_START } | { type: UserActionTypes.FETCH_LOGGED_USER_ID_FINISH; diff --git a/src/store/user/user.ts b/src/store/user/user.ts index 746b4d2..65d8d5f 100644 --- a/src/store/user/user.ts +++ b/src/store/user/user.ts @@ -9,6 +9,9 @@ import { IUserState } from "./types"; function userReducer(state: IUserState, action: UserAction) { switch (action.type) { + case UserActionTypes.SET_USER: + setState("user", "users", action.payload.id, action.payload); + break; case UserActionTypes.FETCH_LOGGED_USER_ID_START: fetchLoggedUser(); break; @@ -19,23 +22,16 @@ function userReducer(state: IUserState, action: UserAction) { fetchUser(action.payload); break; case UserActionTypes.FETCH_USER_FINISH: - setState("user", "users", { - ...state.users, - [action.payload.id]: action.payload, - }); + setState("user", "users", action.payload.id, action.payload); break; case UserActionTypes.FETCH_USER_COMMUNITIES_START: fetchUserCommunities(action.payload); break; case UserActionTypes.FETCH_USER_COMMUNITIES_FINISH: - setState("user", "users", { - ...state.users, - [action.payload.id]: { - id: action.payload.id, - communities: action.payload.communities.map( - (community) => community.id, - ), - }, + setState("user", "users", action.payload.id, { + communities: action.payload.communities.map( + (community) => community.id, + ), }); break; } diff --git a/src/views/ChannelView/ChannelView.tsx b/src/views/ChannelView/ChannelView.tsx index 5a25313..438358d 100644 --- a/src/views/ChannelView/ChannelView.tsx +++ b/src/views/ChannelView/ChannelView.tsx @@ -1,11 +1,83 @@ -import type { Component } from "solid-js"; +import { createEffect, createMemo, type Component } from "solid-js"; import { CommunityView } from "../CommunityView"; +import { dispatch, state } from "../../store/state"; +import { CommunityActionTypes, ICommunity } from "../../store/community"; +import { ChannelActionTypes } from "../../store/channel"; +import { Channel } from "../../components/Channel"; +import { CommunityBar } from "../../components/CommunityBar"; const ChannelView: Component = () => { + const channelIds = createMemo(() => { + const activeCommunityId = state.community.active; + if (!activeCommunityId) { + return []; + } + + const community = state.community.communities[activeCommunityId]; + if (!community) { + return []; + } + + return community.channels ?? []; + }); + + const communityInfo = createMemo(() => { + const activeCommunityId = state.community.active; + return state.community.communities[activeCommunityId]; + }); + + createEffect(() => { + if (state.community.active) { + dispatch({ + type: CommunityActionTypes.FETCH_COMMUNITY_CHANNELS_START, + payload: state.community.active, + }); + } + }); + + const onChannelClick = (id: string) => { + dispatch({ + type: ChannelActionTypes.FETCH_CHANNEL_START, + payload: id, + }); + dispatch({ + type: ChannelActionTypes.SET_ACTIVE_CHANNEL, + payload: id, + }); + }; + + const mapChannel = (channelId: string) => { + const channel = state.channel.channels[channelId]; + if (!channel) { + return undefined; + } + + return ( + + ); + }; + return ( -
    +
    -
    +
    + +
      + {channelIds().map(mapChannel)} +
    +
    ); }; diff --git a/src/views/ChatView/ChatView.tsx b/src/views/ChatView/ChatView.tsx index 11c1e77..5b92fbb 100644 --- a/src/views/ChatView/ChatView.tsx +++ b/src/views/ChatView/ChatView.tsx @@ -1,7 +1,10 @@ -import { onMount, type Component } from "solid-js"; +import { createMemo, onMount, type Component } from "solid-js"; import { ChannelBar } from "../../components/ChannelBar"; import { MessageBar } from "../../components/MessageBar"; import { Message } from "../../components/Message"; +import { dispatch, state } from "../../store/state"; +import { UserActionTypes } from "../../store/user"; +import { IChannel } from "../../store/channel"; const ChatView: Component = () => { const testMessages = [ @@ -175,6 +178,11 @@ const ChatView: Component = () => { }, ]; + const channelInfo = createMemo(() => { + const activeChannelId = state.channel.active; + return state.channel.channels[activeChannelId]; + }); + let scrollRef: HTMLUListElement | undefined; onMount(() => { if (scrollRef) { @@ -183,16 +191,23 @@ const ChatView: Component = () => { }); const onProfileClick = (userId: string) => { - console.log(userId); + dispatch({ + type: UserActionTypes.FETCH_USER_START, + payload: userId, + }); }; return (
    - +
      {testMessages.map((msg) => ( { const communityIds = createMemo(() => { @@ -18,7 +19,14 @@ const CommunityView: Component = () => { }); const onCommunityClick = (id: string) => { - console.log(id); + dispatch({ + type: CommunityActionTypes.FETCH_COMMUNITY_START, + payload: id, + }); + dispatch({ + type: CommunityActionTypes.SET_ACTIVE_COMMUNITY, + payload: id, + }); }; const mapCommunity = (communityId: string) => { @@ -34,16 +42,15 @@ const CommunityView: Component = () => { avatar={ "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp" } + active={community.id === state.community.active} onCommunityClick={onCommunityClick} /> ); }; return ( -
      -
      - {communityIds().map(mapCommunity)} -
      +
      + {communityIds().map(mapCommunity)}
      ); }; diff --git a/src/views/MemberView/MemberView.tsx b/src/views/MemberView/MemberView.tsx index e80b9a5..7cba075 100644 --- a/src/views/MemberView/MemberView.tsx +++ b/src/views/MemberView/MemberView.tsx @@ -1,7 +1,68 @@ -import type { Component } from "solid-js"; +import { createEffect, createMemo, type Component } from "solid-js"; +import { dispatch, state } from "../../store/state"; +import { CommunityActionTypes } from "../../store/community"; +import { UserActionTypes } from "../../store/user"; +import { Member } from "../../components/Member"; const MemberView: Component = () => { - return
      ; + const memberIds = createMemo(() => { + const activeCommunityId = state.community.active; + if (!activeCommunityId) { + return []; + } + + const community = state.community.communities[activeCommunityId]; + if (!community) { + return []; + } + + return community.members ?? []; + }); + + createEffect(() => { + if (state.community.active) { + dispatch({ + type: CommunityActionTypes.FETCH_COMMUNITY_MEMBERS_START, + payload: state.community.active, + }); + } + }); + + const onMemberClick = (id: string) => { + dispatch({ + type: UserActionTypes.FETCH_USER_START, + payload: id, + }); + }; + + const mapMember = (memberId: string) => { + const member = state.user.users[memberId]; + if (!member) { + return undefined; + } + + return ( + + ); + }; + + return ( +
      +
      +
        + {memberIds().map(mapMember)} +
      +
      +
      + ); }; export { MemberView };