add title to print list

Author: Dena Burd

src/App.css

@@ -211,6 +211,11 @@ textarea {
   z-index: 1;
   width: 100%;
   opacity: 0.9;
+  text-shadow:
+   -0.5px -0.5px 0 #000,  
+    0.5px -0.5px 0 #000,
+    -0.5px 0.5px 0 #000,
+     0.5px 0.5px 0 #000;
 }
 .navbar ul {
   display: flex;
@@ -329,6 +334,24 @@ textarea {
   cursor: pointer;
   color: #666;
 }
+
+.printList{
+  list-style:circle;
+  color: #3D1D5B;
+  font-size: 20px;
+}
+
+.printList li {
+  padding:5px;
+}
+
+.label{
+  background-color: hsla(270, 92%, 15%, 0.95);
+  float:left; 
+  padding:10px 20px;
+  margin:0;
+}
+
 /*media queries */
 
 @media (max-width: 1130px) {

src/components/watchLIst/Print.js

@@ -1,36 +1,39 @@
-import React, { Component } from 'react';
+import React, { useRef, useState } from 'react';
 import { PDFExport } from '@progress/kendo-react-pdf';
 import PrintTemplate from './PrintTemplate';
 
-class Print extends Component {
-    animeList;
+const Print = () => {
+    const [title, setTitle] = useState('Watch List')
+    const [comments, setComments] = useState('')
 
-    state={
-        redirect:false       
-    }
+    const animeList = useRef(null);
+    
 
-    exportPDF = () => {
-        this.animeList.save();
-        this.setState({redirect:true})
+    const exportPDF = () => {
+        animeList.current.save();
     }
-
-    render() {
-        return (
-            <div style={{ height: '100vh', width: '100vw', paddingTop: 20}}>
-                <div style={{ textAlign: 'center', marginBottom: 10 }}>
-                    <button 
-                        className='btn btn-light'
-                        onClick={this.exportPDF} 
-                        style={{ margin: 'auto' }}>
-                        download
-                    </button>
-                </div>
-                <PDFExport paperSize={'Letter'}
-                    fileName="animeList.pdf"
-                    title=""
-                    subject=""
-                    keywords=""
-                    ref={(r) => this.animeList = r}>
+  
+    return (
+        <div style={{ height: '100vh', width: '100vw'}}>
+            <button 
+                className='btn btn-light'
+                onClick={exportPDF} 
+                style={{ margin: '0 auto', display:'block' }}>
+                Download
+            </button>
+            <form style={{ textAlign: 'center', margin: '20px auto 0 auto', width:'30%'}}>
+                <label className='label'>Title:</label>
+                <input value={title} type="text" onChange={(e)=>setTitle(e.target.value)} />
+                {/* <label className='label'>Comments:</label>
+                <input value={comments} type="text" onChange={(e)=>setComments(e.target.value)} /> */}
+            </form>
+            <PDFExport 
+                paperSize={'Letter'}
+                fileName="animeList.pdf"
+                title=""
+                subject=""
+                keywords=""
+                ref={animeList}>
                     <div 
                         style={{
                             height: 792,
@@ -43,12 +46,12 @@ class Print extends Component {
                             overflowY: 'hidden'
                         }}
                     >
-                        <PrintTemplate/>
+                        <PrintTemplate title={title} comments={comments}/>
                     </div>
-                </PDFExport>
-            </div>
-        )
-    }
+            </PDFExport>
+        </div>
+   
+    )
 }
 
 export default Print;

src/components/watchLIst/PrintTemplate.js

@@ -1,8 +1,9 @@
 import React, {useContext, useEffect} from 'react'
 import WatchListContext from '../../context/watchList/watchListContext'
 import {Link} from "react-router-dom"
+import animaven from '../../img/animaven.png'
 
-const PrintTemplate = () => {
+const PrintTemplate = ({title, comments}) => {
     const watchListContext = useContext(WatchListContext)
     const {watchList,  getListStorage} = watchListContext
 
@@ -11,34 +12,46 @@ const PrintTemplate = () => {
         // eslint-disable-next-line
     }, []);
 
-
     return (
         <div>
-            <div className="text-dark-back p-1">
             <Link to='/' 
                 className='bold-header-text'
-                style={{color:'#EAE6F4', textDecoration:'underline'}}
             >
-                <h1>Animaven</h1>
+                <img 
+                    src={animaven}
+                    style={{width:'100%', margin:'0', padding:'0'}}
+                />
             </Link>
-                
-                <h2>Watch List</h2>
-            </div>
-            <div className="light-container" >
+            {title && title !== '' &&
+                <div className="text-dark-back p-1" style={{marginTop:'-10px'}}>
+                    <h2>{title}</h2>
+                </div>
+            }
+            
+            <div style={{padding:'20px 0 0 50px'}}>
                 {watchList && watchList.length > 0 && 
-                    <ul>
+                    <ul className='printList'>
                         { watchList.map((item, idx) => (
                             <div key={idx}>
                                 <li> 
-                                    <span className='listItem'>{item.title}</span> 
+                                    <span>{item.title}</span> 
                                 </li>
                             </div>
                         ))}
                     </ul>
                 }
+
+                {comments && (
+                    <>
+                        <hr style={{  margin:'30px 50px 0 0'}}/>
+                        <p style={{fontFamily:'times', color:'#505050'}}>
+                            Comments:  {comments} 
+                        </p>
+                    </>
+                )}
+                            
             </div>
         </div>
-        
     )
 }
 

src/context/types.js

@@ -10,8 +10,3 @@ export const GET_STORAGE = 'GET_STORAGE';
 export const REMOVE_LIST_ITEM = 'REMOVE_LIST_ITEM';
 export const SET_GENRE = 'SET_GENRE';
 
-
-
-
-
-

src/context/watchList/WatchListState.js

@@ -9,7 +9,9 @@ import {
 
 const WatchListState = props => {
     const initialState = {
-       watchList:[]
+       watchList:[],
+       title:'Watch List',
+       comments:'jjjj '
     }
 
     const [state, dispatch] = useReducer(WatchListReducer, initialState)
@@ -27,7 +29,7 @@ const WatchListState = props => {
            payload:anime
         })
     }
-
+    
     const getListStorage = () => {
         const storage = localStorage.getItem('state')
         // console.log('watch state get', storage)