From 0dffce021c8d4769d61fcdb77e45d04a53be6b81 Mon Sep 17 00:00:00 2001 From: Wethmi Ranasinghe Date: Tue, 16 Jul 2024 01:21:00 +0530 Subject: [PATCH] Add news button on front-end Updated News Form at front-end Updated --- .../com/example/demo/appuser/AppUser.java | 1 - .../example/demo/download/FileRepository.java | 1 - front-end/src/Pages/News.jsx | 199 +++++------------- front-end/src/components/News.css | 96 ++++++++- 4 files changed, 149 insertions(+), 148 deletions(-) diff --git a/back-end/src/main/java/com/example/demo/appuser/AppUser.java b/back-end/src/main/java/com/example/demo/appuser/AppUser.java index e7e247e1..d9ace26c 100644 --- a/back-end/src/main/java/com/example/demo/appuser/AppUser.java +++ b/back-end/src/main/java/com/example/demo/appuser/AppUser.java @@ -28,7 +28,6 @@ public class AppUser implements UserDetails { - /** * The sequence generator for the primary key of the AppUser entity. * This generator is used to generate unique IDs for each AppUser. diff --git a/back-end/src/main/java/com/example/demo/download/FileRepository.java b/back-end/src/main/java/com/example/demo/download/FileRepository.java index 81015b85..6fccec30 100644 --- a/back-end/src/main/java/com/example/demo/download/FileRepository.java +++ b/back-end/src/main/java/com/example/demo/download/FileRepository.java @@ -6,7 +6,6 @@ /* * Repository interface for managing FileEntity entities. */ - @Repository public interface FileRepository extends JpaRepository { } diff --git a/front-end/src/Pages/News.jsx b/front-end/src/Pages/News.jsx index 24aa776a..4cdf3929 100644 --- a/front-end/src/Pages/News.jsx +++ b/front-end/src/Pages/News.jsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from "react"; import axios from "axios"; import { loggedInUser } from '../Pages/Login'; +import '../components/News.css'; // Import your CSS file const fetchNews = async () => { try { @@ -15,6 +16,7 @@ const fetchNews = async () => { const News = () => { const [news, setNews] = useState([]); + const [showForm, setShowForm] = useState(false); useEffect(() => { const getNews = async () => { @@ -25,171 +27,78 @@ const News = () => { getNews(); }, []); + const toggleForm = () => { + setShowForm(!showForm); + }; - // Visibility of Add news button - const [isVisible, setIsVisible] = useState(false); - useEffect(() => { - if (location.pathname === '/news' || loggedInUser.isLoggedIn) { - setIsVisible(true); - } - else { - setIsVisible(false); - } -}) + const handleSubmit = (event) => { + event.preventDefault(); + const form = event.target; + const newsData = { + newsTitle: form.newsTitle.value, + newsDescription: form.newsDescription.value, + newsUrl: form.newsUrl.value, + newsAuthor: form.newsAuthor.value, + newsDate: form.newsDate.value, + newsCoverImage: form.newsCoverImage.value, + }; - const openFormInNewWindow = () => { - const width = 700; - const height = 750; - const left = window.innerWidth / 2 - width / 2; - const top = window.innerHeight / 2 - height / 2; + axios.post('http://localhost:8080/api/v1/news', newsData) + .then(response => { + toggleForm(); // Close the form after successful submission + fetchNews().then(latestNews => setNews(latestNews)); // Refresh news list + }) + .catch(error => { + console.error('Error adding news:', error); + }); + }; - const newWindow = window.open('', '', `width=${width},height=${height},left=${left},top=${top}`); - newWindow.document.write(` - - - Add News Form - - - -
+ return ( + <> +
+

News

+ {loggedInUser.isLoggedIn && ( +
+ +
+ )} + {showForm && ( +
+

Add News

-
-
- + +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
+
-
- - - - - `); - }; - - return ( - <> -
-

News

- {isVisible &&
} +
)}
{news.map((item) => ( diff --git a/front-end/src/components/News.css b/front-end/src/components/News.css index e517e367..bd430f45 100644 --- a/front-end/src/components/News.css +++ b/front-end/src/components/News.css @@ -21,6 +21,100 @@ color: #ffffff; } +.add-news-form { + background-color: #ffffff; + padding: 20px; + border: 1px solid #cccccc; + border-radius: 8px; + box-shadow: 0 0 10px rgba(22, 21, 21, 0.1); + width: 700px; + margin-bottom: 20px; + display: flex; + flex-direction: column; + margin-top: 5px; +} + +.add-news-form-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.add-news-form h2 { + font-size: 2rem; + margin-bottom: 20px; + color: #203a90; +} + +.form-group { + margin-bottom: 15px; +} + +.form-group label { + display: block; + font-weight: bold; + margin-bottom: 5px; +} + +.form-group input { + background: transparent; + color: black; +} + +.form-group textarea { + background: transparent; + color: black; +} + +.form-group input[type="text"], +.form-group input[type="url"], +.form-group input[type="date"], +.form-group textarea { + width: 100%; + padding: 8px; + font-size: 1rem; + border: 1px solid #cccccc; + border-radius: 4px; +} + +.form-buttons { + margin-top: 20px; +} + +.form-buttons button { + padding: 10px 20px; + margin-right: 10px; + font-size: 1rem; + background-color: #203a90; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.form-buttons button[type="button"] { + background-color: #6c757d; +} + +.form-buttons button:hover { + opacity: 0.8; +} + +@media (max-width: 768px) { + .add-news-form { + padding: 15px; + width: 100%; + } + + .form-group input[type="text"], + .form-group input[type="url"], + .form-group input[type="date"], + .form-group textarea { + font-size: 0.9rem; + } +} + .news-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); @@ -33,7 +127,7 @@ .news-tile { border: 1px solid #ccc; padding: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 10px rgba(92, 67, 67, 0.1); } .news-tile img {