.env

@@ -1 +0,0 @@
-VITE_API_URL=

.gitignore

@@ -1,9 +0,0 @@
-.DS_Store
-.idea
-/node_modules/
-*.tsbuildinfo
-
-# React Router
-/.react-router/
-/build/
-package-lock.json

app/api.ts

@@ -1,44 +0,0 @@
-import axios, {type AxiosResponse} from "axios";
-import {ResponseError} from "~/classes/responseError";
-import {BlacklistItem} from "~/classes/blacklistItem";
-
-const apiUrl = import.meta.env.VITE_API_URL;
-const instance = axios.create({
-    baseURL: apiUrl
-});
-
-const getReportData = (data: AxiosResponse<any, any, {}>): BlacklistItem[] => {
-    let result = data.data;
-    let blacklistItems: BlacklistItem[] = [];
-    for (const [key, value] of Object.entries(result)) {
-        let blacklistItem: BlacklistItem = new BlacklistItem(
-            value.link,
-            value.nicknames,
-            value.comments,
-            value.afk,
-            value.cheater,
-            value.griefer,
-            value.toxic,
-            value.useless,
-        );
-        blacklistItems.push(blacklistItem);
-    }
-    return blacklistItems;
-}
-
-export async function getAll(searchText?: string): Promise<BlacklistItem[] | ResponseError | undefined> {
-    let result: BlacklistItem[] | ResponseError | undefined;
-    let route: string;
-    if (searchText !== ''){
-        route = '/blacklist/search?text=' + searchText;
-    } else {
-        route = '/blacklist/all';
-    }
-    result = await instance.get(route).then((data: AxiosResponse<any, any, {}>) => {
-        return getReportData(data);
-    }).catch(err => {
-        console.log(err);
-        return new ResponseError(err.code, err.message, err.status);
-    });
-    return result;
-}

app/assets/mui/themes/home.ts

@@ -1,74 +0,0 @@
-import type {Theme} from "@mui/material";
-import {createTheme} from "@mui/material";
-import {outlinedInputClasses} from "@mui/material";
-
-const customTheme = (outerTheme: Theme) =>
-    createTheme({
-        palette: {
-            mode: outerTheme.palette.mode,
-        },
-        components: {
-            MuiTextField: {
-                styleOverrides: {
-                    root: {
-                        '--TextField-brandBorderColor': '#E0E3E7',
-                        '--TextField-brandBorderHoverColor': '#B2BAC2',
-                        '--TextField-brandBorderFocusedColor': '#6F7E8C',
-                        '& label': {
-                            color: 'var(--TextField-brandBorderColor)',
-                        },
-                        '& label.Mui-focused': {
-                            color: 'var(--TextField-brandBorderColor)',
-                        },
-                        '& input': {
-                            color: 'var(--TextField-brandBorderColor)',
-                            borderColor: 'var(--TextField-brandBorderColor)',
-                        },
-                    },
-                },
-            },
-            MuiOutlinedInput: {
-                styleOverrides: {
-                    notchedOutline: {
-                        borderColor: 'var(--TextField-brandBorderColor)',
-                    },
-                    root: {
-                        [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-                            borderColor: 'var(--TextField-brandBorderHoverColor)',
-                        },
-                        [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
-                            borderColor: 'var(--TextField-brandBorderFocusedColor)',
-                        },
-                    },
-                },
-            },
-            MuiDivider: {
-                styleOverrides: {
-                    root: {
-                        '--TextField-brandBorderColor': '#E0E3E7',
-                        borderColor: 'var(--TextField-brandBorderColor)',
-                        borderWidth: 1,
-                        width: '95%',
-                    }
-                }
-            },
-            MuiButton: {
-                styleOverrides: {
-                    root: {
-                        '--TextField-brandBorderColor': '#E0E3E7',
-                        '--variant-outlinedBorder': '#b5b5b5',
-                        '--variant-containedBg': '#b5b5b5',
-                        '--variant-custom-textBg': 'rgba(246,246,248,0.06)',
-                        color: 'var(--TextField-brandBorderColor)',
-                        '&:hover': {
-                            backgroundColor: 'var(--variant-custom-textBg)',
-                            borderColor: 'var(--variant-custom-textBg)',
-                            boxShadow: 'none',
-                        },
-                    }
-                }
-            }
-        }
-    });
-
-export default customTheme;

app/assets/styles/home.css

