From 56ae61585b5b8ef618cdaf8e17f98fd0ba6577b7 Mon Sep 17 00:00:00 2001 From: Zining Date: Fri, 1 Nov 2024 13:21:06 -0400 Subject: [PATCH 1/5] Update notes field formatting to support line breaks --- .../sources/migrations/0027_merge_20241031_2043.py | 12 ++++++++++++ .../src/features/collections/CollectionShow.jsx | 8 +++++++- .../src/features/collections/FeaturedCollections.jsx | 7 ++++++- .../features/collections/util/formatNotesToHTML.jsx | 10 ++++++++++ 4 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 mcweb/backend/sources/migrations/0027_merge_20241031_2043.py create mode 100644 mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx diff --git a/mcweb/backend/sources/migrations/0027_merge_20241031_2043.py b/mcweb/backend/sources/migrations/0027_merge_20241031_2043.py new file mode 100644 index 000000000..acfdf0ff6 --- /dev/null +++ b/mcweb/backend/sources/migrations/0027_merge_20241031_2043.py @@ -0,0 +1,12 @@ +# Generated by Django 4.1.13 on 2024-10-31 20:43 + +from django.db import migrations + + +class Migration(migrations.Migration): + dependencies = [ + ("sources", "0025_rename_static_collection_managed"), + ("sources", "0026_alter_collection_public"), + ] + + operations = [] diff --git a/mcweb/frontend/src/features/collections/CollectionShow.jsx b/mcweb/frontend/src/features/collections/CollectionShow.jsx index 7e9cac4c8..e9ce766fb 100644 --- a/mcweb/frontend/src/features/collections/CollectionShow.jsx +++ b/mcweb/frontend/src/features/collections/CollectionShow.jsx @@ -8,6 +8,7 @@ import TabPanelHelper from '../ui/TabPanelHelper'; import SourceList from '../sources/SourceList'; import StoriesOverTime from '../stories/StoriesOverTime'; import { useGetCollectionQuery } from '../../app/services/collectionsApi'; +import formatNotesToHTML from './util/formatNotesToHTML'; function a11yProps(index) { return { @@ -43,7 +44,12 @@ export default function CollectionShow() {

{/* eslint-disable-next-line react/jsx-one-expression-per-line */} - Notes: {collection.notes} + Notes: +

