diff --git a/client/.env b/client/.env index 8b5a0ce..9c0935e 100644 --- a/client/.env +++ b/client/.env @@ -1,2 +1,2 @@ -VITE_API_URL=https://graff.estate -# VITE_API_URL=http://192.168.1.171:3003 \ No newline at end of file +VITE_API_URL=https://graff.estate/api +# VITE_API_URL=http://localhost:3003 \ No newline at end of file diff --git a/client/src/components/ModalContainer.tsx b/client/src/components/ModalContainer.tsx index 8717dcc..8a7a1c1 100644 --- a/client/src/components/ModalContainer.tsx +++ b/client/src/components/ModalContainer.tsx @@ -7,7 +7,7 @@ function ModalContainer() { return (
setModal(null)} - className={`fixed p-8 top-0 left-0 w-full h-full flex justify-center items-center bg-black bg-opacity-80 overflow-auto transition-opacity`} + className={`fixed p-8 top-0 left-0 z-10 w-full h-full flex justify-center items-center bg-black bg-opacity-80 overflow-auto transition-opacity`} >
e.stopPropagation()} className="cursor-default"> {modal} diff --git a/client/src/components/ProjectCard.tsx b/client/src/components/ProjectCard.tsx index 53e4de0..762826d 100644 --- a/client/src/components/ProjectCard.tsx +++ b/client/src/components/ProjectCard.tsx @@ -28,7 +28,7 @@ function ProjectCard({
diff --git a/client/src/components/modals/CreateProjectModal.tsx b/client/src/components/modals/CreateProjectModal.tsx index cfdcfc5..430e99f 100644 --- a/client/src/components/modals/CreateProjectModal.tsx +++ b/client/src/components/modals/CreateProjectModal.tsx @@ -44,7 +44,7 @@ function CreateProjectModal() { setProject((prev) => ({ ...prev, - image: `${import.meta.env.VITE_API_URL}/api/${file}`, + image: file, })); } catch (error) { if (error instanceof Error) { @@ -143,7 +143,9 @@ function CreateProjectModal() { className="absolute opacity-0" onChange={handleChangeFile} /> -

{file ? file.name : "Выберите изображение"}

+

+ {file ? file.name : "Выберите изображение"} +

{previewFile && } diff --git a/client/src/components/modals/EditProjectModal.tsx b/client/src/components/modals/EditProjectModal.tsx index 6c944a6..b5a0429 100644 --- a/client/src/components/modals/EditProjectModal.tsx +++ b/client/src/components/modals/EditProjectModal.tsx @@ -42,13 +42,13 @@ function EditProjectModal({ projectId }: EditProjectModalProps) { formData.append("file", file); try { - const { file: url }: { file: string } = await api + const { file }: { file: string } = await api .post("upload", { body: formData }) .json(); setProject((prev) => ({ ...prev, - image: `${import.meta.env.VITE_API_URL}/api/${url}`, + image: file, })); } catch (error) { if (error instanceof Error) { @@ -161,12 +161,17 @@ function EditProjectModal({ projectId }: EditProjectModalProps) { className="absolute opacity-0" onChange={handleChangeFile} /> -

{file ? file.name : "Выберите изображение"}

+

{file ? file.name : "Выберите изображение"}

{previewFile ? ( ) : ( - project.image && + project.image && ( + + ) )} diff --git a/client/src/main.tsx b/client/src/main.tsx index 4e1ac20..13365b6 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -1,18 +1,18 @@ import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import App from "./App.tsx"; import "./index.css"; -// import ProjectsPage from "./pages/ProjectsPage.tsx"; +import App from "./App.tsx"; +import ProjectsPage from "./pages/ProjectsPage.tsx"; const router = createBrowserRouter([ { path: "/", element: , }, - // { - // path: "/projects", - // element: , - // }, + { + path: "/projects", + element: , + }, ]); ReactDOM.createRoot(document.getElementById("root")!).render( diff --git a/client/src/pages/ProjectsPage.tsx b/client/src/pages/ProjectsPage.tsx index 39211b9..f26f7f4 100644 --- a/client/src/pages/ProjectsPage.tsx +++ b/client/src/pages/ProjectsPage.tsx @@ -34,12 +34,12 @@ function ProjectsPage() { }, []); return ( -
-
-
- +
+
+ +
+
+
{projects.map((project, index) => (
@@ -49,17 +49,49 @@ function ProjectsPage() { onClick={() => setModal() } - className="px-3 py-2 border bg-black bg-opacity-60 hover:bg-opacity-70 transition-opacity" + className="group relative p-2 bg-black bg-opacity-60 hover:bg-opacity-70 transition-opacity rounded-full" > - Редактировать + + + + + Редактировать +
diff --git a/client/src/pages/TestPage.tsx b/client/src/pages/TestPage.tsx deleted file mode 100644 index c734692..0000000 --- a/client/src/pages/TestPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -function TestPage() { - return ( - - ); -} - -export default TestPage; diff --git a/client/src/utils/api.ts b/client/src/utils/api.ts index 676012b..74ccfa8 100644 --- a/client/src/utils/api.ts +++ b/client/src/utils/api.ts @@ -1,7 +1,7 @@ import ky from "ky"; const api = ky.extend({ - prefixUrl: `${import.meta.env.VITE_API_URL}/api`, + prefixUrl: import.meta.env.VITE_API_URL, }); export default api; diff --git a/client/src/utils/randomNumber.ts b/client/src/utils/randomNumber.ts deleted file mode 100644 index 2569ed0..0000000 --- a/client/src/utils/randomNumber.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default function randomNumber(min: number, max: number) { - return Math.floor(Math.random() * (max - min) + min); -} diff --git a/client/vite.config.ts b/client/vite.config.ts index 326ec3a..10279b4 100644 --- a/client/vite.config.ts +++ b/client/vite.config.ts @@ -4,7 +4,6 @@ import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; - // const env = loadEnv(mode, process.cwd()); return { plugins: [react()], diff --git a/server/src/index.ts b/server/src/index.ts index 81cf5e2..b42f042 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -4,6 +4,7 @@ import express, { json } from "express"; import cors from "cors"; import mailRoute from "./routes/mail"; import projectRoute from "./routes/projects"; +import uploadRoute from "./routes/upload"; connectDB(); @@ -15,6 +16,7 @@ app.use(cors({ origin: "*" })); app.use("/mail", mailRoute); app.use("/projects", projectRoute); +app.use("/upload", uploadRoute); app.listen(port, () => { console.log(`Server is listening on port ${port}`); diff --git a/server/src/routes/upload.ts b/server/src/routes/upload.ts index 94c636c..4d9146d 100644 --- a/server/src/routes/upload.ts +++ b/server/src/routes/upload.ts @@ -1,77 +1,78 @@ import { Router } from "express"; -// import multer, { memoryStorage } from "multer"; -// import sharp from "sharp"; -// import fs from "fs"; +import multer, { memoryStorage } from "multer"; +import sharp from "sharp"; +import fs from "fs"; import path from "path"; -// import { v4 as uuidv4 } from "uuid"; +import { v4 as uuidv4 } from "uuid"; const router = Router(); -// const upload = multer({ -// dest: "uploads/", -// storage: memoryStorage(), -// fileFilter: (_req, file, cb) => { -// if (file.mimetype.split("/")[0] === "image") { -// cb(null, true); -// } else { -// cb(new Error("Only images are allowed!")); -// } -// }, -// }); +const upload = multer({ + dest: "uploads/", + storage: memoryStorage(), + fileFilter: (_req, file, cb) => { + if (file.mimetype.split("/")[0] === "image") { + cb(null, true); + } else { + cb(new Error("Only images are allowed!")); + } + }, +}); router.get("/", (_req, res) => { res.json({ ok: 1 }); }); -// router.get("/:filename", (req, res) => { -// res.sendFile(`${path.resolve("uploads")}/${req.params.filename}`); -// }); +router.get("/:filename", (req, res) => { + res.sendFile(`${path.resolve("uploads")}/${req.params.filename}`); +}); -// router.get("/:file", (req, res) => { -// const fileName = req.params.file; +router.get("/:file", (req, res) => { + const fileName = req.params.file; -// console.log(fileName); + console.log(fileName); -// try { -// const readStream = fs.createReadStream( -// `${path.join(__dirname, "uploads")}/${fileName}` -// ); + try { + const readStream = fs.createReadStream( + `${path.join(__dirname, "uploads")}/${fileName}` + ); -// console.log(readStream); + console.log(readStream); -// readStream.pipe(res); -// } catch (error) { -// if (error instanceof Error) { -// return res.json({ error: error.message }); -// } -// } -// }); + readStream.pipe(res); + } catch (error) { + if (error instanceof Error) { + return res.json({ error: error.message }); + } + } +}); -// router.post("/", upload.single("file"), async (req, res) => { -// if (!req.file) { -// return res.json({ error: "req.file" }); -// } +router.post("/", upload.single("file"), async (req, res) => { + if (!req.file) { + return res.json({ error: "req.file" }); + } -// try { -// const filename = `${uuidv4()}.jpg`; + try { + const filename = `${uuidv4()}.jpg`; -// await sharp(req.file.buffer) -// .resize({ -// width: 728, -// height: 728, -// fit: "inside", -// withoutEnlargement: true, -// }) -// .jpeg({ quality: 90 }) -// .toFile(`uploads/${filename}`); + await sharp(req.file.buffer) + .resize({ + width: 728, + height: 728, + fit: "inside", + withoutEnlargement: true, + }) + .jpeg({ quality: 90 }) + .toFile(`uploads/${filename}`); -// return res.json({ file: `/upload/${filename}` }); -// } catch (error) { -// if (error instanceof Error) { -// return res.json({ error: error.message }); -// } -// } -// }); + return res.json({ file: filename }); + } catch (error) { + if (error instanceof Error) { + return res.json({ error: error.message }); + } + } +}); const uploadRoute = router; + export default uploadRoute;