@@ -18,18 +18,4 @@
 .bg-dark {
     background-color: #282c34;
     height: 100%;
-}
-
-.list-container {
-    justify-items: center;
-}
-
-.item-list {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.loader {
-    text-align: center;
 }

app/classes/blacklistItem.ts

@@ -1,21 +0,0 @@
-export class BlacklistItem {
-    link: string;
-    nicknames: string[];
-    comments: string[];
-    afk: boolean;
-    cheater: boolean;
-    griefer: boolean;
-    toxic: boolean;
-    useless: boolean;
-
-    constructor(link: string, nicknames: string[], comments: string[], afk: boolean, cheater: boolean, griefer: boolean, toxic: boolean, useless: boolean) {
-        this.link = link;
-        this.nicknames = nicknames;
-        this.comments = comments;
-        this.afk = afk;
-        this.cheater = cheater;
-        this.griefer = griefer;
-        this.toxic = toxic;
-        this.useless = useless;
-    }
-}

app/classes/responseError.ts

@@ -1,11 +0,0 @@
-export class ResponseError {
-    code: string;
-    status: number;
-    message: string;
-
-    constructor(code: string, message: string, status: number) {
-        this.code = code;
-        this.status = status;
-        this.message = message;
-    };
-}

app/components/itemList.tsx

@@ -1,22 +0,0 @@
-import {BlacklistItem} from "~/classes/blacklistItem";
-import {Button, CircularProgress} from "@mui/material";
-
-export default function ItemList({ isFetching, blacklistItems }: { isFetching: boolean, blacklistItems: BlacklistItem[] }) {
-    if (isFetching){
-        return(
-            <div className="loader">
-                <CircularProgress aria-label="Loading…" />
-            </div>
-        )
-    } else {
-        return (
-            <div className="list-container">
-                <div className="item-list">
-                    {blacklistItems.map((item) => {
-                        return <Button variant="text">{item.link}</Button>
-                    })}
-                </div>
-            </div>
-        )
-    }
-}

app/routes/home.tsx

@@ -1,42 +1,71 @@
-import {useEffect, useState} from "react";
+import {useState} from "react";
 import '../assets/styles/home.css';
 import {
+    createTheme,
     Divider,
+    outlinedInputClasses,
     TextField,
+    type Theme,
     ThemeProvider,
     useTheme
 } from "@mui/material";
-import {getAll} from '~/api';
-import customTheme from "~/assets/mui/themes/home";
-import {BlacklistItem} from "~/classes/blacklistItem";
-import {ResponseError} from "~/classes/responseError";
-import ItemList from "~/components/itemList";
 
 export default function Home() {
-    const outerTheme = useTheme();
-
     const [searchText, setSearchText] = useState('');
-    const [isFetchingList, setIsFetchingList] = useState(false);
-    const [blacklistItems, setBlacklistItems] = useState<BlacklistItem[]>([]);
 
-    useEffect(() => {
+    const customTheme = (outerTheme: Theme) =>
-        let isIgnore = false;
+        createTheme({
-        setIsFetchingList(true);
+            palette: {
-        getAll(searchText).then((res: BlacklistItem[] | ResponseError | undefined)=> {
+                mode: outerTheme.palette.mode,
-            if (!isIgnore) {
+            },
-                if (res instanceof Array){
+            components: {
-                    setBlacklistItems(res);
+                MuiTextField: {
-                } else if (res instanceof ResponseError) {
+                    styleOverrides: {
-                    // TODO error handler
+                        root: {
-                    console.log(res);
+                            '--TextField-brandBorderColor': '#E0E3E7',
+                            '--TextField-brandBorderHoverColor': '#B2BAC2',
+                            '--TextField-brandBorderFocusedColor': '#6F7E8C',
+                            '& label': {
+                                color: 'var(--TextField-brandBorderColor)',
+                            },
+                            '& label.Mui-focused': {
+                                color: 'var(--TextField-brandBorderColor)',
+                            },
+                            '& input': {
+                                color: 'var(--TextField-brandBorderColor)',
+                                borderColor: 'var(--TextField-brandBorderColor)',
+                            },
+                        },
+                    },
+                },
+                MuiOutlinedInput: {
+                    styleOverrides: {
+                        notchedOutline: {
+                            borderColor: 'var(--TextField-brandBorderColor)',
+                        },
+                        root: {
+                            [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+                                borderColor: 'var(--TextField-brandBorderHoverColor)',
+                            },
+                            [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
+                                borderColor: 'var(--TextField-brandBorderFocusedColor)',
+                            },
+                        },
+                    },
+                },
+                MuiDivider: {
+                    styleOverrides: {
+                        root: {
+                            '--TextField-brandBorderColor': '#E0E3E7',
+                            borderColor: 'var(--TextField-brandBorderColor)',
+                            borderWidth: 1,
+                            width: '95%',
+                        }
+                    }
                 }
-                setIsFetchingList(false);
             }
         });
-        return () => {
+    const outerTheme = useTheme();
-            isIgnore = true; // При следующем изменении someValue старый запрос будет проигнорирован
-        };
-    }, [searchText]);
 
     function handleSearch(text: string) {
         setSearchText(text);
@@ -58,14 +87,9 @@ export default function Home() {
                 <div style={{justifyItems: 'center'}}>
                     <Divider sx={{marginTop: '10px', marginBottom: '10px'}}/>
                 </div>
-                <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems}></ItemList>
+                <div className="list-container">
-                {/*<div className="list-container">*/}
+                    <p>{searchText} //</p>
-                {/*    <div className="item-list">*/}
+                </div>
-                {/*        {blacklistItems.map((item, i) => {*/}
-                {/*            return <Button variant="text">{item.link}</Button>*/}
-                {/*        })}*/}
-                {/*    </div>*/}
-                {/*</div>*/}
             </div>
         </ThemeProvider>
     );

package.json

@@ -14,7 +14,6 @@
     "@mui/material": "^7.3.7",
     "@react-router/express": "7.10.1",
     "@react-router/node": "7.10.1",
-    "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "compression": "^1.8.1",