From 9cb8fe4f73cdd588873dc181a8bf1ae046bac4a9 Mon Sep 17 00:00:00 2001 From: louai98 Date: Fri, 9 Jun 2023 13:17:28 +0200 Subject: [PATCH] css improvment --- package-lock.json | 21 +++ package.json | 2 + src/App.js | 2 +- .../FeaturedQuestions/FeaturedQuestions.js | 3 +- .../FeaturedQuestions.module.css | 5 + src/Components/Layout/Results/Results.js | 9 +- .../Layout/WordCloud_/WordCloud_ copy.js | 123 +++++++++++++++++ .../Layout/WordCloud_/WordCloud_.js | 26 ++-- .../Layout/WordCloud_/WordCloud_.module.css | 5 + .../PDFGenerator/PDFDownloadButton.js | 0 src/Components/PDFGenerator/PDFGenerator.js | 125 ++++++++++++------ src/Components/PDFGenerator/PDFWorker.js | 21 +++ 12 files changed, 283 insertions(+), 59 deletions(-) create mode 100644 src/Components/Layout/FeaturedQuestions/FeaturedQuestions.module.css create mode 100644 src/Components/Layout/WordCloud_/WordCloud_ copy.js create mode 100644 src/Components/Layout/WordCloud_/WordCloud_.module.css create mode 100644 src/Components/PDFGenerator/PDFDownloadButton.js create mode 100644 src/Components/PDFGenerator/PDFWorker.js diff --git a/package-lock.json b/package-lock.json index cc07462..f77283b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.0", + "@react-pdf-viewer/core": "^3.12.0", "@react-pdf/renderer": "^3.1.9", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", @@ -27,6 +28,7 @@ "react-dom": "^18.2.0", "react-pdf": "^6.2.2", "react-scripts": "^5.0.1", + "react-spinners": "^0.13.8", "web-vitals": "^2.1.4" } }, @@ -3541,6 +3543,16 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" } }, + "node_modules/@react-pdf-viewer/core": { + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/@react-pdf-viewer/core/-/core-3.12.0.tgz", + "integrity": "sha512-8MsdlQJ4jaw3GT+zpCHS33nwnvzpY0ED6DEahZg9WngG++A5RMhk8LSlxdHelwaFFHFiXBjmOaj2Kpxh50VQRg==", + "peerDependencies": { + "pdfjs-dist": "^2.16.105 || ^3.0.279", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@react-pdf/fns": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-2.0.1.tgz", @@ -16139,6 +16151,15 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/react-spinners": { + "version": "0.13.8", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", + "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index e979f0b..6c97038 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.0", + "@react-pdf-viewer/core": "^3.12.0", "@react-pdf/renderer": "^3.1.9", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", @@ -22,6 +23,7 @@ "react-dom": "^18.2.0", "react-pdf": "^6.2.2", "react-scripts": "^5.0.1", + "react-spinners": "^0.13.8", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index b41d4a8..c9947a2 100644 --- a/src/App.js +++ b/src/App.js @@ -134,7 +134,7 @@ function App() { - + diff --git a/src/Components/Layout/FeaturedQuestions/FeaturedQuestions.js b/src/Components/Layout/FeaturedQuestions/FeaturedQuestions.js index 187f831..dca0126 100644 --- a/src/Components/Layout/FeaturedQuestions/FeaturedQuestions.js +++ b/src/Components/Layout/FeaturedQuestions/FeaturedQuestions.js @@ -1,6 +1,7 @@ import React, { useState } from "react"; import Stack from "react-bootstrap/esm/Stack"; import Card from "react-bootstrap/Card"; +import classes from "./FeaturedQuestions.module.css" const FeaturedQuestions = ({ handleButtonClick }) => { const handleClick = (value) => { @@ -24,7 +25,7 @@ const FeaturedQuestions = ({ handleButtonClick }) => { {fqs.map((fq) => (
  • - handleClick(fq)} value={fq}> + handleClick(fq)} value={fq}> {fq}
    • diff --git a/src/Components/Layout/FeaturedQuestions/FeaturedQuestions.module.css b/src/Components/Layout/FeaturedQuestions/FeaturedQuestions.module.css new file mode 100644 index 0000000..6e64127 --- /dev/null +++ b/src/Components/Layout/FeaturedQuestions/FeaturedQuestions.module.css @@ -0,0 +1,5 @@ +.pointer { + cursor: pointer; + text-decoration: none !important; + color: inherit; +} \ No newline at end of file diff --git a/src/Components/Layout/Results/Results.js b/src/Components/Layout/Results/Results.js index 92e0c7e..6bbe59d 100644 --- a/src/Components/Layout/Results/Results.js +++ b/src/Components/Layout/Results/Results.js @@ -4,9 +4,7 @@ import Stack from "react-bootstrap/Stack"; import ResultsItem from "./ResultsItem"; import ResultModal from "../../UI/ResultModal/ResultModal"; import ResultsPagination from "../../UI/ResultsPagination/ResultsPagination"; -import PDFGenerator from "../../PDFGenerator/PDFGenerator"; -import { PDFDownloadLink } from "@react-pdf/renderer"; -import Button from "react-bootstrap/esm/Button"; +//import PDFGenerator from "../../PDFGenerator/PDFGenerator"; const Results = (props) => { const [showModal, setShowModal] = useState(false); @@ -32,11 +30,8 @@ const Results = (props) => { return (
    - {/* }> - {({loading}) => (loading ? : )} - */} {/* */} - +

    {props.searchedPhrase}

    diff --git a/src/Components/Layout/WordCloud_/WordCloud_ copy.js b/src/Components/Layout/WordCloud_/WordCloud_ copy.js new file mode 100644 index 0000000..07974a8 --- /dev/null +++ b/src/Components/Layout/WordCloud_/WordCloud_ copy.js @@ -0,0 +1,123 @@ +import React, { Fragment } from "react"; +import WordCloud from "react-d3-cloud"; +import Card from "react-bootstrap/Card"; +import classes from "./WordCloud_.module.css" +const data = [ + { text: "Disarmament", value: 1000 }, + { + text: "Disarmament", + value: 68.0, + }, + { + text: "Demobilization", + value: 60.0, + }, + { + text: "Reintegration support", + value: 58.0, + }, + { + text: "Reinsertion", + value: 57.0, + }, + { + text: "Security Sector", + value: 52.0, + }, + { + text: "DDR participants", + value: 51.0, + }, + { + text: "Integrated Assessments", + value: 48.0, + }, + { + text: "Community Violence Reduction", + value: 46.0, + }, + { + text: "Transitional Weapons and Ammunition Management", + value: 43.0, + }, + { + text: "Children associated with armed forces and groups", + value: 42.0, + }, + { + text: "Community based reintegration", + value: 40.0, + }, + { + text: "DDR-related tools", + value: 37.0, + }, + { + text: "DDR Programme", + value: 31.0, + }, + { + text: "DDR Process", + value: 27.0, + }, + { + text: "Foreign combatants", + value: 26.0, + }, + { + text: "Pre-DDR", + value: 22.0, + }, + { + text: "DDR policy", + value: 19.0, + }, + { + text: "DDR Strategy", + value: 17.0, + }, + { + text: "Eligibility criteria", + value: 13.0, + }, + { + text: "Preventing recruitment", + value: 13.0, + }, +]; + + +const WordCloud_ = ({handleButtonClick}) => { + const handleClick = (value) => { + //console.log(event.target.value) + handleButtonClick(value); + }; + + return ( + +

    + Most Frequent Key-Phrases +

    + Math.log2(word.value) * 5 } + //fontSize={33} + spiral="rectangular" + rotate={0} + fill = "gray" + padding={2} + onWordMouseOver = {classes.pointer} + onWordClick={(event, d) => { + console.log(`onWordClick: ${d.text}`); + handleClick(d.text) + }} + /> +     + ); +}; + +export default WordCloud_; diff --git a/src/Components/Layout/WordCloud_/WordCloud_.js b/src/Components/Layout/WordCloud_/WordCloud_.js index f6360cf..ae28f78 100644 --- a/src/Components/Layout/WordCloud_/WordCloud_.js +++ b/src/Components/Layout/WordCloud_/WordCloud_.js @@ -1,7 +1,7 @@ -import React, { Fragment } from "react"; +import React, { Fragment, useState } from "react"; import WordCloud from "react-d3-cloud"; import Card from "react-bootstrap/Card"; - +import classes from "./WordCloud_.module.css"; const data = [ { text: "Disarmament", value: 1000 }, { @@ -86,29 +86,37 @@ const data = [ }, ]; -const WordCloud_ = () => { +const WordCloud_ = ({ handleButtonClick }) => { + const handleClick = (value) => { + //console.log(event.target.value) + handleButtonClick(value); + }; + return ( - +

    - Most Frequent Key-Phrases -

    + Most Frequent Key-Phrases + +
    Math.log2(word.value) * 5 } + fontSize={(word) => Math.log2(word.value) * 5} //fontSize={33} spiral="rectangular" rotate={0} - fill = "gray" + fill="gray" padding={2} onWordClick={(event, d) => { console.log(`onWordClick: ${d.text}`); + handleClick(d.text); }} /> - +
    +     ); }; diff --git a/src/Components/Layout/WordCloud_/WordCloud_.module.css b/src/Components/Layout/WordCloud_/WordCloud_.module.css new file mode 100644 index 0000000..6e64127 --- /dev/null +++ b/src/Components/Layout/WordCloud_/WordCloud_.module.css @@ -0,0 +1,5 @@ +.pointer { + cursor: pointer; + text-decoration: none !important; + color: inherit; +} \ No newline at end of file diff --git a/src/Components/PDFGenerator/PDFDownloadButton.js b/src/Components/PDFGenerator/PDFDownloadButton.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/PDFGenerator/PDFGenerator.js b/src/Components/PDFGenerator/PDFGenerator.js index c0bb80f..0942091 100644 --- a/src/Components/PDFGenerator/PDFGenerator.js +++ b/src/Components/PDFGenerator/PDFGenerator.js @@ -1,14 +1,19 @@ -import React, { Fragment } from "react"; +import React, { Fragment, useState } from "react"; +import Button from "react-bootstrap/esm/Button"; import { Document, Page, Text, View, StyleSheet, - Font + Font, + pdf,createWorker } from "@react-pdf/renderer"; +import { saveAs } from "file-saver"; +import { css } from "@emotion/react"; +import ClipLoader from "react-spinners/ClipLoader"; +//import { createWorker } from "@react-pdf-viewer/core"; // Import the createWorker function -// Register font Font.register({ family: "Times-Roman" }); const styles = StyleSheet.create({ @@ -17,53 +22,91 @@ const styles = StyleSheet.create({ backgroundColor: "#E4E4E4", padding: 10, }, - text: { fontFamily: "Times-Roman", fontSize: 12, }, title: { fontSize: 14, - } + }, }); const PDFGenerator = (props) => { + const [isLoading, setIsLoading] = useState(false); + + const handleDownload = async () => { + setIsLoading(true); + + try { + const worker = createWorker(); // Create a new web worker + + await worker.load(); // Load the worker + await worker.setFont("path/to/font/Times-Roman.ttf"); // Set the font path + + worker.onRenderError(() => { + console.error("Error generating PDF"); + setIsLoading(false); + }); + + worker.onRenderProgress((percent) => { + console.log(`PDF rendering progress: ${percent}%`); + }); + + const pdfContent = ( + + + + {props.results.map((result, index) => ( + + + Level {result.LevelName} + + + IDDRS - {result.Module} + + {result.Heading1} + {result.Heading2} + {result.Heading3} + {result.Heading4} + {result.Paragraph} + {result.PageNum} + + ))} + + + + ); + + const result = await worker.renderToString(pdfContent); // Render the PDF content using the web worker + + const pdfBlob = new Blob([result], { type: "application/pdf" }); + saveAs(pdfBlob, "IDDRS.pdf"); + } catch (error) { + console.error("Error generating PDF:", error); + } finally { + setIsLoading(false); + } + }; + return ( - - - - {props.results.map((result, index) => ( - - - Level {result.LevelName} - - - IDDRS - {result.Module} - - - {result.Heading1} - - - {result.Heading2} - - - {result.Heading3} - - - {result.Heading4} - - - {result.Paragraph} - - - {result.PageNum} - - - ))} - - - +
    + +
    ); }; - -export default PDFGenerator; +export default PDFGenerator; \ No newline at end of file diff --git a/src/Components/PDFGenerator/PDFWorker.js b/src/Components/PDFGenerator/PDFWorker.js new file mode 100644 index 0000000..959ab40 --- /dev/null +++ b/src/Components/PDFGenerator/PDFWorker.js @@ -0,0 +1,21 @@ +// pdfWorker.js + +// Import the necessary libraries +import { pdf } from "react-pdf/dist/umd/entry.parcel"; +import { saveAs } from "file-saver"; + +// Listen for messages from the main thread +self.addEventListener("message", async (event) => { + const pdfContent = event.data; + + try { + // Generate PDF content + const pdfBlob = await pdf(pdfContent).toBlob(); + + // Send the PDF blob back to the main thread + self.postMessage(pdfBlob); + } catch (error) { + console.error("Error generating PDF:", error); + self.postMessage(null); + } +}); \ No newline at end of file