add feature: import papers by author

frontend/src/App.css

@@ -1,4 +1,4 @@
-.post-content {
+.linebreaks {
   white-space: pre-line;
 }
 

frontend/src/App.jsx

@@ -25,7 +25,8 @@ import AddPostModal from './components/posts/AddPostModal';
 import ViewPostModal from './components/posts/ViewPostModal';
 import Post from './utils/Post';
 import Proposals from './components/Proposals';
-import Import from './components/Import';
+import ImportPaper from './components/ImportPaper';
+import ImportPapersByAuthor from './components/ImportPapersByAuthor';
 import getAddressName from './utils/get-address-name';
 
 function App() {
@@ -575,7 +576,9 @@ function App() {
               <Proposals />
             </Tab>
             <Tab eventKey="import" title="Import">
-              <Import />
+              <h1>Semantic Scholar Import</h1>
+              <ImportPaper />
+              <ImportPapersByAuthor />
             </Tab>
           </Tabs>
         </>

frontend/src/components/ImportPaper.jsx

@@ -3,7 +3,7 @@ import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import axios from 'axios';
 
-function Import() {
+function ImportPaper() {
   const [paperId, setPaperId] = useState();
   const [status, setStatus] = useState('');
 
@@ -22,7 +22,7 @@ function Import() {
 
   return (
     <>
-      <h1>Semantic Scholar Import</h1>
+      <h2>Import Paper</h2>
       <Form>
         <Form.Group controlId="SSImport.paperId">
           <Form.Label>Paper ID</Form.Label>
@@ -39,4 +39,4 @@ function Import() {
   );
 }
 
-export default Import;
+export default ImportPaper;

frontend/src/components/ImportPapersByAuthor.jsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import axios from 'axios';
+
+function ImportPapersByAuthor() {
+  const [authorId, setAuthorId] = useState();
+  const [status, setStatus] = useState('');
+
+  const handleImport = async () => {
+    setStatus(`Importing papers by author ${authorId}...`);
+    const { data: results } = await axios.post('/api/importFromSemanticScholar', { authorId })
+      .catch((error) => {
+        setStatus(`Error: ${error.response?.data ?? error.message}`);
+      });
+    const getStatus = ({ paperId, postId, alreadyAdded }) => (alreadyAdded
+      ? `Paper ${paperId} was already imported as post ${postId}`
+      : `Imported paper ${paperId} as post ${postId}`);
+    setStatus(results.map(getStatus).join('\n'));
+  };
+
+  return (
+    <>
+      <h2>Import Papers by Author</h2>
+      <Form>
+        <Form.Group controlId="SSImport.authorId">
+          <Form.Label>Author ID</Form.Label>
+          <Form.Control
+            as="input"
+            className="input-paper-id mb-3"
+            onChange={(e) => setAuthorId(e.target.value)}
+          />
+        </Form.Group>
+      </Form>
+      <Button className="mb-2" onClick={handleImport}>Import</Button>
+      <p className="linebreaks">{status}</p>
+    </>
+  );
+}
+
+export default ImportPapersByAuthor;

frontend/src/components/posts/ViewPostModal.jsx

@@ -37,7 +37,7 @@ function ViewPostModal({
           ))}
         </Stack>
         <hr />
-        <p className="post-content">
+        <p className="linebreaks">
           {content}
         </p>
         <hr />