ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: more TS code

Browse Source
This commit is contained in:
Tristan Yang
2022-07-08 19:13:49 +08:00
parent 678b8515ca
commit 9f1b115c73
55 changed files with 421 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/FavList.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
// import React from "react";
// import { useSelector } from "react-redux";
import styled from "styled-components";
import FavoritedMessage from "../../common/component/Message/FavoritedMessage";
import FavoredMessage from "../../common/component/Message/FavoredMessage";
import IconSurprise from "../../assets/icons/emoji.suprise.svg";
// import IconForward from "../../../assets/icons/forward.svg";
import IconRemove from "../../assets/icons/close.svg";
@@ -107,7 +107,7 @@ export default function FavList({ cid = null, uid = null }) {
console.log("favv", id);
return (
<li key={id} className="fav">
<FavoritedMessage id={id} />
<FavoredMessage id={id} />
<div className="opts">
{/* <button
className="btn"
src/routes/favs/index.tsx
+4 -4
View File
@@ -1,7 +1,6 @@
import { useState, useEffect } from "react";
import Styled from "./styled";
import { useSelector } from "react-redux";
import FavoritedMessage from "../../common/component/Message/FavoritedMessage";
import FavoredMessage from "../../common/component/Message/FavoredMessage";
import dayjs from "dayjs";
import IconAudio from "../../assets/icons/file.audio.svg";
import IconVideo from "../../assets/icons/file.video.svg";
@@ -10,6 +9,7 @@ import IconUnknown from "../../assets/icons/file.unknown.svg";
import IconImage from "../../assets/icons/file.image.svg";
import IconChannel from "../../assets/icons/channel.svg";
import { ContentTypes } from "../../app/config";
import { useAppSelector } from "../../app/store";
const Filters = [
{
icon: <IconUnknown className="icon" />,
@@ -40,7 +40,7 @@ const Filters = [
function FavsPage() {
const [filter, setFilter] = useState("");
const [favs, setFavs] = useState([]);
const { favorites, channelData, userData } = useSelector((store) => {
const { favorites, channelData, userData } = useAppSelector((store) => {
console.log("favs", store.favorites);
return {
favorites: store.favorites,
@@ -153,7 +153,7 @@ function FavsPage() {
{tip}
{dayjs(created_at).format("YYYY-MM-DD")}
</h4>
<FavoritedMessage key={id} id={id} />
<FavoredMessage key={id} id={id} />
</div>
);
})}
src/routes/login/OidcLoginButton.tsx
+12 -8
View File
@@ -1,13 +1,14 @@
/* eslint-disable no-undef */
import { useState } from "react";
import { FC, useState } from "react";
import styled from "styled-components";
import StyledModal from "../../common/component/styled/Modal";
import Modal from "../../common/component/Modal";
import { StyledSocialButton } from "./styled";
import StyledButton from "../../common/component/styled/Button";
import OidcLoginEntry from "./OidcLoginEntry";
import { OIDCConfig } from "../../types/auth";
const StyledOicdLoginModal = styled(StyledModal)`
const StyledOidcLoginModal = styled(StyledModal)`
text-align: center;
padding: 32px 32px 16px;
@@ -21,13 +22,15 @@ const StyledOicdLoginModal = styled(StyledModal)`
height: 24px;
}
&Cancel {
&.buttonCancel {
color: #8f8f8f;
}
}
`;
export default function OidcLoginButton({ issuers }) {
interface IProps {
issuers?: OIDCConfig[];
}
const OidcLoginButton: FC<IProps> = ({ issuers }) => {
const [modal, setModal] = useState(false);
if (!issuers) return null;
return (
@@ -41,7 +44,7 @@ export default function OidcLoginButton({ issuers }) {
</StyledSocialButton>
{modal && (
<Modal id="modal-modal">
<StyledOicdLoginModal title="Login with OIDC">
<StyledOidcLoginModal title="Login with OIDC">
{issuers
.filter((issuer) => issuer.enable)
.map((issuer, index) => (
@@ -55,9 +58,10 @@ export default function OidcLoginButton({ issuers }) {
>
Close
</StyledButton>
</StyledOicdLoginModal>
</StyledOidcLoginModal>
</Modal>
)}
</>
);
}
};
export default OidcLoginButton;
src/routes/login/OidcLoginEntry.tsx
+7 -9
View File
@@ -1,27 +1,24 @@
/* eslint-disable no-undef */
import { useEffect } from "react";
import { useEffect, FC } from "react";
import { useGetOpenidMutation } from "../../app/services/auth";
import { OIDCConfig } from "../../types/auth";
import { StyledSocialButton } from "./styled";
export default function OidcLoginEntry({ issuer }) {
const OidcLoginEntry: FC<{ issuer: OIDCConfig }> = ({ issuer }) => {
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
const handleSolidLogin = () => {
getOpenId({
// issuer: "solidweb.org",
issuer,
issuer: issuer.domain,
redirect_uri: `${location.origin}/#/login`
});
};
useEffect(() => {
if (isSuccess) {
console.log("wtf", data);
if (isSuccess && data) {
const { url } = data;
location.href = url;
}
}, [data, isSuccess]);
console.log(issuer);
return (
<StyledSocialButton disabled={isLoading} onClick={handleSolidLogin}>
@@ -29,4 +26,5 @@ export default function OidcLoginEntry({ issuer }) {
Login with {issuer.domain}
</StyledSocialButton>
);
}
};
export default OidcLoginEntry;
src/routes/login/index.tsx
+7 -7
View File
@@ -1,5 +1,5 @@
/* eslint-disable no-undef */
import { useState, useEffect } from "react";
import { useState, useEffect, FormEvent, ChangeEvent } from "react";
import toast from "react-hot-toast";
import BASE_URL from "../../app/config";
// import web3 from "web3";
@@ -16,6 +16,7 @@ import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
import GoogleLoginButton from "../../common/component/GoogleLoginButton";
import GithubLoginButton from "../../common/component/GithubLoginButton";
import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
export default function LoginPage() {
const { data: enableSMTP } = useGetSMTPStatusQuery();
@@ -53,7 +54,6 @@ export default function LoginPage() {
}
// magic link
if (magic_token && typeof exists !== "undefined") {
// console.log("tokken", token, exists);
const isLogin = exists == "true";
if (isLogin) {
// login
@@ -71,7 +71,7 @@ export default function LoginPage() {
useEffect(() => {
if (error) {
console.log("login err", error);
switch (error.status) {
switch ((error as FetchBaseQueryError).status) {
case 401:
toast.error("Username or Password incorrect");
break;
@@ -94,7 +94,7 @@ export default function LoginPage() {
}
}, [isSuccess]);
const handleLogin = (evt) => {
const handleLogin = (evt: FormEvent<HTMLFormElement>) => {
evt.preventDefault();
console.log("wtf", input);
login({
@@ -103,10 +103,10 @@ export default function LoginPage() {
});
};
const handleInput = (evt) => {
const { type } = evt.target.dataset;
const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
const { type } = evt.target.dataset as { type?: "email" | "password" };
const { value } = evt.target;
// console.log(type, value);
if (!type) return;
setInput((prev) => {
prev[type] = value;
return { ...prev };
src/routes/oauth/index.tsx
+4 -4
View File
@@ -8,10 +8,10 @@ import toast from "react-hot-toast";
import { setAuthData } from "../../app/slices/auth.data";
export default function OAuthPage() {
const [login, { data, isSuccess, isError, error: loginError }] = useLoginMutation();
const [login, { data, isSuccess, isError }] = useLoginMutation();
const { token } = useParams();
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [error, setError] = useState<string | null>(null);
const dispatch = useDispatch();
const navigateTo = useNavigate();
useEffect(() => {
@@ -28,9 +28,9 @@ export default function OAuthPage() {
}, [token]);
useEffect(() => {
if (isError) {
setError(loginError);
setError("Something Error");
}
}, [isError, loginError]);
}, [isError]);
useEffect(() => {
if (isSuccess && data) {
src/routes/setting/APIConfig.tsx
+1 -2
View File
@@ -20,7 +20,6 @@ const StyledConfirm = styled.div`
gap: 10px;
width: 250px;
.tip {
/* word-break: break-all; */
color: orange;
font-size: 12px;
line-height: 1.5;
@@ -100,7 +99,7 @@ export default function APIConfig() {
</Tippy>
<div className="tip">
Tip: The security key agreed between the server and the third-party app is used to encrypt
the communication data.{" "}
the communication data.
</div>
</Styled>
);
src/routes/setting/index.tsx
+2 -3
View File
@@ -4,7 +4,7 @@ import StyledSettingContainer from "../../common/component/StyledSettingContaine
import useNavs from "./navs";
import LogoutConfirmModal from "./LogoutConfirmModal";
let from: string | null = null;
let from: string = "";
export default function Setting() {
const [searchParams] = useSearchParams();
@@ -15,10 +15,9 @@ export default function Setting() {
const [logoutConfirm, setLogoutConfirm] = useState(false);
const navigateTo = useNavigate();
const close = () => {
// dispatch(toggleSetting());
// todo: check usage
navigateTo(from!);
from = null;
from = "";
};
const toggleLogoutConfirm = () => {
src/routes/settingChannel/index.tsx
+13 -13
View File
@@ -6,20 +6,20 @@ import DeleteConfirmModal from "./DeleteConfirmModal";
import useNavs from "./navs";
import { useAppSelector } from "../../app/store";
let from: string | null = null;
let from: string = "";
export default function ChannelSetting() {
const { cid } = useParams();
const { cid = 0 } = useParams();
const { loginUser, channel } = useAppSelector((store) => {
return {
loginUser: store.authData.user,
channel: store.channels.byId[cid]
channel: cid ? store.channels.byId[+cid] : undefined
};
});
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const navs = useNavs(cid);
const flatenNavs = navs
const navs = useNavs(+cid);
const flattenNavs = navs
.map(({ items }) => {
return items;
})
@@ -30,16 +30,16 @@ export default function ChannelSetting() {
const [leaveConfirm, setLeaveConfirm] = useState(false);
const close = () => {
navigate(from);
from = null;
from = "";
};
const toggleDeleteConfrim = () => {
const toggleDeleteConfirm = () => {
setDeleteConfirm((prev) => !prev);
};
const toggleLeaveConfrim = () => {
const toggleLeaveConfirm = () => {
setLeaveConfirm((prev) => !prev);
};
if (!cid) return null;
const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
const currNav = flattenNavs.find((n) => n.name == navKey) || flattenNavs[0];
const canDelete = loginUser.isAdmin || channel?.owner == loginUser.uid;
const canLeave = !channel?.is_public;
@@ -53,18 +53,18 @@ export default function ChannelSetting() {
dangers={[
canLeave && {
title: "Leave Channel",
handler: toggleLeaveConfrim
handler: toggleLeaveConfirm
},
canDelete && {
title: "Delete Channel",
handler: toggleDeleteConfrim
handler: toggleDeleteConfirm
}
]}
>
{currNav.component}
</StyledSettingContainer>
{deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={cid} />}
{leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfrim} id={cid} />}
{deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfirm} id={+cid} />}
{leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfirm} id={+cid} />}
</>
);
}
src/routes/users/index.tsx
+5 -4
View File
@@ -1,6 +1,6 @@
import { useEffect } from "react";
import { NavLink, useParams, useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { updateRememberedNavs } from "../../app/slices/ui";
import Search from "../../common/component/Search";
import User from "../../common/component/User";
@@ -8,13 +8,14 @@ import Profile from "../../common/component/Profile";
import StyledWrapper from "./styled";
import BlankPlaceholder from "../../common/component/BlankPlaceholder";
import { useAppSelector } from "../../app/store";
export default function UsersPage() {
const dispatch = useDispatch();
const { pathname } = useLocation();
const { user_id } = useParams();
const userIds = useSelector((store) => store.users.ids);
const userIds = useAppSelector((store) => store.users.ids);
useEffect(() => {
dispatch(updateRememberedNavs({ key: "user" }));
return () => {
@@ -30,7 +31,7 @@ export default function UsersPage() {
<Search />
<div className="list">
<nav className="nav">
{userIds.map((uid) => {
{userIds.map((uid: number) => {
return (
<NavLink key={uid} className="session" to={`/users/${uid}`}>
<User uid={uid} enableContextMenu={true} />
@@ -43,7 +44,7 @@ export default function UsersPage() {
</div>
{user_id ? (
<div className="right">
<Profile uid={user_id} />
<Profile uid={+user_id} />
</div>
) : (
<div className="right placeholder">