add a certification dialog box for printing.

package.json

@@ -51,6 +51,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-to-print": "^2.13.0",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {

src/views/User/User/User.js

@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Card from '@material-ui/core/Card';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
 
 import InstagramIcon from '@material-ui/icons/Instagram';
 import TwitterIcon from '@material-ui/icons/Twitter';
@@ -39,7 +41,12 @@ import DataJoinEditor from 'components/DataJoinEditor';
 import ContributionHeatmap from './ContributionHeatmap';
 import RichText from 'components/RichText';
 import Loading from 'components/Loading';
-
+import Button from '@material-ui/core/Button';
+import ReactToPrint from 'react-to-print';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
 const useStyles = makeStyles((theme) => ({
   container: {
     paddingTop: theme.spacing(2),
@@ -61,13 +68,36 @@ const useStyles = makeStyles((theme) => ({
   header: {
     marginTop: theme.spacing(2),
   },
+
+  certification: {
+    '& h2': {
+      textAlign: 'center',
+      height: '2rem',
+      verticalAlign: 'middle',
+    },
+    '& div': {
+      textAlign: 'center',
+    },
+    'textAlign': 'center',
+    'fontSize': '0.8rem',
+    'padding': '5mm',
+    'margin': '2mm',
+  },
+
+  g0vOnly: {
+    height: '2rem',
+    verticalAlign: 'middle',
+    marginLeft: '0.2rem',
+    marginBottom: '0.2rem',
+  },
 }));
 
 const todayFromBeginning = moment().startOf('day');
 const today = moment().endOf('day');
 const aYearAgo = moment().add(-1, 'years').startOf('day');
 
 export default function User({ id: inId, computedMatch, match }) {
+  const componentRef = useRef();
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -83,6 +113,7 @@ export default function User({ id: inId, computedMatch, match }) {
   const [needs, setNeeds] = useState([]);
   const [canEdit, setCanEdit] = useState(false);
   const [lastUpdatedAt, setLastUpdatedAt] = useState(Date.now());
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (inId) {
@@ -225,8 +256,58 @@ export default function User({ id: inId, computedMatch, match }) {
     return <Loading fullScreen={false} />;
   }
 
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const formatDate = (date) => date.substring(0, 10);
+
   return (
     <Container className={classes.container}>
+      <Dialog open={open}>
+        <Card variant="outlined" ref={componentRef} className={classes.certification}>
+          <div>
+            <img src="/assets/images/pring-logo.png"/>
+          </div>
+          <p>
+            Congratulation to {user.name} for contributing {userProjects.length} project,
+            to finshed {user.totalCompletedTasks} missions in {user.totalCompletedHours} hours.<br/>
+            <br/>
+            You are the best!......Hooray!!!!!
+          </p>
+          <h2>
+          Contribution Summarize
+          </h2>
+          Contributed Projects {userProjects.length}, Total Contributed Hours {user.totalCompletedHours},
+          Total Completed Tasks {user.totalCompletedTasks}
+
+          <Table>
+            <TableBody>
+              {userProjects.map((up)=>(
+                <TableRow key={up.project.name}>
+                  <TableCell style={{ borderBottom: 'none' }}>{up.project.name}</TableCell>
+                  <TableCell style={{ borderBottom: 'none' }}>{up.completedTasks} Missions,
+                    {up.completedHours} Hours from {formatDate(up.project.createdAt)} to {formatDate(up.project.updatedAt)}.</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+          <h2>POWERED BY <img className={classes.g0vOnly} src="/assets/images/g0v-only.svg"/></h2>
+          {new Date().getFullYear()}&sdot;{new Date().getMonth()+1}&sdot;{new Date().getDate()}
+        </Card>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <ReactToPrint
+            trigger={() => <Button onClick={handleClose}>Print</Button>}
+            content={() => componentRef.current}
+          />
+        </DialogActions>
+      </Dialog>
+
       <Card className={classes.card}>
         <Grid container spacing={4}>
           <Grid item xs={12} md={3}>
@@ -257,6 +338,9 @@ export default function User({ id: inId, computedMatch, match }) {
                   onUpdate={() => setLastUpdatedAt(Date.now())}
                 />
               </Grid>}
+              <Grid item xs={12}>
+                <Button fullWidth={true} size='small' variant='outlined' onClick={handleClickOpen}>Certification</Button>
+              </Grid>
               <Grid item xs={12}>
                 {details.map((item, index)=>(
                   <div key={index} className={classes.listItem}>

yarn.lock

@@ -13208,7 +13208,7 @@
     "prop-types" "^15.5.6"
     "react-side-effect" "^1.0.2"
 
-"react-dom@*", "react-dom@^0.14 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react-dom@^16.6.1 || ^17", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^16.8.6 || 17.0.x", "react-dom@^17.0.2", "react-dom@>= 16.7.0", "react-dom@>=0.14.0", "react-dom@>=16.3.0", "react-dom@>=16.6.0":
+"react-dom@*", "react-dom@^0.14 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.6.1 || ^17", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^16.8.6 || 17.0.x", "react-dom@^17.0.2", "react-dom@>= 16.7.0", "react-dom@>=0.14.0", "react-dom@>=16.3.0", "react-dom@>=16.6.0":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -13457,6 +13457,13 @@
   dependencies:
     "shallowequal" "^1.0.1"
 
+"react-to-print@^2.13.0":
+  "integrity" "sha512-JMX+HrMtBXWDh2ohPT2IeBkaGY4QpFeloXTXBA7hBK7dXJQei/UXMvQqbZHb0rqJwzAHltZ2zXevuSK/ReKI5w=="
+  "resolved" "https://registry.npmjs.org/react-to-print/-/react-to-print-2.13.0.tgz"
+  "version" "2.13.0"
+  dependencies:
+    "prop-types" "^15.7.2"
+
 "react-transition-group@^4.4.0":
   "integrity" "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw=="
   "resolved" "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz"
@@ -13467,7 +13474,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@*", "react@^0.14 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react@^0.14 || ^15.0.1 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.6.1 || ^17", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.6 || 17.0.x", "react@^17.0.2", "react@>= 16", "react@>= 16.7.0", "react@>= 16.8.0", "react@>=0.14.0", "react@>=15", "react@>=15.0.0", "react@>=16", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8.0", "react@16.x", "react@17.0.2":
+"react@*", "react@^0.14 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react@^0.14 || ^15.0.1 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.6.1 || ^17", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.6 || 17.0.x", "react@^17.0.2", "react@>= 16", "react@>= 16.7.0", "react@>= 16.8.0", "react@>=0.14.0", "react@>=15", "react@>=15.0.0", "react@>=16", "react@>=16.3.0", "react@>=16.6.0", "react@>=16.8.0", "react@16.x", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"