From 47587812b809fee2a95c76266d9d0e42fc4ac1ca Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 15 Jun 2021 14:14:28 +0800 Subject: ... --- FrontEnd/src/views/home/TimelineListView.tsx | 101 ++++++++++++++++++++++++ FrontEnd/src/views/home/WebsiteIntroduction.tsx | 77 ++++++++++++++++++ FrontEnd/src/views/home/home.sass | 29 +++++++ FrontEnd/src/views/home/index.tsx | 74 +++++++++++++++++ 4 files changed, 281 insertions(+) create mode 100644 FrontEnd/src/views/home/TimelineListView.tsx create mode 100644 FrontEnd/src/views/home/WebsiteIntroduction.tsx create mode 100644 FrontEnd/src/views/home/home.sass create mode 100644 FrontEnd/src/views/home/index.tsx (limited to 'FrontEnd/src/views/home') diff --git a/FrontEnd/src/views/home/TimelineListView.tsx b/FrontEnd/src/views/home/TimelineListView.tsx new file mode 100644 index 00000000..975875af --- /dev/null +++ b/FrontEnd/src/views/home/TimelineListView.tsx @@ -0,0 +1,101 @@ +import React from "react"; + +import { convertI18nText, I18nText } from "@/common"; + +import { HttpTimelineInfo } from "http/timeline"; +import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; + +interface TimelineListItemProps { + timeline: HttpTimelineInfo; +} + +const TimelineListItem: React.FC = ({ timeline }) => { + const url = React.useMemo( + () => + timeline.name.startsWith("@") + ? `/users/${timeline.owner.username}` + : `/timelines/${timeline.name}`, + [timeline] + ); + + return ( +
+ + + +
+
{timeline.title}
+
+ {timeline.description} +
+
+ + + +
+ ); +}; + +const TimelineListArrow: React.FC = () => { + return ( +
+
+ + + +
+
+ + + +
+
+ ); +}; + +interface TimelineListViewProps { + headerText?: I18nText; + timelines?: HttpTimelineInfo[]; +} + +const TimelineListView: React.FC = ({ + headerText, + timelines, +}) => { + const { t } = useTranslation(); + + return ( +
+
+ + + +

{convertI18nText(headerText, t)}

+
+ {timelines != null + ? timelines.map((t) => ) + : null} + +
+ ); +}; + +export default TimelineListView; diff --git a/FrontEnd/src/views/home/WebsiteIntroduction.tsx b/FrontEnd/src/views/home/WebsiteIntroduction.tsx new file mode 100644 index 00000000..aea7b4b2 --- /dev/null +++ b/FrontEnd/src/views/home/WebsiteIntroduction.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; + +const WebsiteIntroduction: React.FC<{ + className?: string; + style?: React.CSSProperties; +}> = ({ className, style }) => { + const { i18n } = useTranslation(); + + if (i18n.language.startsWith("zh")) { + return ( +
+

+ 欢迎来到时间线！🎉🎉🎉 +

+

+ 本网站由无数个独立的时间线构成，每一个时间线都是一个消息列表，类似于一个聊天软件（比如QQ）。 +

+

+ 如果你拥有一个账号，登陆 + 后你可以自由地在属于你的时间线中发送内容，支持markdown和上传图片哦！你可以创建一个新的时间线来开启一个新的话题。你也可以设置相关权限，只让一部分人能看到时间线的内容。 +

+

+ 如果你没有账号，那么你可以去浏览一下公开的时间线，比如下面这些站长设置的高光时间线。 +

+

+ 鉴于这个网站在我的小型服务器上部署，所以没有开放注册。如果你也想把这个服务部署到自己的服务器上，你可以在 + 关于页面找到一些信息。 +

+

+ + 这一段介绍是我的对象抱怨多次我的网站他根本看不明白之后加的，希望你能顺利看懂这个网站的逻辑！😅 + +

+
+ ); + } else { + return ( +
+

+ Welcome to Timeline!🎉🎉🎉 +

+

+ This website consists of many individual timelines. Each timeline is a + list of messages just like a chat app. +

+

+ If you do have an account, you can login and + post messages, which supports Markdown and images, in your timelines. + You can also create a new timeline to open a new topic. You can set + the permission of a timeline to only allow specified people to see the + content of the timeline. +

+

+ If you don't have an account, you can view some public timelines + like highlight timelines below set by website manager. +

+

+ Since this website is hosted on my tiny server, so account registry is + not opened. If you want to host this service on your own server, you + can find some useful information on about{" "} + page. +

+

+ + This introduction is added after my lover complained a lot of times + about the obscuration of my website. May you understand the logic of + it!😅 + +

+
+ ); + } +}; + +export default WebsiteIntroduction; diff --git a/FrontEnd/src/views/home/home.sass b/FrontEnd/src/views/home/home.sass new file mode 100644 index 00000000..b4cda586 --- /dev/null +++ b/FrontEnd/src/views/home/home.sass @@ -0,0 +1,29 @@ +.home-timeline-list-item + display: flex + align-items: center + +.home-timeline-list-item-timeline + transition: background 0.8s + animation: 0.8s home-timeline-list-item-timeline-enter + &:hover + background: $gray-200 + +@keyframes home-timeline-list-item-timeline-enter + from + transform: translate(-100%,0) + opacity: 0 + +.home-timeline-list-item-line + width: 80px + flex-shrink: 0 + +@keyframes home-timeline-list-loading-head-animation + from + transform: translate(0,-30px) + opacity: 1 + + to + opacity: 0 + +.home-timeline-list-loading-head + animation: 1s infinite home-timeline-list-loading-head-animation diff --git a/FrontEnd/src/views/home/index.tsx b/FrontEnd/src/views/home/index.tsx new file mode 100644 index 00000000..efc364d7 --- /dev/null +++ b/FrontEnd/src/views/home/index.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import { useHistory } from "react-router"; + +import { HttpTimelineInfo } from "http/timeline"; +import { getHttpHighlightClient } from "http/highlight"; + +import SearchInput from "../common/SearchInput"; +import TimelineListView from "./TimelineListView"; +import WebsiteIntroduction from "./WebsiteIntroduction"; + +const highlightTimelineMessageMap = { + loading: "home.loadingHighlightTimelines", + done: "home.loadedHighlightTimelines", + error: "home.errorHighlightTimelines", +} as const; + +const HomeV2: React.FC = () => { + const history = useHistory(); + + const [navText, setNavText] = React.useState(""); + + const [highlightTimelineState, setHighlightTimelineState] = React.useState< + "loading" | "done" | "error" + >("loading"); + const [highlightTimelines, setHighlightTimelines] = React.useState< + HttpTimelineInfo[] | undefined + >(); + + React.useEffect(() => { + if (highlightTimelineState === "loading") { + let subscribe = true; + void getHttpHighlightClient() + .list() + .then( + (data) => { + if (subscribe) { + setHighlightTimelineState("done"); + setHighlightTimelines(data); + } + }, + () => { + if (subscribe) { + setHighlightTimelineState("error"); + setHighlightTimelines(undefined); + } + } + ); + return () => { + subscribe = false; + }; + } + }, [highlightTimelineState]); + + return ( + <> + { + history.push(`search?q=${navText}`); + }} + alwaysOneline + /> + + + + ); +}; + +export default HomeV2; -- cgit v1.2.3