From 6efbe51c368d923f40db9f8518c6be38cbecc6b0 Mon Sep 17 00:00:00 2001 From: WCY-dt <834421194@qq.com> Date: Wed, 1 May 2024 23:45:43 +0800 Subject: [PATCH] Refractor --- src/components/clusters.tsx | 8 +++-- src/components/content.tsx | 9 ++++-- src/components/footer.tsx | 5 ++-- src/components/header.tsx | 13 ++++---- src/components/linkCard.tsx | 8 +++-- src/popups/confirm.tsx | 13 ++++---- src/popups/login.tsx | 8 +++-- src/popups/notification.tsx | 5 ++-- src/popups/overlay.tsx | 22 ++++++++++++++ src/routers/router.tsx | 17 +++++++---- src/styles/{ => components}/clusters.css | 4 +-- src/styles/{ => components}/content.css | 0 src/styles/{ => components}/footer.css | 0 src/styles/{ => components}/header.css | 0 src/styles/{ => components}/linkCard.css | 0 src/styles/confirm.css | 0 src/styles/popups/confirm.css | 38 ++++++++++++++++++++++++ src/styles/{ => popups}/loading.css | 0 src/styles/{ => popups}/login.css | 0 src/styles/{ => popups}/notification.css | 0 src/styles/popups/overlay.css | 14 +++++++++ src/styles/{ => popups}/popup.css | 0 22 files changed, 129 insertions(+), 35 deletions(-) create mode 100644 src/popups/overlay.tsx rename src/styles/{ => components}/clusters.css (96%) rename src/styles/{ => components}/content.css (100%) rename src/styles/{ => components}/footer.css (100%) rename src/styles/{ => components}/header.css (100%) rename src/styles/{ => components}/linkCard.css (100%) delete mode 100644 src/styles/confirm.css create mode 100644 src/styles/popups/confirm.css rename src/styles/{ => popups}/loading.css (100%) rename src/styles/{ => popups}/login.css (100%) rename src/styles/{ => popups}/notification.css (100%) create mode 100644 src/styles/popups/overlay.css rename src/styles/{ => popups}/popup.css (100%) diff --git a/src/components/clusters.tsx b/src/components/clusters.tsx index 5eb2f7e..1685327 100644 --- a/src/components/clusters.tsx +++ b/src/components/clusters.tsx @@ -1,9 +1,11 @@ import React, { useEffect, useState } from 'react'; + import LinkCard from '../components/linkCard'; import ClearFilter from '../utils/clearFilter'; import { fetchAndFilterData } from '../services/dataFetcher'; -import '../styles/clusters.css'; -import '../styles/loading.css'; + +import '../styles/components/clusters.css'; +import '../styles/popups/loading.css'; interface ClustersProps { dataKey: string; @@ -57,4 +59,4 @@ function Clusters({ dataKey, searchTerm, setSearchTerm, isLogedIn, token, messag ); } -export default Clusters; \ No newline at end of file +export default Clusters; diff --git a/src/components/content.tsx b/src/components/content.tsx index bdb7bb0..fa76eab 100644 --- a/src/components/content.tsx +++ b/src/components/content.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { Route, Routes } from 'react-router-dom'; + import Cluster from '../components/clusters'; -import '../styles/content.css'; + +import '../styles/components/content.css'; interface ContentProps { routes: { [key: string]: string }; @@ -12,9 +14,10 @@ interface ContentProps { setToken: (value: string) => void; message: string | null; setMessage: (value: string | null) => void; + setShowOverlay: (value: boolean) => void; } -function Content({ routes, searchTerm, setSearchTerm, isLogedIn, token, setToken, message, setMessage }: ContentProps) { +function Content({ routes, searchTerm, setSearchTerm, isLogedIn, token, setToken, message, setMessage, setShowOverlay }: ContentProps) { return (
@@ -31,4 +34,4 @@ function Content({ routes, searchTerm, setSearchTerm, isLogedIn, token, setToken ); } -export default Content; \ No newline at end of file +export default Content; diff --git a/src/components/footer.tsx b/src/components/footer.tsx index c623f92..9530591 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import '../styles/footer.css'; + +import '../styles/components/footer.css'; function Footer() { return ( @@ -12,4 +13,4 @@ function Footer() { ) } -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/header.tsx b/src/components/header.tsx index 1989576..dc8902d 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,8 +1,10 @@ -import { Icon } from '@iconify/react'; import React, { useState, useEffect, useRef } from 'react'; +import { Icon } from '@iconify/react'; import { Link } from 'react-router-dom'; + import Login from '../popups/login'; -import '../styles/header.css'; + +import '../styles/components/header.css'; interface HeaderProps { routes: { [key: string]: string }; @@ -14,9 +16,10 @@ interface HeaderProps { setToken: (value: string) => void; message: string | null; setMessage: (value: string | null) => void; + setShowOverlay: (value: boolean) => void; } -function Header({ routes, searchTerm, setSearchTerm, isLogedIn, setIsLogedIn, token, setToken, message, setMessage }: HeaderProps) { +function Header({ routes, searchTerm, setSearchTerm, isLogedIn, setIsLogedIn, token, setToken, message, setMessage, setShowOverlay }: HeaderProps) { const inputRef = useRef(null); useEffect(() => { localStorage.removeItem('colorMap'); @@ -81,7 +84,7 @@ function Header({ routes, searchTerm, setSearchTerm, isLogedIn, setIsLogedIn, to )}
{ - if (isOpen) toggleMenu(); + if (isOpen) toggleMenu(); if (showLogin) toggleLogin(); }}>
{showLogin && } @@ -89,4 +92,4 @@ function Header({ routes, searchTerm, setSearchTerm, isLogedIn, setIsLogedIn, to ) } -export default Header; \ No newline at end of file +export default Header; diff --git a/src/components/linkCard.tsx b/src/components/linkCard.tsx index 4f9d74e..2e68125 100644 --- a/src/components/linkCard.tsx +++ b/src/components/linkCard.tsx @@ -1,10 +1,12 @@ import React, { useState } from 'react'; import { Icon } from '@iconify/react'; import { v4 as uuidv4 } from 'uuid'; + import { getRandomColor, getContrastColor } from '../utils/randomColor'; import Confirm from '../popups/confirm'; import deleteCardHandler from '../services/deleteCardHandler'; -import '../styles/linkCard.css'; + +import '../styles/components/linkCard.css'; interface LinkCardProps { item: ClusterProps; @@ -63,7 +65,7 @@ function LinkCard({ item, setSelectedCategory, isLogedIn, token, message, setMes }
-
{ message }
-
- - + @@ -25,4 +26,4 @@ function Confirm({ message, setShowConfirm, actionHandler }: ConfirmProps) { ); } -export default Confirm; \ No newline at end of file +export default Confirm; diff --git a/src/popups/login.tsx b/src/popups/login.tsx index 5d98766..9103790 100644 --- a/src/popups/login.tsx +++ b/src/popups/login.tsx @@ -1,8 +1,10 @@ import React from 'react'; import { Icon } from '@iconify/react'; + import loginHandler from '../services/loginHandler'; -import '../styles/popup.css'; -import '../styles/login.css'; + +import '../styles/popups/popup.css'; +import '../styles/popups/login.css'; interface LoginProps { setShowLogin: (value: boolean) => void; @@ -49,4 +51,4 @@ function Login({ setShowLogin, setIsLogedIn, token, setToken, message, setMessag ); } -export default Login; \ No newline at end of file +export default Login; diff --git a/src/popups/notification.tsx b/src/popups/notification.tsx index 574b7a3..416d63c 100644 --- a/src/popups/notification.tsx +++ b/src/popups/notification.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; -import '../styles/notification.css'; + +import '../styles/popups/notification.css'; interface NotificationProps { message: string | null; @@ -33,4 +34,4 @@ function Notification({ message, setMessage }: NotificationProps) { ); } -export default Notification; \ No newline at end of file +export default Notification; diff --git a/src/popups/overlay.tsx b/src/popups/overlay.tsx new file mode 100644 index 0000000..663661f --- /dev/null +++ b/src/popups/overlay.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +import "../styles/popups/overlay.css"; + +interface OverlayProps { + showOverlay: boolean; + setShowOverlay: (value: boolean) => void; +} + +function Overlay({ showOverlay, setShowOverlay }: OverlayProps) { + return ( + <> +
{ + if (showOverlay) { + setShowOverlay(false); + } + }}>
+ + ); +} + +export default Overlay; diff --git a/src/routers/router.tsx b/src/routers/router.tsx index 913c5b6..1c7b591 100644 --- a/src/routers/router.tsx +++ b/src/routers/router.tsx @@ -6,17 +6,21 @@ import Header from '../components/header'; import Content from '../components/content'; import Footer from '../components/footer'; import Notification from '../popups/notification'; +import Overlay from '../popups/overlay'; -import '../styles/loading.css'; +import '../styles/popups/loading.css'; function Router() { - const [searchTerm, setSearchTerm] = useState(''); const [isLoading, setIsLoading] = useState(true); const [isLogedIn, setIsLogedIn] = useState(false); + + const [routes, setRoutes] = useState({}); + const [token, setToken] = useState(''); const [message, setMessage] = useState(null); + const [showOverlay, setShowOverlay] = useState(false) - const [routes, setRoutes] = useState({}); + const [searchTerm, setSearchTerm] = useState(''); useEffect(() => { setIsLoading(true); @@ -40,15 +44,16 @@ function Router() { return ( <> -
+
- +