@ant-design/icons#BgColorsOutlined JavaScript Examples

ChatList = props => {
    const didMountRef = useRef(false)
    const [hasMoreChats, setHasMoreChats] = useState(true)
    const [editingProfile, setEditingProfile] = useState(false)
    const [logoSource, setLogoSource] = useState(chatLogo);
    const [theme, setTheme] = useState("dark");
    const { conn, chats, setChats, setActiveChat, activeChat } = useContext(ChatEngineContext)
    const chat = chats && chats[activeChat];

    const name = props.chatAppState.userName
    const secret = props.chatAppState.userSecret

    useEffect(() => {

        const themeValue = localStorage.getItem("theme");

        if (themeValue === "light") {
            document.querySelector(".app").classList.add("light");
            setLogoSource(chatLogoWhite)

        } else if (themeValue === "dark") {
            document.querySelector(".app").classList.remove("light");
            setLogoSource(chatLogo)

        } else {
            localStorage.setItem("theme", theme);
        }
    }, [theme]);

    function deleteActiveChat(chatID) {
        var myHeaders = new Headers();

        let otherPerson = chat.people.find(
            (person) => person.person.username !== name
        )
            ? chat.people.find((person) => person.person.username !== name)
            : chat.people.find((person) => person.person.username === name);

        myHeaders.append("Project-ID", process.env.REACT_APP_PROJECT_ID);
        myHeaders.append("User-Name", name);
        myHeaders.append("User-Secret", secret);

        var raw = `{"username": "${name}"}`;
        var raw2 = `{"username": "${otherPerson.person.username}"}`;

        var firstUser = {
            method: "DELETE",
            headers: myHeaders,
            body: raw,
            redirect: "follow",
        };
        var secondUser = {
            method: "DELETE",
            headers: myHeaders,
            body: raw2,
            redirect: "follow",
        };

        fetch(`https://api.chatengine.io/chats/${chatID}/people/`, firstUser)
            .then((response) => response.text())
            .then((result) => console.log(result))
            .catch((error) => console.log("error", error));

        fetch(`https://api.chatengine.io/chats/${chatID}/people/`, secondUser)
            .then((response) => response.text())
            .then((result) => console.log(result))
            .catch((error) => console.log("error", error));
    }
    function getDateTime(date, offset) {
        if (!date) return ''

        date = date.replace(' ', 'T')
        offset = offset ? offset : 0

        const year = date.substr(0, 4)
        const month = date.substr(5, 2)
        const day = date.substr(8, 2)
        const hour = date.substr(11, 2)
        const minute = date.substr(14, 2)
        const second = date.substr(17, 2)

        var d = new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}`)
        d.setHours(d.getHours() + offset)
        return d
    }

    function renderChats(chats) {
        return chats.map((chat, index) => {
            if (!chat) {
                return <div key={`chat_${index}`} />

            } else if (props.chatAppState.renderChatCard) {
                return <div key={`chat_${index}`}>{props.chatAppState.renderChatCard(chat, index)}</div>

            } else {
                return (""
                )
            }
        })
    }

    function sortChats(chats) {
        return chats.sort((a, b) => {
            const aDate = a.last_message && a.last_message.created ? getDateTime(a.last_message.created, props.chatAppState.offset) : getDateTime(a.created, props.chatAppState.offset)
            const bDate = b.last_message && b.last_message.created ? getDateTime(b.last_message.created, props.chatAppState.offset) : getDateTime(b.created, props.chatAppState.offset)
            return new Date(bDate) - new Date(aDate);
        })
    }

    function onGetChats(chatList) {
        const oldChats = chats !== null ? chats : {}
        const newChats = _.mapKeys({ ...chatList }, 'id')
        const allChats = { ...oldChats, ...newChats }
        setChats(allChats);
        (count && count > Object.keys(allChats).length) && setHasMoreChats(false);
    }

    useEffect(() => {
        if (!didMountRef.current && name && secret) {
            didMountRef.current = true

            getLatestChats(
                props.chatAppState,
                count,
                (chats) => {
                    onGetChats(chats)
                    const chatList = sortChats(chats)
                    chatList.length > 0 && setActiveChat(chatList[0].id)
                }
            )
        }
    })

    useEffect(() => {
        if (!activeChat) {
            activeConversation()
        }
    }, [chats, activeChat])

    const chatList = sortChats(
        chats ?
            Object.values(chats) :
            [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
    )
    function activeConversation() {
        if (chatList[0]) {
            setActiveChat(chatList[0].id)
        }
    }
    if (chats == null) return <div />;
    return (
        <div className="chat-left-wing">
            <div className="chat-bar">
                <div className="chat-bar-logo">
                    {(window.screen.availWidth > 700) ?
                        <img src={logoSource} alt="" /> :
                        <div className="mobile-toggler">
                            <CloseOutlined
                                onClick={() => {
                                    document.querySelector(".chat-container").children[0].children[1].children[0].style.display = "none";
                                    document.querySelector(".chat-container").children[0].children[1].children[1].style.display = "block";
                                }}
                            />
                        </div>
                    }
                </div>
                <div className="chat-bar-options">
                    <div className="chat-bar-option">
                        <UserOutlined
                            onClick={
                                () => {
                                    if (editingProfile && (window.screen.availWidth > 1150)) {
                                        setEditingProfile(!editingProfile)
                                        document.querySelector(".ce-chats-container").style.height = "530px"
                                    }
                                    else if (!editingProfile && (window.screen.availWidth > 1150)) {
                                        setEditingProfile(!editingProfile)
                                        document.querySelector(".ce-chats-container").style.height = "425px"
                                    }
                                    else if (editingProfile && (window.screen.availWidth <= 1150)) {
                                        setEditingProfile(!editingProfile)
                                        document.querySelector(".ce-chats-container").style.height = "calc(100vh - 76px)"
                                    } else {
                                        setEditingProfile(!editingProfile)
                                        document.querySelector(".ce-chats-container").style.height = "calc(100vh - 166px)"
                                    }

                                }
                            }
                        />
                    </div>
                    <div className="chat-bar-option">
                        <BgColorsOutlined onClick={() => {
                            const themeValue = localStorage.getItem("theme");
                            if (themeValue === "dark") {
                                setTheme("light")
                                localStorage.setItem("theme", "light");
                                document.querySelector(".app").classList.add("light");
                                setLogoSource(chatLogoWhite)
                            } else if (themeValue === "light") {
                                setTheme("dark")
                                localStorage.setItem("theme", "dark");
                                document.querySelector(".app").classList.remove("light");
                                setLogoSource(chatLogo)
                            }
                        }} />
                    </div>
                    <div className="chat-bar-option">
                    
                    <a href="https://github.com/matt765/react-chat-app" target="_blank"><GithubOutlined /></a>
                    </div>
                    <div className="chat-bar-option">
                        <DeleteOutlined onClick={() => {
                            if (name === "john%20doe") {
                                alert("Deleting conversations is disabled on sample account, sorry!");
                                return
                            }

                            if (window.confirm("Press OK if you want to delete active chat. Conversation with this person will be lost")) {
                                deleteActiveChat(activeChat)
                            }

                        }} />
                    </div>
                    <div className="chat-bar-option"> <LogoutOutlined onClick={() => {
                        if (window.confirm("Press OK if you want to logout")) {
                            fb.auth.signOut().then(console.log("logged out"))
                            document.querySelector(".app").classList.remove("light");
                        }
                    }} /></div>
                </div>
            </div>
            <div className="chat-left-wing-list">
                {editingProfile ?
                    <ChatProfile
                        chat={chat}
                        conn={conn}
                        name={props.chatAppState.userName}
                        secret={props.chatAppState.userSecret}
                    /> : ""}
                <div style={styles.chatListContainer} className='ce-chat-list'>
                    {
                        props.chatAppState.renderNewChatForm ?
                            props.chatAppState.renderNewChatForm(conn) :
                            <NewChatForm onClose={props.chatAppState.onClose ? () => props.chatAppState.onClose() : undefined} />
                    }
                    <div style={styles.chatsContainer} className='ce-chats-container'>
                        {renderChats(chatList)}
                        {
                            hasMoreChats && chatList.length > 0 &&
                            <div>

                                <div style={{ height: '8px' }} />
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}