diff --git a/index.html b/index.html index 1739f62..bc0c4a8 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/api/community/community.ts b/src/api/community/community.ts new file mode 100644 index 0000000..0331eb0 --- /dev/null +++ b/src/api/community/community.ts @@ -0,0 +1,10 @@ +import { callApi, HTTP } from "../tools"; +import { IFetchCommunityRequest, IFetchCommunityResponse } from "./types"; + +const fetchCommunityApi = async ( + request: IFetchCommunityRequest, +): Promise => { + return await callApi(HTTP.GET, `community/${request.id}`); +}; + +export { fetchCommunityApi }; diff --git a/src/api/community/index.ts b/src/api/community/index.ts new file mode 100644 index 0000000..1a806be --- /dev/null +++ b/src/api/community/index.ts @@ -0,0 +1,2 @@ +export * from "./community"; +export * from "./types"; diff --git a/src/api/community/types.ts b/src/api/community/types.ts new file mode 100644 index 0000000..bd5d2f0 --- /dev/null +++ b/src/api/community/types.ts @@ -0,0 +1,11 @@ +interface IFetchCommunityRequest { + id: string; +} + +interface IFetchCommunityResponse { + id: string; + name: string; + description: string; +} + +export { type IFetchCommunityRequest, type IFetchCommunityResponse }; diff --git a/src/api/game/game.ts b/src/api/game/game.ts deleted file mode 100644 index 4256270..0000000 --- a/src/api/game/game.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { callApi, HTTP } from "../tools"; -import { IGameTimeResponse } from "./types"; - -async function fetchTimeApi(): Promise { - const data = await callApi(HTTP.GET, "game/time"); - - return { - time: data, - }; -} - -export { fetchTimeApi }; diff --git a/src/api/game/types.ts b/src/api/game/types.ts deleted file mode 100644 index 29b2b91..0000000 --- a/src/api/game/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -interface IGameTimeResponse { - time: number; -} - -export { type IGameTimeResponse }; diff --git a/src/api/user/index.ts b/src/api/user/index.ts new file mode 100644 index 0000000..f040ea0 --- /dev/null +++ b/src/api/user/index.ts @@ -0,0 +1,2 @@ +export * from "./user"; +export * from "./types"; diff --git a/src/api/user/types.ts b/src/api/user/types.ts new file mode 100644 index 0000000..c7744de --- /dev/null +++ b/src/api/user/types.ts @@ -0,0 +1,37 @@ +interface IFetchLoggedUserResponse { + id: string; +} + +interface IFetchUserRequest { + id: string; +} + +interface IFetchUserResponse { + id: string; + username: string; + description: string; +} + +interface IFetchUserCommunitiesRequest { + id: string; +} + +interface IFetchUserCommunitiesResponse { + id: string; + communities: IFetchUserCommunity[]; +} + +interface IFetchUserCommunity { + id: string; + name: string; + description: string; +} + +export { + type IFetchLoggedUserResponse, + type IFetchUserRequest, + type IFetchUserResponse, + type IFetchUserCommunitiesRequest, + type IFetchUserCommunitiesResponse, + type IFetchUserCommunity, +}; diff --git a/src/api/user/user.ts b/src/api/user/user.ts new file mode 100644 index 0000000..9d20a6d --- /dev/null +++ b/src/api/user/user.ts @@ -0,0 +1,26 @@ +import { callApi, HTTP } from "../tools"; +import { + IFetchLoggedUserResponse, + IFetchUserRequest, + IFetchUserResponse, + IFetchUserCommunitiesRequest, + IFetchUserCommunitiesResponse, +} from "./types"; + +const fetchLoggedUserApi = async (): Promise => { + return await callApi(HTTP.GET, `user/logged`); +}; + +const fetchUserApi = async ( + request: IFetchUserRequest, +): Promise => { + return await callApi(HTTP.GET, `user/${request.id}`); +}; + +const fetchUserCommunitiesApi = async ( + request: IFetchUserCommunitiesRequest, +): Promise => { + return await callApi(HTTP.GET, `user/${request.id}/communities`); +}; + +export { fetchLoggedUserApi, fetchUserApi, fetchUserCommunitiesApi }; diff --git a/src/components/ChannelBar/ChannelBar.tsx b/src/components/ChannelBar/ChannelBar.tsx index 646208d..ebbaaf7 100644 --- a/src/components/ChannelBar/ChannelBar.tsx +++ b/src/components/ChannelBar/ChannelBar.tsx @@ -1,7 +1,11 @@ import type { Component } from "solid-js"; const ChannelBar: Component = () => { - return
; + return ( +
+
+
+ ); }; export default ChannelBar; diff --git a/src/components/Community/Community.tsx b/src/components/Community/Community.tsx index e32393b..70848ae 100644 --- a/src/components/Community/Community.tsx +++ b/src/components/Community/Community.tsx @@ -1,7 +1,17 @@ import type { Component } from "solid-js"; +import { ICommunityProps } from "./types"; -const Community: Component = () => { - return
; +const Community: Component = (props: ICommunityProps) => { + return ( +
props.onCommunityClick(props.id)} + > +
+ +
+
+ ); }; export default Community; diff --git a/src/components/Community/index.ts b/src/components/Community/index.ts index 264bd60..c09048f 100644 --- a/src/components/Community/index.ts +++ b/src/components/Community/index.ts @@ -1 +1,2 @@ export * from "./Community"; +export * from "./types"; diff --git a/src/components/Community/types.ts b/src/components/Community/types.ts new file mode 100644 index 0000000..46a969a --- /dev/null +++ b/src/components/Community/types.ts @@ -0,0 +1,8 @@ +interface ICommunityProps { + id: string; + name: string; + avatar: string; + onCommunityClick: (id: string) => void; +} + +export { type ICommunityProps }; diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index e7e4232..cfd8d2c 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -9,7 +9,7 @@ const Message: Component = (props: IMessageProps) => { onClick={() => props.onProfileClick(props.userId)} >
- +
diff --git a/src/components/Message/types.ts b/src/components/Message/types.ts index 77b06c3..90ca425 100644 --- a/src/components/Message/types.ts +++ b/src/components/Message/types.ts @@ -3,7 +3,7 @@ interface IMessageProps { message: string; userId: string; username: string; - profileImage: string; + avatar: string; onProfileClick: (userId: string) => void; } diff --git a/src/components/MessageBar/MessageBar.tsx b/src/components/MessageBar/MessageBar.tsx index 0d51fcd..c0da0c2 100644 --- a/src/components/MessageBar/MessageBar.tsx +++ b/src/components/MessageBar/MessageBar.tsx @@ -2,18 +2,14 @@ import type { Component } from "solid-js"; const MessageBar: Component = () => { return ( -
-
-
- -
- +
+
+ +
); diff --git a/src/services/community/community.ts b/src/services/community/community.ts new file mode 100644 index 0000000..55460d8 --- /dev/null +++ b/src/services/community/community.ts @@ -0,0 +1,16 @@ +import { fetchCommunityApi } from "../../api/community"; +import { CommunityActionTypes } from "../../store/community"; +import { dispatch } from "../../store/state"; + +const fetchCommunity = async (id: string) => { + const data = await fetchCommunityApi({ + id: id, + }); + + dispatch({ + type: CommunityActionTypes.FETCH_COMMUNITY_FINISH, + payload: data, + }); +}; + +export { fetchCommunity }; diff --git a/src/services/community/index.ts b/src/services/community/index.ts new file mode 100644 index 0000000..5c514e2 --- /dev/null +++ b/src/services/community/index.ts @@ -0,0 +1 @@ +export * from "./community"; diff --git a/src/services/game/game.ts b/src/services/game/game.ts deleted file mode 100644 index 467733f..0000000 --- a/src/services/game/game.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { fetchTimeApi } from "../../api/game/game"; -import { dispatch } from "../../store/state"; - -async function fetchTime() { - const data = await fetchTimeApi(); - - dispatch({ - type: "FETCH_TIME_FINISH", - payload: data.time, - }); -} - -export { fetchTime }; diff --git a/src/services/user/index.ts b/src/services/user/index.ts new file mode 100644 index 0000000..fd843fa --- /dev/null +++ b/src/services/user/index.ts @@ -0,0 +1 @@ +export * from "./user"; diff --git a/src/services/user/user.ts b/src/services/user/user.ts new file mode 100644 index 0000000..00193ce --- /dev/null +++ b/src/services/user/user.ts @@ -0,0 +1,48 @@ +import { + fetchLoggedUserApi, + fetchUserApi, + fetchUserCommunitiesApi, +} from "../../api/user"; +import { UserActionTypes } from "../../store/user"; +import { CommunityActionTypes } from "../../store/community"; +import { dispatch } from "../../store/state"; + +const fetchLoggedUser = async () => { + const data = await fetchLoggedUserApi(); + + dispatch({ + type: UserActionTypes.FETCH_LOGGED_USER_ID_FINISH, + payload: data, + }); +}; + +const fetchUser = async (id: string) => { + const data = await fetchUserApi({ + id: id, + }); + + dispatch({ + type: UserActionTypes.FETCH_USER_FINISH, + payload: data, + }); +}; + +const fetchUserCommunities = async (id: string) => { + const data = await fetchUserCommunitiesApi({ + id: id, + }); + + dispatch({ + type: UserActionTypes.FETCH_USER_COMMUNITIES_FINISH, + payload: data, + }); + + data.communities.forEach((community) => { + dispatch({ + type: CommunityActionTypes.SET_COMMUNITY, + payload: community, + }); + }); +}; + +export { fetchLoggedUser, fetchUser, fetchUserCommunities }; diff --git a/src/store/actions.ts b/src/store/actions.ts index edd7909..3524a2f 100644 --- a/src/store/actions.ts +++ b/src/store/actions.ts @@ -1,7 +1,8 @@ -import { GameAction, GameActionTypes } from "./game"; +import { UserActionTypes, UserAction } from "./user"; +import { CommunityActionTypes, CommunityAction } from "./community"; -type ActionTypes = GameActionTypes; +type ActionTypes = UserActionTypes | CommunityActionTypes; -type Action = GameAction; +type Action = UserAction | CommunityAction; export { type Action, type ActionTypes }; diff --git a/src/store/community/actions.ts b/src/store/community/actions.ts new file mode 100644 index 0000000..572e1a2 --- /dev/null +++ b/src/store/community/actions.ts @@ -0,0 +1,21 @@ +import { IFetchCommunityResponse } from "../../api/community"; +import { IFetchUserCommunity } from "../../api/user"; + +enum CommunityActionTypes { + FETCH_COMMUNITY_START = "FETCH_COMMUNITY_START", + FETCH_COMMUNITY_FINISH = "FETCH_COMMUNITY_FINISH", + SET_COMMUNITY = "SET_COMMUNITY", +} + +type CommunityAction = + | { type: CommunityActionTypes.FETCH_COMMUNITY_START; payload: string } + | { + type: CommunityActionTypes.FETCH_COMMUNITY_FINISH; + payload: IFetchCommunityResponse; + } + | { + type: CommunityActionTypes.SET_COMMUNITY; + payload: IFetchUserCommunity; + }; + +export { CommunityActionTypes, type CommunityAction }; diff --git a/src/store/community/community.ts b/src/store/community/community.ts new file mode 100644 index 0000000..90c46e7 --- /dev/null +++ b/src/store/community/community.ts @@ -0,0 +1,34 @@ +import { fetchCommunity } from "../../services/community"; +import { CommunityActionTypes, CommunityAction } from "./actions"; +import { ICommunityState } from "./types"; + +function communityReducer( + state: ICommunityState, + action: CommunityAction, +): ICommunityState { + switch (action.type) { + case CommunityActionTypes.FETCH_COMMUNITY_START: + fetchCommunity(action.payload); + return state; + case CommunityActionTypes.FETCH_COMMUNITY_FINISH: + return { + ...state, + communities: { + ...state.communities, + [action.payload.id]: action.payload, + }, + }; + case CommunityActionTypes.SET_COMMUNITY: + return { + ...state, + communities: { + ...state.communities, + [action.payload.id]: action.payload, + }, + }; + default: + return state; + } +} + +export { communityReducer }; diff --git a/src/store/community/index.ts b/src/store/community/index.ts new file mode 100644 index 0000000..8162b36 --- /dev/null +++ b/src/store/community/index.ts @@ -0,0 +1,3 @@ +export * from "./community"; +export * from "./actions"; +export * from "./types"; diff --git a/src/store/community/types.ts b/src/store/community/types.ts new file mode 100644 index 0000000..d8d660b --- /dev/null +++ b/src/store/community/types.ts @@ -0,0 +1,11 @@ +interface ICommunityState { + communities: Record; +} + +interface ICommunity { + id: string; + name?: string; + description?: string; +} + +export { type ICommunityState, type ICommunity }; diff --git a/src/store/game/actions.ts b/src/store/game/actions.ts deleted file mode 100644 index 7f276e9..0000000 --- a/src/store/game/actions.ts +++ /dev/null @@ -1,10 +0,0 @@ -type FETCH_TIME_START = "FETCH_TIME_START"; -type FETCH_TIME_FINISH = "FETCH_TIME_FINISH"; - -type GameActionTypes = FETCH_TIME_START | FETCH_TIME_FINISH; - -type GameAction = - | { type: FETCH_TIME_START } - | { type: FETCH_TIME_FINISH; payload: number }; - -export { type GameActionTypes, type GameAction }; diff --git a/src/store/game/game.ts b/src/store/game/game.ts deleted file mode 100644 index 712e304..0000000 --- a/src/store/game/game.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { fetchTime } from "../../services/game/game"; -import { GameAction } from "./actions"; -import { IGameState } from "./types"; - -function gameReducer(state: IGameState, action: GameAction): IGameState { - switch (action.type) { - case "FETCH_TIME_START": - fetchTime(); - return { ...state }; - case "FETCH_TIME_FINISH": - return { ...state, time: action.payload }; - default: - return state; - } -} - -export { gameReducer }; diff --git a/src/store/game/types.ts b/src/store/game/types.ts deleted file mode 100644 index 0777613..0000000 --- a/src/store/game/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -interface IGameState { - time: number; -} - -export { type IGameState }; diff --git a/src/store/reducers.ts b/src/store/reducers.ts index 991f069..30e23d1 100644 --- a/src/store/reducers.ts +++ b/src/store/reducers.ts @@ -1,10 +1,12 @@ import { IState } from "./types"; import { Action } from "./actions"; -import { GameAction, gameReducer } from "./game"; +import { UserAction, userReducer } from "./user"; +import { CommunityAction, communityReducer } from "./community"; function reducer(state: IState, action: Action): IState { return { - game: gameReducer(state.game, action as GameAction), + user: userReducer(state.user, action as UserAction), + community: communityReducer(state.community, action as CommunityAction), }; } diff --git a/src/store/state.ts b/src/store/state.ts index f09b65c..13051dc 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -4,8 +4,12 @@ import { Action } from "./actions"; import { reducer } from "./reducers"; const [state, setState] = createStore({ - game: { - time: 0, + user: { + loggedUserId: undefined, + users: {}, + }, + community: { + communities: {}, }, }); diff --git a/src/store/types.ts b/src/store/types.ts index 2953136..7927a0d 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -1,7 +1,9 @@ -import { IGameState } from "./game"; +import { IUserState } from "./user"; +import { ICommunityState } from "./community"; interface IState { - game: IGameState; + user: IUserState; + community: ICommunityState; } export { type IState }; diff --git a/src/store/user/actions.ts b/src/store/user/actions.ts new file mode 100644 index 0000000..90c4f00 --- /dev/null +++ b/src/store/user/actions.ts @@ -0,0 +1,30 @@ +import { + IFetchLoggedUserResponse, + IFetchUserResponse, + IFetchUserCommunitiesResponse, +} from "../../api/user"; + +enum UserActionTypes { + 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", + FETCH_USER_FINISH = "FETCH_USER_FINISH", + FETCH_USER_COMMUNITIES_START = "FETCH_USER_COMMUNITIES_START", + FETCH_USER_COMMUNITIES_FINISH = "FETCH_USER_COMMUNITIES_FINISH", +} + +type UserAction = + | { type: UserActionTypes.FETCH_LOGGED_USER_ID_START } + | { + type: UserActionTypes.FETCH_LOGGED_USER_ID_FINISH; + payload: IFetchLoggedUserResponse; + } + | { type: UserActionTypes.FETCH_USER_START; payload: string } + | { type: UserActionTypes.FETCH_USER_FINISH; payload: IFetchUserResponse } + | { type: UserActionTypes.FETCH_USER_COMMUNITIES_START; payload: string } + | { + type: UserActionTypes.FETCH_USER_COMMUNITIES_FINISH; + payload: IFetchUserCommunitiesResponse; + }; + +export { UserActionTypes, type UserAction }; diff --git a/src/store/game/index.ts b/src/store/user/index.ts similarity index 68% rename from src/store/game/index.ts rename to src/store/user/index.ts index 09e9caa..1611bda 100644 --- a/src/store/game/index.ts +++ b/src/store/user/index.ts @@ -1,3 +1,3 @@ -export * from "./game"; +export * from "./user"; export * from "./actions"; export * from "./types"; diff --git a/src/store/user/types.ts b/src/store/user/types.ts new file mode 100644 index 0000000..d72a97e --- /dev/null +++ b/src/store/user/types.ts @@ -0,0 +1,13 @@ +interface IUserState { + loggedUserId?: string; + users: Record; +} + +interface IUser { + id: string; + username?: string; + description?: string; + communities?: string[]; +} + +export { type IUserState, type IUser }; diff --git a/src/store/user/user.ts b/src/store/user/user.ts new file mode 100644 index 0000000..0cfd8d0 --- /dev/null +++ b/src/store/user/user.ts @@ -0,0 +1,51 @@ +import { + fetchLoggedUser, + fetchUser, + fetchUserCommunities, +} from "../../services/user"; +import { UserActionTypes, UserAction } from "./actions"; +import { IUserState } from "./types"; + +function userReducer(state: IUserState, action: UserAction): IUserState { + switch (action.type) { + case UserActionTypes.FETCH_LOGGED_USER_ID_START: + fetchLoggedUser(); + return state; + case UserActionTypes.FETCH_LOGGED_USER_ID_FINISH: + return { + ...state, + loggedUserId: action.payload.id, + }; + case UserActionTypes.FETCH_USER_START: + fetchUser(action.payload); + return state; + case UserActionTypes.FETCH_USER_FINISH: + return { + ...state, + users: { + ...state.users, + [action.payload.id]: action.payload, + }, + }; + case UserActionTypes.FETCH_USER_COMMUNITIES_START: + fetchUserCommunities(action.payload); + return state; + case UserActionTypes.FETCH_USER_COMMUNITIES_FINISH: + return { + ...state, + users: { + ...state.users, + [action.payload.id]: { + id: action.payload.id, + communities: action.payload.communities.map( + (community) => community.id, + ), + }, + }, + }; + default: + return state; + } +} + +export { userReducer }; diff --git a/src/views/ChannelView/ChannelView.tsx b/src/views/ChannelView/ChannelView.tsx index 70acd3f..d7e6c23 100644 --- a/src/views/ChannelView/ChannelView.tsx +++ b/src/views/ChannelView/ChannelView.tsx @@ -1,7 +1,13 @@ import type { Component } from "solid-js"; +import CommunityView from "../CommunityView/CommunityView"; const ChannelView: Component = () => { - return
; + return ( +
+ +
+
+ ); }; export default ChannelView; diff --git a/src/views/ChatView/ChatView.tsx b/src/views/ChatView/ChatView.tsx index ced14f3..bd1e834 100644 --- a/src/views/ChatView/ChatView.tsx +++ b/src/views/ChatView/ChatView.tsx @@ -1,4 +1,4 @@ -import type { Component } from "solid-js"; +import { onMount, type Component } from "solid-js"; import ChannelBar from "../../components/ChannelBar/ChannelBar"; import MessageBar from "../../components/MessageBar/MessageBar"; import Message from "../../components/Message/Message"; @@ -10,40 +10,197 @@ const ChatView: Component = () => { message: "Hello this is a test message", userId: "12121", username: "Aslan", - image: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", }, { messageId: "432433", message: "Hi hi", userId: "12122", username: "TestUser", - image: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", }, { messageId: "432434", message: "Nooooo", userId: "12121", username: "Aslan", - image: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", + }, + { + messageId: "432434", + message: "Nooooo", + userId: "12121", + username: "Aslan", + avatar: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp", }, ]; + let scrollRef: HTMLUListElement | undefined; + onMount(() => { + if (scrollRef) { + scrollRef.scrollTop = scrollRef.scrollHeight; + } + }); + const onProfileClick = (userId: string) => { console.log(userId); }; return ( -
-
+
+
-
    +
      {testMessages.map((msg) => ( ))} diff --git a/src/views/CommunityView/CommunityView.tsx b/src/views/CommunityView/CommunityView.tsx index 3c30fcd..5f6b8c2 100644 --- a/src/views/CommunityView/CommunityView.tsx +++ b/src/views/CommunityView/CommunityView.tsx @@ -1,7 +1,38 @@ import type { Component } from "solid-js"; +import Community from "../../components/Community/Community"; const CommunityView: Component = () => { - return
      ; + 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 onCommunityClick = (id: string) => { + console.log(id); + }; + + return ( +
      +
      + {communitiesTest.map((community) => ( + + ))} +
      +
      + ); }; export default CommunityView; diff --git a/src/views/MainView/MainView.tsx b/src/views/MainView/MainView.tsx index 04c69c3..410f5a5 100644 --- a/src/views/MainView/MainView.tsx +++ b/src/views/MainView/MainView.tsx @@ -1,5 +1,4 @@ import type { Component } from "solid-js"; -import CommunityView from "../CommunityView/CommunityView"; import ChannelView from "../ChannelView/ChannelView"; import ChatView from "../ChatView/ChatView"; import MemberView from "../MemberView/MemberView"; @@ -7,7 +6,6 @@ import MemberView from "../MemberView/MemberView"; const MainView: Component = () => { return (
      - diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..73ecd83 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,4 @@ +module.exports = { + plugins: [require("daisyui"), require("tailwind-scrollbar")], + daisyui: { themes: ["dark"] }, +};