diff --git a/mcweb/frontend/src/features/collections/FeaturedCollections.jsx b/mcweb/frontend/src/features/collections/FeaturedCollections.jsx index 5930a15d0..0c9a230d9 100644 --- a/mcweb/frontend/src/features/collections/FeaturedCollections.jsx +++ b/mcweb/frontend/src/features/collections/FeaturedCollections.jsx @@ -4,6 +4,7 @@ import CircularProgress from '@mui/material/CircularProgress'; import { platformDisplayName } from '../ui/uiUtil'; import { useGetFeaturedCollectionsQuery } from '../../app/services/collectionsApi'; +import formatNotesToHTML from './util/formatNotesToHTML'; export default function FeaturedCollections() { const { data, isLoading } = useGetFeaturedCollectionsQuery({ platform: 'onlinenews' }); @@ -28,7 +29,11 @@ export default function FeaturedCollections() {

{collection.name}

-

{collection.notes}

+
)))} diff --git a/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx b/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx new file mode 100644 index 000000000..e9dd0c2f9 --- /dev/null +++ b/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx @@ -0,0 +1,10 @@ +function formatNotesToHTML(text) { + const sentences = text.split("\n"); + let htmlToShow = ""; + sentences.forEach(sentence => { + htmlToShow += `

${sentence}

`; + }); + return htmlToShow; +} + +export default formatNotesToHTML; \ No newline at end of file From ae21525098c1378730d651868522c5052594796e Mon Sep 17 00:00:00 2001 From: Zining Date: Fri, 1 Nov 2024 16:02:56 -0400 Subject: [PATCH 2/5] Updated notes formatting and dispalyed that with React --- README.md | 38 +++++++++---------- .../collections/FeaturedCollections.jsx | 9 ++--- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 640ff31dd..2c8987b25 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,40 @@ -Media Cloud Web Search and Source Management App -================================================ +# Media Cloud Web Search and Source Management App 🚧 **under construction** 🚧 This is the new Media Cloud search application. It is intended to support online media research across platforms such -as online news, Twitter, Reddit, and other social media (via 3rd party APIs). We also use it to manage a large set of +as online news, Twitter, Reddit, and other social media (via 3rd party APIs). We also use it to manage a large set of geographical and topical content collections, supporting research into specific sub-corpora of content on those platforms. _Expected to launch publicly in early 2023_ -Installation ------------- +## Installation + 1. Clone this repository 2. Install Python, npm, postgres and redis -3. Python: `pip install -r requirements.txt` or `conda install --file requirements.txt` -4. Node: `npm install` in base folder +3. Python: `pip install -r requirements.txt` or `conda install --file requirements.txt` +4. Node: `npm install` in base folder 5. Copy `mcweb/.env.template` to `mcweb/.env` and edit that one to enter all your secret configuration variables 6. `python mcweb/manage.py migrate` to create all the database tables needed 7. `python mcweb/manage.py createsuperuser` to create a Django superuser for administration -Running -------- +## Running 1. Run the backend: `python mcweb/manage.py runserver` 2. Run the frontend: `npm run dev` 3. Then visit http://127.0.0.1:8000/. -Helpful Tips ------------- +## Helpful Tips Other useful commands: -* import collection/source/feed data (from a folder on your computer): `python mcweb/manage.py importdata` -* login to `http://localhost:8000/admin` to administer users and groups -* Two running terminals (1) django "backend" and (2) react "frontend" -* Two running websites (1) http://localhost:8000/admin for administer users and groups and (2) http://localhost:8000/#/ for Media Cloud "Proof of Concept" -* Redux Dev Tools (Google Chrome Extension) to see the live store - -Releasing ---------- -`npm run build` + +- import collection/source/feed data (from a folder on your computer): `python mcweb/manage.py importdata` +- login to `http://localhost:8000/admin` to administer users and groups +- Two running terminals (1) django "backend" and (2) react "frontend" +- Two running websites (1) http://localhost:8000/admin for administer users and groups and (2) http://localhost:8000/#/ for Media Cloud "Proof of Concept" +- Redux Dev Tools (Google Chrome Extension) to see the live store + +## Releasing + +`npm run build` diff --git a/mcweb/frontend/src/features/collections/FeaturedCollections.jsx b/mcweb/frontend/src/features/collections/FeaturedCollections.jsx index 0c9a230d9..9f5fb1631 100644 --- a/mcweb/frontend/src/features/collections/FeaturedCollections.jsx +++ b/mcweb/frontend/src/features/collections/FeaturedCollections.jsx @@ -9,6 +9,7 @@ import formatNotesToHTML from './util/formatNotesToHTML'; export default function FeaturedCollections() { const { data, isLoading } = useGetFeaturedCollectionsQuery({ platform: 'onlinenews' }); const featuredCollections = data; + const formattedNotes = formatNotesToHTML(collection.notes); return (
@@ -29,11 +30,9 @@ export default function FeaturedCollections() {

{collection.name}

-
+
+ {parse(formattedNotes)} +
)))} From ffdb820cda212e52817a03238784c4309b5c9c45 Mon Sep 17 00:00:00 2001 From: Zining Date: Fri, 1 Nov 2024 16:10:20 -0400 Subject: [PATCH 3/5] Updated notes formatting and dispalyed that with React --- .../src/features/collections/CollectionShow.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/mcweb/frontend/src/features/collections/CollectionShow.jsx b/mcweb/frontend/src/features/collections/CollectionShow.jsx index e9ce766fb..ce5a57910 100644 --- a/mcweb/frontend/src/features/collections/CollectionShow.jsx +++ b/mcweb/frontend/src/features/collections/CollectionShow.jsx @@ -32,6 +32,8 @@ export default function CollectionShow() { isLoading, } = useGetCollectionQuery(collectionId); + const formattedNotes = formatNotesToHTML(collection.notes); + useEffect(() => { document.title = `${collection.name} | Media Cloud`; }); @@ -44,12 +46,10 @@ export default function CollectionShow() {

{/* eslint-disable-next-line react/jsx-one-expression-per-line */} - Notes: -

+

Notes:

+
+ {parse(formattedNotes)} +

From a0634720e9b3870d3dd5c3a0942c899400cb73aa Mon Sep 17 00:00:00 2001 From: Zining Date: Wed, 13 Nov 2024 13:48:04 -0500 Subject: [PATCH 4/5] Split the notes content by newline characters --- .../features/collections/CollectionShow.jsx | 15 ++---- .../collections/FeaturedCollections.jsx | 7 ++- .../collections/util/formatNotesToHTML.jsx | 48 +++++++++++++++---- 3 files changed, 46 insertions(+), 24 deletions(-) diff --git a/mcweb/frontend/src/features/collections/CollectionShow.jsx b/mcweb/frontend/src/features/collections/CollectionShow.jsx index ce5a57910..7b957cd71 100644 --- a/mcweb/frontend/src/features/collections/CollectionShow.jsx +++ b/mcweb/frontend/src/features/collections/CollectionShow.jsx @@ -8,7 +8,7 @@ import TabPanelHelper from '../ui/TabPanelHelper'; import SourceList from '../sources/SourceList'; import StoriesOverTime from '../stories/StoriesOverTime'; import { useGetCollectionQuery } from '../../app/services/collectionsApi'; -import formatNotesToHTML from './util/formatNotesToHTML'; +import { renderNotes } from './util/formatNotesToHTML'; function a11yProps(index) { return { @@ -32,8 +32,6 @@ export default function CollectionShow() { isLoading, } = useGetCollectionQuery(collectionId); - const formattedNotes = formatNotesToHTML(collection.notes); - useEffect(() => { document.title = `${collection.name} | Media Cloud`; }); @@ -44,13 +42,10 @@ export default function CollectionShow() { return (
-

+

{/* eslint-disable-next-line react/jsx-one-expression-per-line */} -

Notes:

-
- {parse(formattedNotes)} -
-

+ Notes: {collection.notes && renderNotes(collection.notes)} +
@@ -84,4 +79,4 @@ export default function CollectionShow() {
); -} +} \ No newline at end of file diff --git a/mcweb/frontend/src/features/collections/FeaturedCollections.jsx b/mcweb/frontend/src/features/collections/FeaturedCollections.jsx index 9f5fb1631..14ae5ffba 100644 --- a/mcweb/frontend/src/features/collections/FeaturedCollections.jsx +++ b/mcweb/frontend/src/features/collections/FeaturedCollections.jsx @@ -4,12 +4,11 @@ import CircularProgress from '@mui/material/CircularProgress'; import { platformDisplayName } from '../ui/uiUtil'; import { useGetFeaturedCollectionsQuery } from '../../app/services/collectionsApi'; -import formatNotesToHTML from './util/formatNotesToHTML'; +import { renderNotes } from './util/formatNotesToHTML'; export default function FeaturedCollections() { const { data, isLoading } = useGetFeaturedCollectionsQuery({ platform: 'onlinenews' }); const featuredCollections = data; - const formattedNotes = formatNotesToHTML(collection.notes); return (
@@ -31,7 +30,7 @@ export default function FeaturedCollections() {

{collection.name}

- {parse(formattedNotes)} +
{collection.notes && renderNotes(collection.notes)}
@@ -40,4 +39,4 @@ export default function FeaturedCollections() {
); -} +} \ No newline at end of file diff --git a/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx b/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx index e9dd0c2f9..f24ebec40 100644 --- a/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx +++ b/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx @@ -1,10 +1,38 @@ -function formatNotesToHTML(text) { - const sentences = text.split("\n"); - let htmlToShow = ""; - sentences.forEach(sentence => { - htmlToShow += `

${sentence}

`; - }); - return htmlToShow; -} - -export default formatNotesToHTML; \ No newline at end of file +// function formatNotesToHTML(text) { +// const sentences = text.split("\n"); +// let htmlToShow = ""; +// sentences.forEach(sentence => { +// htmlToShow += `

${sentence}

`; +// }); +// return htmlToShow; +// } + +// export default formatNotesToHTML; + + +// function formatNotesToHTML(text) { +// return text.split("\n").map((sentence, index) => ( +//

{sentence}

+// )); +// } + +// export default formatNotesToHTML; + +// export default function formatNotesToHTML(notes) { +// if (!notes) return null; + +// // Split the notes by newline characters and filter out empty lines +// const paragraphs = notes.split('\n').filter(line => line.trim() !== ''); + +// // Map each line to a

element +// return paragraphs.map((paragraph, index) => ( +//

{paragraph}

+// )); +// } +import React from 'react'; +export const renderNotes = (notes) => { + return notes.split('\n').map((line, index) => ( +

{line}

+ )); + }; + \ No newline at end of file From 2092cf737eaf295eb193a7d4eb8c0a3defc698b8 Mon Sep 17 00:00:00 2001 From: Zining Date: Wed, 13 Nov 2024 14:04:22 -0500 Subject: [PATCH 5/5] Merged main and Split the notes content by newline characters and wrapped each line in

tags to preserve line breaks. --- .../collections/util/formatNotesToHTML | 6 +++ .../collections/util/formatNotesToHTML.jsx | 38 ------------------- 2 files changed, 6 insertions(+), 38 deletions(-) create mode 100644 mcweb/frontend/src/features/collections/util/formatNotesToHTML delete mode 100644 mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx diff --git a/mcweb/frontend/src/features/collections/util/formatNotesToHTML b/mcweb/frontend/src/features/collections/util/formatNotesToHTML new file mode 100644 index 000000000..968af099a --- /dev/null +++ b/mcweb/frontend/src/features/collections/util/formatNotesToHTML @@ -0,0 +1,6 @@ +import React from 'react'; +export const renderNotes = (notes) => { + return notes.split('\n').map((line, index) => ( +

{line}

+ )); + }; \ No newline at end of file diff --git a/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx b/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx deleted file mode 100644 index f24ebec40..000000000 --- a/mcweb/frontend/src/features/collections/util/formatNotesToHTML.jsx +++ /dev/null @@ -1,38 +0,0 @@ -// function formatNotesToHTML(text) { -// const sentences = text.split("\n"); -// let htmlToShow = ""; -// sentences.forEach(sentence => { -// htmlToShow += `

${sentence}

`; -// }); -// return htmlToShow; -// } - -// export default formatNotesToHTML; - - -// function formatNotesToHTML(text) { -// return text.split("\n").map((sentence, index) => ( -//

{sentence}

-// )); -// } - -// export default formatNotesToHTML; - -// export default function formatNotesToHTML(notes) { -// if (!notes) return null; - -// // Split the notes by newline characters and filter out empty lines -// const paragraphs = notes.split('\n').filter(line => line.trim() !== ''); - -// // Map each line to a

element -// return paragraphs.map((paragraph, index) => ( -//

{paragraph}

-// )); -// } -import React from 'react'; -export const renderNotes = (notes) => { - return notes.split('\n').map((line, index) => ( -

{line}

- )); - }; - \ No newline at end of file