Merge pull request #8 from waterloop/CU-1xcp229_Blog-Section-for-the-…

…CMS_Samantha-Grieco

[CU-1xcp229] Blog Section for the CMS

src/backend/api/blogs/edit.js

@@ -7,13 +7,18 @@ export default (req, res) => {
     db.blogs.editBlog(id, updatedBlogInfo)
     .then((response) => {
       if (response.length === 1) {
-          res.status(200).send('Edit successful')
+          console.log("Edit successful")
+          res.status(200).send('Edit successful');
+          return;
       } else {
+          console.log("Edit unsuccessful");
           res.status(404).send('Could not find blog post to edit')
+          return;
       }
   })
     .catch((err) => {
       console.log(err);
+      console.log("Server error");
       res.sendStatus(500);
     });
   }

src/backend/api/blogs/index.js

@@ -21,7 +21,9 @@ router.patch('/:id', [
   body('date').isString().matches(/^(([0-9])|([0-2][0-9])|([3][0-1]))\-(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\-\d{4}$/),
   body('link').isString(),
   body('image').isString(),
-  body('closed').isBoolean()
+  body('closed').isBoolean(),
+  body('visibility').isString(),
+  body('category').isString(),
 ], validationCheck, editBlog);
 
 router.post('/', [
@@ -32,6 +34,8 @@ router.post('/', [
     body('link').isString(),
     body('image').isString(),
     body('closed').isBoolean(),
+    body('visibility').isString(),
+    body('category').isString(),
   ], validationCheck, add);
 
 export default router;

src/backend/api/file-upload/google_storage/helper.js

@@ -22,7 +22,9 @@ export const uploadImage = (file) => {
   const { originalname, buffer, mimetype } = file;
 
   return new Promise((resolve, reject) => {
-    const filename = `${Date.now()}-${originalname}`;
+    let filename = `${Date.now()}-${originalname}`;
+    filename = filename.replaceAll(' ', '-') // no white space in image file name
+
     const file = bucket.file(filename);
 
     const stream = file.createWriteStream({

src/backend/db/blogs.js

@@ -40,7 +40,7 @@ const editBlog = (db) => (id, blogInfo) => db('blogs')
     .update({
       ...blogInfo
     })
-    .returning(['id','title','author','summary','date','link','image', 'closed'])
+    .returning(['id','title','author','summary','date','link','image', 'closed', 'visibility', 'category'])
     .then((response) => {
       return response;
     }).catch((err) => {
@@ -52,7 +52,7 @@ const addBlog = (db) => (blogs) => db('blogs')
   .insert({
       ...blogs,
   })
-  .returning(['id','title','author','summary','date','link','image', 'closed'])
+  .returning(['id','title','author','summary','date','link','image', 'closed', 'visibility', 'category'])
   .then((response) => {
     console.log(response);
     return response;
@@ -68,4 +68,4 @@ export default (db) => ({
     addBlog: addBlog(db),
     editBlog: editBlog(db),
     deleteBlog: deleteBlog(db)
-})
+})

src/backend/migrations/20210823175340_blogs.js

@@ -7,6 +7,8 @@ exports.up = knex => knex.schema.createTable('blogs', table => {
     table.string('link');
     table.string('image');
     table.boolean('closed');
+    table.string('visibility');
+    table.string('category');
   });
 
   exports.down = knex =>

src/backend/seeds/10_blog.js

@@ -12,41 +12,49 @@ if (!ENV_IS_STAGING_OR_PROD) {
             author: 'John Doe',
             title: 'The Competition',
             summary:
-              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas accusantium dolorem, beatae possimus nesciunt ab? Illum atque doloremque fugit ipsam quibusdam eveniet magnam quod, amet id obcaecati et odio praesentium.',
+              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas accusantium dolorem, beatae possimus nesciunt ab? Illum atque doloremque fugit ipsam quibusdam eveniet magnam quod',
             date: '23-May-2021',
-            link: 'string',
-            image: 'https://picsum.photos/200/300',
+            link: 'https://example.com/',
+            image: 'https://storage.googleapis.com/waterloop_cms_image_upload/1614225359133-waterloop1.png',
             closed: true,
+            category: 'Media Appearance',
+            visibility: 'Public',
           },
           {
             author: 'John Doe',
             title: 'The Competition',
             summary:
-              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas accusantium dolorem, beatae possimus nesciunt ab? Illum atque doloremque fugit ipsam quibusdam eveniet magnam quod, amet id obcaecati et odio praesentium.',
+              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas accusantium dolorem, beatae possimus nesciunt ab? Illum atque doloremque fugit ipsam quibusdam eveniet magnam quod',
             date: '20-May-2021',
-            link: 'string',
-            image: 'https://picsum.photos/200/300',
+            link: 'https://example.com/',
+            image: 'https://storage.googleapis.com/waterloop_cms_image_upload/1614225359139-waterloop2.png',
             closed: false,
+            category: 'Blog',
+            visibility: 'Public',
           },
           {
             author: 'John Doe',
             title: 'The Competition',
             summary:
-              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas accusantium dolorem, beatae possimus nesciunt ab? Illum atque doloremque fugit ipsam quibusdam eveniet magnam quod, amet id obcaecati et odio praesentium.',
+              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas accusantium dolorem, beatae possimus nesciunt ab? Illum atque doloremque fugit ipsam quibusdam eveniet magnam quod',
             date: '10-May-2021',
-            link: 'string',
-            image: 'https://picsum.photos/200/300',
+            link: 'https://example.com/',
+            image: 'https://storage.googleapis.com/waterloop_cms_image_upload/1614226228513-waterloop1.png',
             closed: false,
+            category: 'Media Appearance',
+            visibility: 'Hidden',
           },
           {
             author: 'John Doe',
             title: 'The Competition',
             summary:
-              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas accusantium dolorem, beatae possimus nesciunt ab? Illum atque doloremque fugit ipsam quibusdam eveniet magnam quod, amet id obcaecati et odio praesentium.',
+              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas accusantium dolorem, beatae possimus nesciunt ab? Illum atque doloremque fugit ipsam quibusdam eveniet magnam quod',
             date: '1-May-2021',
-            link: 'string',
-            image: 'https://picsum.photos/200/300',
+            link: 'https://example.com/',
+            image: 'https://storage.googleapis.com/waterloop_cms_image_upload/1614482400810-waterloop2.png',
             closed: true,
+            category: 'Blog',
+            visibility: 'Hidden',
           },
         ]);
       });

src/backend/tests/integration/blogs.test.js

@@ -48,6 +48,8 @@ describe('Blog Routes', () => {
               'link',
               'image',
               'closed',
+              'visibility', 
+              'category'
             ]);
           });
           done();
@@ -78,6 +80,8 @@ describe('Blog Routes', () => {
               'link',
               'image',
               'closed',
+              'visibility', 
+              'category'
             ]);
           });
           done();
@@ -97,6 +101,9 @@ describe('Blog Routes', () => {
           date: '22-Aug-2021',
           link: 'https://test.com',
           image: 'https://picsum.photos/200/300',
+          closed: true,
+          visibility: 'Public', 
+          category: 'Blog'
         })
         .end((err, res) => {
           if (err) {
@@ -114,6 +121,8 @@ describe('Blog Routes', () => {
               'link',
               'image',
               'closed',
+              'visibility', 
+              'category'
             ]);
           });
           done();
@@ -143,11 +152,15 @@ describe('Blog Routes', () => {
       .request(app)
       .post('/api/blogs')
       .send({
+        author: 'Evan',
         title: 'test',
         summary: "Testing the '/api/blogs/add' route lorem ipsum ssomething something I want to exceed the 200 character limit how the heck are you btw my days been great hbu as;ldkfjas;ldfjas;ldkfjas;dlkfjasd;lkfjasl;dfjlas;kdjflkasdasd",
         date: '22-Aug-2021',
         link: 'https://test.com',
         image: 'https://picsum.photos/200/300',
+        closed: true,
+        visibility: 'Public', 
+        category: 'Blog'
       })
       .end((err, res) => {
         if (err) {
@@ -162,11 +175,15 @@ describe('Blog Routes', () => {
       .request(app)
       .post('/api/blogs')
       .send({
+        author: 'Evan',
         title: 'test',
         summary: "",
         date: '22-Aug-2021',
         link: 'https://test.com',
         image: 'https://picsum.photos/200/300',
+        closed: true,
+        visibility: 'Public', 
+        category: 'Blog'
       })
       .end((err, res) => {
         if (err) {
@@ -179,21 +196,24 @@ describe('Blog Routes', () => {
   });
 
   describe('PATCH /api/blogs/:id', () => {
-    it('should edit the blog in the database if "id" exists', (done) => {
-      chai
+    it('should edit the blog in the database if "id" exists', async () => {
+      const blogList = await db('blogs');
+      return chai
         .request(app)
-        .patch(`/api/blogs/1`)
+        .patch(`/api/blogs/${blogList[0].id}`)
         .send({
           author: 'Parth',
           title: 'test',
           summary: "Testing the '/api/blogs/edit/:id' route",
           date: '06-Oct-2021',
           link: 'https://test.com',
           image: 'https://picsum.photos/200/300',
+          closed: true,
+          visibility: 'Public', 
+          category: 'Blog'
         })
-        .end((err, res) => {
-          res.should.have.status(200);
-          done();
+        .then((res) => {
+          expect(res).to.have.status(200);
         });
     });
     it('should return 404 if the blog is not found', (done) => {
@@ -207,6 +227,9 @@ describe('Blog Routes', () => {
           date: '06-Oct-2021',
           link: 'https://test.com',
           image: 'https://picsum.photos/200/300',
+          closed: true,
+          visibility: 'Public', 
+          category: 'Blog'
         })
         .end((err, res) => {
           if (err) {
@@ -219,16 +242,13 @@ describe('Blog Routes', () => {
   });
 
   describe('DELETE /api/blogs/:id', () => {
-    it('should delete a blog from the database if "id" exists', (done) => {
-      chai
+    it('should delete a blog from the database if "id" exists', async () => {
+      const blogList = await db('blogs');
+      return chai
         .request(app)
-        .delete(`/api/blogs/2`)
-        .end((err, res) => {
-          if (err) {
-            console.error(err);
-          }
+        .delete(`/api/blogs/${blogList[0].id}`)
+        .then((res) => {
           expect(res).to.have.status(200);
-          done();
         });
     });
     it('should return a 404 if "id" does not exist', (done) => {

src/frontend/App.js

@@ -14,6 +14,7 @@ import SponsorsRouter from './pages/sponsors/Sponsors.router';
 import GeeseRouter from './pages/geese/Geese.router';
 import TeamDescriptionsRouter from './pages/team-descriptions/TeamDescriptions.router';
 import { addAuthTokenToRequests } from './api/server';
+import BlogsRouter from './pages/blogs/Blogs.Router';
 
 const App = () => {
   let token = useSelector(userSelectors.token) || Cookies.get('tokenId');
@@ -63,6 +64,11 @@ const App = () => {
           <TopBar />
           <TeamDescriptionsRouter />
         </Route>
+        <Route path="/blog-posts">
+          {!token && <Redirect to="/sign-in" />}
+          <TopBar />
+          <BlogsRouter />
+        </Route>
         <Route component={NotFoundPage}>
           {/* {!token && <Redirect to="/sign-in" />} */}
           <TopBar />

src/frontend/api/blogs.js

@@ -0,0 +1,16 @@
+const getBlogs = (server) => () => server.get('/api/blogs');
+const getLatestBlogs = (server) => () => server.get('/api/blogs/latest');
+const deleteBlog = (server) => (id) => 
+  server.delete(`/api/blogs/${id}`);
+const editBlog = (server) => (id, updatedBlogs) =>
+  server.patch(`/api/blogs/${id}`, updatedBlogs);
+const addBlog = (server) => (blogs) =>
+  server.post('/api/blogs/', blogs);
+
+export default (server) => ({
+  getBlogs: getBlogs(server),
+  getLatestBlogs: getLatestBlogs(server),
+  editBlog: editBlog(server),
+  deleteBlog: deleteBlog(server),
+  addBlog: addBlog(server),
+});

src/frontend/api/index.js

@@ -6,6 +6,7 @@ import formUpload from './formUpload';
 import openingsDescription from './openings-description';
 import sponsors from './sponsors';
 import geeseInfo from './geese-info';
+import blogs from './blogs';
 
 export default {
   google: google(server),
@@ -15,4 +16,5 @@ export default {
   formUpload: formUpload(server),
   openingsDescription: openingsDescription(server),
   geeseInfo: geeseInfo(server),
+  blogs: blogs(server)
 };

src/frontend/components/PreviewTable/index.js

@@ -10,6 +10,7 @@ import MUITableRow from '@mui/material/TableRow';
 import MUITableContainer from '@mui/material/TableContainer';
 import MUITableHead from '@mui/material/TableHead';
 import useSortedRows from './hooks/sorted-rows';
+import Button from '../../components/Button';
 
 const Table = styled(MUITable)``;
 const TableBody = styled(MUITableBody)``;
@@ -67,7 +68,9 @@ const EditButtonIcon = styled.img`
 
 const TableCell = styled(MUITableCell)``;
 
-const PreviewTable = ({ className, headers, rows, RowComponent, onEdit }) => {
+const PreviewTable = ({
+  className, headers, rows, RowComponent, onEdit, onSummary
+}) => {
   const { sortedRows, onSort } = useSortedRows(rows);
 
   const headerItems = headers.map((header) => (
@@ -80,17 +83,32 @@ const PreviewTable = ({ className, headers, rows, RowComponent, onEdit }) => {
     />
   ));
 
-  const sortedRowItems = sortedRows.rows.map((row) => (
-    <BodyRow key={row.id}>
-      <RowComponent {...row} />
-      <TableCell>
-        <EditButton onClick={() => onEdit(row.id)}>
-          <EditButtonText>Edit</EditButtonText>
-          <EditButtonIcon src={EditIcon} alt="edit" />
-        </EditButton>
-      </TableCell>
-    </BodyRow>
-  ));
+  const sortedRowItems = sortedRows.rows.map(
+    (row) => (
+      <BodyRow key={row.id}>
+        <RowComponent
+          {...row}
+        />
+        {onEdit
+         ? <TableCell>
+            <EditButton onClick={() => onEdit(row.id)}>
+              <EditButtonText>Edit</EditButtonText>
+              <EditButtonIcon src={EditIcon} alt="edit" />
+            </EditButton>
+          </TableCell>
+          :<></>
+        }
+        {onSummary &&
+         <TableCell>
+            <Button
+              label="Summary"
+              onClick={() => onSummary(row.summary)}
+            />
+          </TableCell>
+        }
+      </BodyRow>
+    ),
+  );
 
   return (
     <TableContainer component={Chart} className={className}>