Update notes field formatting to support line breaks

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`

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 = []

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 { renderNotes } from './util/formatNotesToHTML';
 
 function a11yProps(index) {
   return {
@@ -47,6 +48,10 @@ export default function CollectionShow() {
           <b>Notes:</b> {collection.notes}
         </div>
       </p>
+      <div>
+        {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
+        <b>Notes:</b> {collection.notes && renderNotes(collection.notes)}
+      </div>
       <Box sx={{ width: '100%' }}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
@@ -80,4 +85,4 @@ export default function CollectionShow() {
     </div>
 
   );
-}
+}

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 { renderNotes } from './util/formatNotesToHTML';
 
 export default function FeaturedCollections() {
   const { data, isLoading } = useGetFeaturedCollectionsQuery({ platform: 'onlinenews' });
@@ -31,11 +32,14 @@ export default function FeaturedCollections() {
                   <div>
                     {collection.notes}
                   </div>
+                  <div>
+                  <div>{collection.notes && renderNotes(collection.notes)}</div>
+                  </div>
                 </div>
               </div>
             )))}
         </div>
       </div>
     </div>
   );
-}
+}

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) => (
+      <p key={index}>{line}</p>
+    ));
+  };