From f75c5d9264d71298711321d83a9c6b23327b3f56 Mon Sep 17 00:00:00 2001 From: realtradam Date: Sat, 27 Jul 2024 16:44:01 -0400 Subject: fix linting --- frontend/.eslintrc.cjs | 18 +- frontend/.vite/deps/_metadata.json | 2 +- frontend/README.md | 8 +- frontend/index.html | 2 +- frontend/postcss.config.js | 2 +- frontend/src/App.tsx | 4 +- frontend/src/components/Layout.tsx | 471 +++++++++++++++++--------------- frontend/src/main.tsx | 12 +- frontend/src/pages/Home.tsx | 368 +++++++++++++------------ frontend/src/pages/articles/Article.tsx | 46 ++-- frontend/src/pages/articles/New.tsx | 161 ++++++----- frontend/src/pages/auth/Login.tsx | 181 ++++++------ frontend/src/pages/auth/Register.tsx | 161 ++++++----- frontend/src/routes/index.tsx | 55 ++-- frontend/tailwind.config.js | 8 +- frontend/vite.config.ts | 6 +- 16 files changed, 794 insertions(+), 711 deletions(-) diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index d6c9537..6e8698b 100644 --- a/frontend/.eslintrc.cjs +++ b/frontend/.eslintrc.cjs @@ -2,17 +2,17 @@ module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react-hooks/recommended", ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], + ignorePatterns: ["dist", ".eslintrc.cjs"], + parser: "@typescript-eslint/parser", + plugins: ["react-refresh"], rules: { - 'react-refresh/only-export-components': [ - 'warn', + "react-refresh/only-export-components": [ + "warn", { allowConstantExport: true }, ], }, -} +}; diff --git a/frontend/.vite/deps/_metadata.json b/frontend/.vite/deps/_metadata.json index 905310f..9304faf 100644 --- a/frontend/.vite/deps/_metadata.json +++ b/frontend/.vite/deps/_metadata.json @@ -5,4 +5,4 @@ "browserHash": "f33efd09", "optimized": {}, "chunks": {} -} \ No newline at end of file +} diff --git a/frontend/README.md b/frontend/README.md index e1cdc89..85a6989 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -17,12 +17,12 @@ If you are developing a production application, we recommend updating the config export default { // other rules... parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'], + ecmaVersion: "latest", + sourceType: "module", + project: ["./tsconfig.json", "./tsconfig.node.json", "./tsconfig.app.json"], tsconfigRootDir: __dirname, }, -} +}; ``` - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` diff --git a/frontend/index.html b/frontend/index.html index 82a3d13..821eeac 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -10,4 +10,4 @@
- + diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index 2e7af2b..2aa7205 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -3,4 +3,4 @@ export default { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 92de410..e66807e 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,5 @@ -import Routes from "./routes" +import Routes from "./routes"; export default function App() { - return (); + return ; } diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 2ebaa79..d8613d5 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,246 +1,269 @@ import { Outlet, useNavigate } from "react-router-dom"; -import { useState, useEffect, FormEvent } from "react"; +import { useEffect, FormEvent } from "react"; type user = { - set: React.Dispatch>; - value: string | null; + set: React.Dispatch>; + value: string | null; }; type articleSearch = user; export default function Layout({ - user, - articleSearch, + user, + articleSearch, }: { - user: user; - articleSearch: articleSearch; + user: user; + articleSearch: articleSearch; }) { - const navigate = useNavigate(); + const navigate = useNavigate(); - useEffect(() => { - const url = `${import.meta.env.VITE_API_TITLE}/api/v1/profile`; - fetch(url, { - credentials: "include", - method: "get", - }) - .then((response) => { - if (response.ok) { - return response.json(); - } - throw new Error("Network response was not ok."); - }) - .then((response) => { - user.set(response.username); - console.log(response.username); - }); - }, [user]); + useEffect(() => { + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/profile`; + fetch(url, { + credentials: "include", + method: "get", + }) + .then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }) + .then((response) => { + user.set(response.username); + console.log(response.username); + }); + }, [user]); - const logout = () => { - fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/logout`, { - credentials: "include", - method: "get", - }).then(() => { - user.set(null); - }); - }; + const logout = () => { + fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/logout`, { + credentials: "include", + method: "get", + }).then(() => { + user.set(null); + }); + }; - const search = (e: FormEvent) => { - e.preventDefault(); + const search = (e: FormEvent) => { + e.preventDefault(); - const target = e.target as typeof e.target & { - search: { value: string }; - }; + const target = e.target as typeof e.target & { + search: { value: string }; + }; - articleSearch.set(target.search.value); + articleSearch.set(target.search.value); - navigate("/"); - }; + navigate("/"); + }; - return ( - <> -
- + return ( + <> +
+ - {/*slide in nav*/} - + {/*slide in nav*/} + - {/*Header*/} -
-
- {/*Title*/} -

- ☕ Spring! -

-

Welcome to my Blog

-
-
+ {/*Header*/} +
+
+ {/*Title*/} +

+ ☕ Spring! +

+

+ Welcome to my Blog +

+
+
- + -
-
-
-
- - - -
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
-
-
-
+
+
+
+
+ + + +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
- - - -
- - ); + + + +
+ + ); } diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 3d7150d..f25366e 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,10 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.tsx"; +import "./index.css"; -ReactDOM.createRoot(document.getElementById('root')!).render( +ReactDOM.createRoot(document.getElementById("root")!).render( , -) +); diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 682f794..e0866a4 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,194 +1,210 @@ import { useState, useEffect } from "react"; type article = { - id: number; - title: string; - photoUrl: string; - content: string; - createdOn: string; - updateOn: string; + id: number; + title: string; + photoUrl: string; + content: string; + createdOn: string; + updateOn: string; }; +// if null then code will know to not search and just return all articles type articleSearch = { - set: React.Dispatch>; - value: string | null; + set: React.Dispatch>; + value: string | null; }; export default function Home({ - articleSearch, + articleSearch, }: { - articleSearch: articleSearch; + articleSearch: articleSearch; }) { - const [articles, setArticles] = useState([]); - const [allArticles, setAllArticles] = useState(null); + const [articles, setArticles] = useState([]); + const [allArticles, setAllArticles] = useState([]); - // pull data when new search is given - useEffect(() => { - let url; - if (articleSearch.value === null) { - //alert("not searched"); - url = `${import.meta.env.VITE_API_TITLE}/api/v1/articles`; - } else { - //alert("searched"); - url = `${import.meta.env.VITE_API_TITLE}/api/v1/articles?search=${ - articleSearch.value - }`; - } - fetch(url) - .then((response) => { - if (response.ok) { - return response.json(); - } - throw new Error("Network response was not ok."); - }) - .then((response) => setArticles(response)); - }, [articleSearch.value]); + // pull data when new search is given + useEffect(() => { + let url; + if (articleSearch.value === null) { + //alert("not searched"); + url = `${import.meta.env.VITE_API_TITLE}/api/v1/articles`; + } else { + //alert("searched"); + url = `${import.meta.env.VITE_API_TITLE}/api/v1/articles?search=${ + articleSearch.value + }`; + } + fetch(url) + .then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }) + .then((response) => setArticles(response)); + }, [articleSearch.value]); - // when new data is pulled update the articles shown - useEffect(() => { - setAllArticles( - articles.map((article) => ( -
-
- {/*th:href="@{/articles/{articleId}(articleId=${article.id})}"*/} - - -
- {article.title} -
-

- - {/*th:if="${user.id} == ${article.createdBy.id}"*/} -
- {/*th:href="@{/articles/edit/{articleId}(articleId=${article.id})}"*/} - - Edit - - {/*th:href="@{/articles/delete/{articleId}(articleId=${article.id})}"*/} - - Delete - -
-
-
-

-
-
-
- )), - ); - }, [articles]); + // when new data is pulled update the articles shown + useEffect(() => { + setAllArticles( + articles.map((article) => ( +
+
+ {/*th:href="@{/articles/{articleId}(articleId=${article.id})}"*/} + + +
+ {article.title} +
+

+ + {/*th:if="${user.id} == ${article.createdBy.id}"*/} +
+ {/*th:href="@{/articles/edit/{articleId}(articleId=${article.id})}"*/} + + Edit + + {/*th:href="@{/articles/delete/{articleId}(articleId=${article.id})}"*/} + + Delete + +
+
+
+

+
+
+
+ )), + ); + }, [articles]); - return ( - <> - {/*Container*/} -
- +
+ {allArticles} +
+
+ + + + ); } diff --git a/frontend/src/pages/articles/Article.tsx b/frontend/src/pages/articles/Article.tsx index b367811..1a96ada 100644 --- a/frontend/src/pages/articles/Article.tsx +++ b/frontend/src/pages/articles/Article.tsx @@ -1,25 +1,35 @@ import { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; -export default function Article () { - const { id } = useParams(); - const [articleData, setArticleData] = useState(); +type article = { + id: number; + title: string; + photoUrl: string; + content: string; + createdOn: string; + updateOn: string; +}; - useEffect(() => { - const url = `${import.meta.env.VITE_API_TITLE}/api/v1/article/${id}`; - fetch(url).then((response) => { - if (response.ok) { - return response.json(); - } - throw new Error("Network response was not ok."); - }).then((response) => setArticleData(response)); //.catch(() => navigate("/")); - }, [id]); +export default function Article() { + const { id } = useParams(); + const [articleData, setArticleData] = useState
(); - return( - <> -

{articleData?.title}

-
{articleData?.content}
- - ); + useEffect(() => { + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/article/${id}`; + fetch(url) + .then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }) + .then((response) => setArticleData(response)); //.catch(() => navigate("/")); + }, [id]); + return ( + <> +

{articleData?.title}

+
{articleData?.content}
+ + ); } diff --git a/frontend/src/pages/articles/New.tsx b/frontend/src/pages/articles/New.tsx index 3402f22..f98c19a 100644 --- a/frontend/src/pages/articles/New.tsx +++ b/frontend/src/pages/articles/New.tsx @@ -1,83 +1,100 @@ import { FormEvent } from "react"; import { useNavigate } from "react-router-dom"; -export default function NewArticle () { - const navigate = useNavigate(); +export default function NewArticle() { + const navigate = useNavigate(); - const handleSubmit = async (e: FormEvent) => { - e.preventDefault(); //stops submit from happening + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); //stops submit from happening - const target = e.target as typeof e.target & { - title: { value: string }; - photoUrl: { value: string }; - content: { value: string }; - }; + const target = e.target as typeof e.target & { + title: { value: string }; + photoUrl: { value: string }; + content: { value: string }; + }; - const formData = new FormData(); - formData.append('title', target.title.value); - formData.append('photoUrl', target.photoUrl.value); - formData.append('content', target.content.value); + const formData = new FormData(); + formData.append("title", target.title.value); + formData.append("photoUrl", target.photoUrl.value); + formData.append("content", target.content.value); - const response = await fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/article/new`, { - credentials: 'include', - method: 'post', - body: formData, - }); - if(response.ok) { - navigate("/"); - } - else { - console.log(response); - alert("check console for error"); - } - }; - return( - <> -
-
-
-
- + +

+ Please fill out this field. +

+
+
+
+ + +
+ + ); } diff --git a/frontend/src/pages/auth/Login.tsx b/frontend/src/pages/auth/Login.tsx index d064acf..33529a8 100644 --- a/frontend/src/pages/auth/Login.tsx +++ b/frontend/src/pages/auth/Login.tsx @@ -3,102 +3,103 @@ import { useNavigate } from "react-router-dom"; //type setUser = { setUser: { func: React.Dispatch> } }; type user = { - set: React.Dispatch>; - value: string | null; + set: React.Dispatch>; + value: string | null; }; export default function Login({ user }: { user: user }) { - const navigate = useNavigate(); + const navigate = useNavigate(); - const handleSubmit = async (e: FormEvent) => { - e.preventDefault(); //stops submit from happening + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); //stops submit from happening - const target = e.target as typeof e.target & { - username: { value: string }; - email: { value: string }; - password: { value: string }; - }; + const target = e.target as typeof e.target & { + username: { value: string }; + email: { value: string }; + password: { value: string }; + }; - const formData = new FormData(); - formData.append("username", target.username.value); - formData.append("password", target.password.value); + const formData = new FormData(); + formData.append("username", target.username.value); + formData.append("password", target.password.value); - const response = await fetch( - `${import.meta.env.VITE_API_TITLE}/api/v1/login`, - { - credentials: "include", - method: "post", - body: formData, - }, - ).then((res) => { - if (res.ok) { - const url = `${import.meta.env.VITE_API_TITLE}/api/v1/profile`; - fetch(url, { - credentials: "include", - method: "get", - }) - .then((response) => { - if (response.ok) { - return response.json(); - } - throw new Error("Network response was not ok."); - }) - .then((response) => { - user.set(response.username); - console.log("USER:"); - console.log(user); - console.log(user.value); - console.log(response.username); - navigate("/"); - }); - } else { - console.log(response); - alert("check console for error"); - } - }); - }; + const response = await fetch( + `${import.meta.env.VITE_API_TITLE}/api/v1/login`, + { + credentials: "include", + method: "post", + body: formData, + }, + ).then((res) => { + if (res.ok) { + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/profile`; + fetch(url, { + credentials: "include", + method: "get", + }) + .then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }) + .then((response) => { + user.set(response.username); + console.log("USER:"); + console.log(user); + console.log(user.value); + console.log(response.username); + navigate("/"); + }); + } else { + console.log(response); + alert("check console for error"); + } + }); + }; - return ( - <> -
-
-
-
- - -
-
-
-
- - -
-
-
- -
-
- - ); + return ( + <> +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+ + ); } diff --git a/frontend/src/pages/auth/Register.tsx b/frontend/src/pages/auth/Register.tsx index 14ceea4..cf1972a 100644 --- a/frontend/src/pages/auth/Register.tsx +++ b/frontend/src/pages/auth/Register.tsx @@ -1,86 +1,103 @@ import { FormEvent } from "react"; -import { useNavigate } from 'react-router-dom'; +import { useNavigate } from "react-router-dom"; -export default function Register () { - const navigate = useNavigate(); +export default function Register() { + const navigate = useNavigate(); -const handleSubmit = async (e: FormEvent) => { - e.preventDefault(); //stops submit from happening + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); //stops submit from happening - const target = e.target as typeof e.target & { - username: { value: string }; - email: { value: string }; - password: { value: string }; - }; + const target = e.target as typeof e.target & { + username: { value: string }; + email: { value: string }; + password: { value: string }; + }; - const formData = new FormData(); - formData.append('username', target.username.value); - formData.append('email', target.email.value); - formData.append('password', target.password.value); + const formData = new FormData(); + formData.append("username", target.username.value); + formData.append("email", target.email.value); + formData.append("password", target.password.value); - const response = await fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/register`, { - credentials: 'include', - method: 'post', - body: formData, - }); - if(response.ok) { - navigate("/login"); - } - else { - alert("error"); - } - }; + const response = await fetch( + `${import.meta.env.VITE_API_TITLE}/api/v1/register`, + { + credentials: "include", + method: "post", + body: formData, + }, + ); + if (response.ok) { + navigate("/login"); + } else { + alert("error"); + } + }; - return( - <> -
-
Username or Email already exists
-
-
+ return ( + <> +
+
+ Username or Email already exists +
+ +
- - -

Please fill out this field.

+ + +

+ Please fill out this field. +

- - -

Please fill out this field.

+ + +

+ Please fill out this field. +

-
-
+
+
- - -

Please fill out this field.

+ + +

+ Please fill out this field. +

-
-
-
- - - -
- - ); - +
+
+ + +
+ + ); } diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index b46315b..cee3529 100644 --- a/frontend/src/routes/index.tsx +++ b/frontend/src/routes/index.tsx @@ -8,36 +8,39 @@ import Register from "../pages/auth/Register"; import Login from "../pages/auth/Login"; type user = { - set: React.Dispatch>; - value: string | null; + set: React.Dispatch>; + value: string | null; }; type articleSearch = user; export default function Index() { - const [user, setUser] = useState(null); - const [articleSearch, setArticleSearch] = useState(null); + const [user, setUser] = useState(null); + const [articleSearch, setArticleSearch] = useState(null); - const userProp: user = { set: setUser, value: user }; - const articleSearchProp: articleSearch = { - set: setArticleSearch, - value: articleSearch, - }; + const userProp: user = { set: setUser, value: user }; + const articleSearchProp: articleSearch = { + set: setArticleSearch, + value: articleSearch, + }; - return ( - <> - - - }> - } /> - } /> - } /> - } /> - } /> - - - - - ); + return ( + <> + + + + } + > + } /> + } /> + } /> + } /> + } /> + + + + + ); } diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index d37737f..614c86b 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,12 +1,8 @@ /** @type {import('tailwindcss').Config} */ export default { - content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", - ], + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], -} - +}; diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 861b04b..d366e8c 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) +}); -- cgit v1.2.3