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

refactor: add typescript support to project

Browse Source
This commit is contained in:
HD
2022-06-21 15:08:35 +08:00
parent 88ec2b742a
commit bd799ebea8
259 changed files with 1042 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/resources/Filter/Channel.js → src/routes/resources/Filter/Channel.tsx
+4 -3
View File
@@ -1,16 +1,15 @@
// import React from 'react'
// import { useSelector } from "react-redux";
import styled from "styled-components";
import CheckSign from "../../../assets/icons/check.sign.svg";
import ChannelIcon from "../../../common/component/ChannelIcon";
import Search from "../Search";
import useFilteredChannels from "../../../common/hook/useFilteredChannels";
const Styled = styled.div`
padding: 0 4px 4px 4px;
background: #ffffff;
max-height: 400px;
overflow: auto;
box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
border-radius: 8px;
display: flex;
flex-direction: column;
@@ -52,11 +51,13 @@ const Styled = styled.div`
}
}
`;
export default function Channel({ select = "", updateFilter }) {
const { input, updateInput, channels } = useFilteredChannels();
const handleClick = (gid) => {
updateFilter({ channel: gid });
};
return (
<Styled>
<div className="search">
src/routes/resources/Filter/Date.js → src/routes/resources/Filter/Date.tsx
+3 -2
View File
@@ -1,5 +1,3 @@
// import React from 'react'
// import { useSelector } from "react-redux";
import styled from "styled-components";
import CheckSign from "../../../assets/icons/check.sign.svg";
@@ -39,6 +37,7 @@ const Styled = styled.div`
}
}
`;
export const Dates = {
today: {
title: "Today",
@@ -57,6 +56,7 @@ export const Dates = {
title: "Last 12 months"
}
};
export default function Date({ select = "", updateFilter }) {
// const { input, updateInput, contacts } = useFilteredUsers();
// const contacts=useSelector(store=>store.contacts);
@@ -66,6 +66,7 @@ export default function Date({ select = "", updateFilter }) {
const handleClick = (dur) => {
updateFilter({ date: dur });
};
return (
<Styled>
<ul className="list">
src/routes/resources/Filter/From.js → src/routes/resources/Filter/From.tsx
+4 -4
View File
@@ -1,17 +1,15 @@
// import React from 'react'
// import { useSelector } from "react-redux";
import styled from "styled-components";
import Search from "../Search";
import CheckSign from "../../../assets/icons/check.sign.svg";
import Contact from "../../../common/component/Contact";
import useFilteredUsers from "../../../common/hook/useFilteredUsers";
const Styled = styled.div`
padding: 0 4px 4px 4px;
background: #ffffff;
max-height: 300px;
overflow: auto;
box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
border-radius: 8px;
display: flex;
flex-direction: column;
@@ -49,6 +47,7 @@ const Styled = styled.div`
}
}
`;
export default function From({ select = "", updateFilter }) {
const { input, updateInput, contacts } = useFilteredUsers();
// const contacts=useSelector(store=>store.contacts);
@@ -58,6 +57,7 @@ export default function From({ select = "", updateFilter }) {
const handleClick = (uid) => {
updateFilter({ from: uid });
};
return (
<Styled>
<div className="search">
src/routes/resources/Filter/Type.js → src/routes/resources/Filter/Type.tsx
+1 -4
View File
@@ -1,5 +1,3 @@
// import React from 'react'
// import { useSelector } from "react-redux";
import styled from "styled-components";
import IconPdf from "../../../assets/icons/file.pdf.svg";
import IconAudio from "../../../assets/icons/file.audio.svg";
@@ -16,7 +14,7 @@ const Styled = styled.div`
min-width: 200px;
/* max-height: 230px; */
overflow: auto;
box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
border-radius: 8px;
display: flex;
flex-direction: column;
@@ -33,7 +31,6 @@ const Styled = styled.div`
display: flex;
align-items: center;
gap: 8px;
color: #616161;
font-weight: 600;
font-size: 14px;
line-height: 20px;
src/routes/resources/Filter/index.js → src/routes/resources/Filter/index.tsx
+8 -5
View File
@@ -1,13 +1,14 @@
import { useState } from "react";
import styled from "styled-components";
import Tippy from "@tippyjs/react";
import { useSelector } from "react-redux";
import Avatar from "../../../common/component/Avatar";
import FilterDate, { Dates } from "./Date";
import FilterFrom from "./From";
import FilterChannel from "./Channel";
import FilterType, { FileTypes } from "./Type";
import ArrowDown from "../../../assets/icons/arrow.down.svg";
import { useAppSelector } from "../../../app/store";
const Styled = styled.div`
/* padding: 20px 0; */
display: flex;
@@ -20,7 +21,7 @@ const Styled = styled.div`
gap: 8px;
border: 1px solid #d0d5dd;
box-sizing: border-box;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: var(--br);
padding: 7px 12px;
font-weight: 500;
@@ -49,24 +50,25 @@ export default function Filter({ filter, updateFilter }) {
from: false,
type: false
});
const toggleFilterVisible = (obj) => {
setFiltersVisible((prev) => {
return { ...prev, ...obj };
});
};
const handleUpdateFilter = (data) => {
updateFilter(data);
let _key = Object.keys(data)[0];
let tmp = {
[_key]: false
};
console.log("wtffff", tmp);
toggleFilterVisible(tmp);
};
const { contactMap, channelMap } = useSelector((store) => {
const { contactMap, channelMap } = useAppSelector((store) => {
return { contactMap: store.contacts.byId, channelMap: store.channels.byId };
});
console.log("maps", contactMap, filter);
const { from, channel, type, date } = filter;
const {
channel: channelVisible,
@@ -74,6 +76,7 @@ export default function Filter({ filter, updateFilter }) {
type: typeVisible,
from: fromVisible
} = filtersVisible;
return (
<Styled>
<Tippy
src/routes/resources/Search.js → src/routes/resources/Search.tsx
+4 -2
View File
@@ -1,10 +1,10 @@
// import React from "react";
import styled from "styled-components";
import iconSearch from "../../assets/icons/search.svg?url";
const Styled = styled.div`
width: 100%;
padding: 6px 16px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
&.embed {
padding: 6px 8px;
box-shadow: none;
@@ -23,12 +23,14 @@ const Styled = styled.div`
background-position: 8px center;
}
`;
export default function Search({ value = "", updateSearchValue = null, embed = false }) {
const handleChange = (evt) => {
if (updateSearchValue) {
updateSearchValue(evt.target.value);
}
};
return (
<Styled className={embed ? "embed" : ""}>
<input value={value} onChange={handleChange} className="search" placeholder="Search..." />
src/routes/resources/View.js → src/routes/resources/View.tsx
+6 -4
View File
@@ -1,14 +1,15 @@
// import React from 'react'
import { MouseEvent } from "react";
import styled from "styled-components";
import { useDispatch } from "react-redux";
import { updateFileListView } from "../../app/slices/ui";
import { Views } from "../../app/config";
import IconList from "../../assets/icons/file.list.svg";
import IconGrid from "../../assets/icons/file.grid.svg";
const Styled = styled.ul`
display: flex;
border: 1px solid #d0d5dd;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
box-sizing: border-box;
@@ -23,7 +24,7 @@ const Styled = styled.ul`
&.item .item,
&.grid .grid {
border: 1px solid #52edff;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
svg {
transition: all 0.2s ease;
@@ -36,11 +37,12 @@ const Styled = styled.ul`
export default function View({ view = Views.item }) {
const dispatch = useDispatch();
const handleChangeView = (evt) => {
const handleChangeView = (evt: MouseEvent<HTMLLIElement>) => {
const { view: clickView } = evt.currentTarget.dataset;
if (clickView == view) return;
dispatch(updateFileListView(view == Views.item ? Views.grid : Views.item));
};
return (
<Styled className={view}>
<li className="view item" data-view={Views.item} onClick={handleChangeView}>
src/routes/resources/index.js → src/routes/resources/index.tsx
+9 -6
View File
@@ -1,15 +1,14 @@
import { useState, useEffect, useRef, memo } from "react";
import Styled from "./styled";
import { useSelector } from "react-redux";
import Masonry from "masonry-layout";
// import waterfall from "waterfall.js/src/waterfall";
import Styled from "./styled";
import { Views } from "../../app/config";
import View from "./View";
import Search from "./Search";
import Filter from "./Filter";
import FileBox from "../../common/component/FileBox";
import { useAppSelector } from "../../app/store";
const checkFilter = (data, filter, channelMessage) => {
console.log("filter data", data);
let selected = true;
const { mid, file_type, created_at, from_uid, properties } = data;
const {
@@ -35,11 +34,12 @@ const checkFilter = (data, filter, channelMessage) => {
}
return selected;
};
let msnry = null;
function ResourceManagement({ fileMessages }) {
const listContainerRef = useRef(null);
const [filter, setFilter] = useState({});
const { message, view, channelMessage } = useSelector((store) => {
const { message, view, channelMessage } = useAppSelector((store) => {
return {
message: store.message,
channelMessage: store.channelMessage,
@@ -52,11 +52,13 @@ function ResourceManagement({ fileMessages }) {
return { ...prev, ...data };
});
};
const handleUpdateSearch = (val) => {
setFilter((prev) => {
return { ...prev, name: val };
});
};
useEffect(() => {
if (view == Views.grid && listContainerRef) {
const container = listContainerRef.current;
@@ -84,7 +86,6 @@ function ResourceManagement({ fileMessages }) {
// }
}, [view, filter]);
console.log("files", fileMessages);
return (
<Styled>
<Search value={filter.name} updateSearchValue={handleUpdateSearch} />
@@ -119,7 +120,9 @@ function ResourceManagement({ fileMessages }) {
</Styled>
);
}
const equals = (a, b) => a.length === b.length && a.every((v, i) => v == b[i]);
export default memo(ResourceManagement, (prevs, nexts) => {
return equals(prevs.fileMessages, nexts.fileMessages);
});
src/routes/resources/styled.js → src/routes/resources/styled.tsx
+1
View File
@@ -1,4 +1,5 @@
import styled from "styled-components";
const Styled = styled.div`
height: 100vh;
overflow-y: scroll;