chore: rename files

2023-01-29 09:25:50 +08:00
parent 23b452f579
commit be116c4d7e
5 changed files with 0 additions and 124 deletions
@@ -0,0 +1,80 @@
+// import { useState, useEffect } from "react";
+// import { NavLink } from "react-router-dom";
+import useMessageFeed from "../../../common/hook/useMessageFeed";
+import ChannelIcon from "../../../common/component/ChannelIcon";
+import Layout from "../Layout";
+import { renderMessageFragment } from "../utils";
+import { StyledChannelChat, StyledHeader } from "./styled";
+import LoadMore from "../LoadMore";
+import { useAppSelector } from "../../../app/store";
+import { useTranslation } from "react-i18next";
+type Props = {
+  cid?: number;
+};
+export default function GuestChannelChat({ cid = 0 }: Props) {
+  const { t } = useTranslation("chat");
+  const {
+    list: msgIds,
+    appends,
+    hasMore,
+    pullUp,
+    pulling
+  } = useMessageFeed({
+    context: "channel",
+    id: cid
+  });
+  const { data, messageData } = useAppSelector((store) => {
+    return {
+      footprint: store.footprint,
+      data: store.channels.byId[cid],
+      messageData: store.message || {}
+    };
+  });
+  if (!data) return null;
+  const { name, description, is_public } = data;
+  const feeds = [...msgIds, ...appends];
+  return (
+    <>
+      <Layout
+        readonly
+        to={cid}
+        context="channel"
+        header={
+          <StyledHeader className="head">
+            <div className="txt">
+              <ChannelIcon personal={!is_public} />
+              <span className="title">{name}</span>
+              <span className="desc">{description}</span>
+            </div>
+          </StyledHeader>
+        }
+      >
+        <StyledChannelChat id={`VOCECHAT_FEED_channel_${cid}`}>
+          {hasMore ? (
+            <LoadMore pullUp={pullUp} pulling={pulling} />
+          ) : (
+            <div className="info">
+              <h2 className="title">{t("welcome_channel", { name })}</h2>
+              <p className="desc">{t("welcome_desc", { name })} </p>
+            </div>
+          )}
+          {/* <div className="feed"> */}
+          {feeds.map((mid, idx) => {
+            const curr = messageData[mid];
+            if (!curr) return null;
+            const isFirst = idx == 0;
+            const prev = isFirst ? null : messageData[feeds[idx - 1]];
+            return renderMessageFragment({
+              readonly: true,
+              selectMode: false,
+              prev,
+              curr,
+              contextId: cid,
+              context: "channel"
+            });
+          })}
+        </StyledChannelChat>
+      </Layout>
+    </>
+  );
+}
@@ -0,0 +1,51 @@
+import styled from "styled-components";
+export const StyledHeader = styled.header`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .txt {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    .title {
+      font-size: 16px;
+      line-height: 24px;
+      color: #1c1c1e;
+    }
+    .desc {
+      margin-left: 8px;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: #616161;
+    }
+  }
+`;
+export const StyledChannelChat = styled.article`
+  padding: 18px 16px;
+  width: 100%;
+  height: 100%;
+  height: -webkit-fill-available;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overflow-anchor: auto;
+  > .info {
+    padding-top: 62px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    .title {
+      font-weight: bold;
+      font-size: 36px;
+      line-height: 44px;
+    }
+    .desc {
+      color: #78787c;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+`;