Merge branch 'activities-redesign' of https://github.com/unstructuredstudio/zubhub into activities-redesign

Author: brrkrmn

zubhub_frontend/zubhub/src/components/activity/activity.jsx

@@ -1,34 +1,29 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import clsx from 'clsx';
-import { makeStyles } from '@mui/styles';
-import { style } from '../../assets/js/styles/components/activity/activityStyle';
-import BookmarkIcon from '@mui/icons-material/Bookmark';
-import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+import EmojiObjectsIcon from '@mui/icons-material/EmojiObjects';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import {
-  getActivities,
-  activityToggleSave,
-  setActivity,
-} from '../../store/actions/activityActions';
-import {
+  Box,
   Card,
   CardActions,
   CardContent,
   CardMedia,
-  Typography,
-  Box,
-  Grid,
-  Avatar,
   Tooltip,
+  Typography
 } from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
+import { makeStyles } from '@mui/styles';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { default as React, default as React } from 'react';
 import { MdPublicOff } from 'react-icons/md';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 import commonStyles from '../../assets/js/styles';
+import { style } from '../../assets/js/styles/components/activity/activityStyle';
 import { dFormatter } from '../../assets/js/utils/scripts';
-import EmojiObjectsIcon from '@mui/icons-material/EmojiObjects';
+import {
+  activityToggleSave,
+  getActivities,
+  setActivity,
+} from '../../store/actions/activityActions';
 import Categories from '../categories/Categories';
 import Creators from '../creators/Creators';
 
@@ -46,6 +41,13 @@ function Activity(props) {
         onClick={e => props.setActivity(activity)}
       >
         <Card className={clsx(classes.activityCard)}>
+          {!activity.publish && (
+            <Tooltip title={t('activities.tooltipUnpublished')} placement="right-start" arrow>
+              <Box className={classes.publishStyle}>
+                <MdPublicOff />
+              </Box>
+            </Tooltip>
+          )}
           {!activity.publish && (
             <Tooltip title={t('activities.tooltipUnpublished')} placement="right-start" arrow>
               <Box className={classes.publishStyle}>
@@ -59,6 +61,8 @@ function Activity(props) {
               alt={activity.title}
               className={clsx(classes.activityCardImage, !activity.publish && classes.unpublishedCardImage )}
             />
+              className={clsx(classes.activityCardImage, !activity.publish && classes.unpublishedCardImage )}
+            />
           </CardMedia>
           <CardActions>
             <CardContent className={classes.activityCardContent}>
@@ -69,6 +73,18 @@ function Activity(props) {
               >
                 {activity.title}
               </Typography>
+              <Typography
+                variant="subtitle2"
+                color="textSecondary"
+                component="p"
+                className={classes.activityDescription}
+              <Typography
+                variant="h5"
+                component="h2"
+                className={classes.activityTitle}
+              >
+                {activity.title}
+              </Typography>
               <Typography
                 variant="subtitle2"
                 color="textSecondary"
@@ -81,13 +97,27 @@ function Activity(props) {
                 <Categories categories={activity.category} />
               )}
               <Creators creators={activity?.creators} />
+              <Box className={classes.footer}>
+                <Box className={classes.captionStyle}>
+                {activity.introduction.replace(/(<([^>]+)>)/gi, "")}
+              </Typography>
+              {activity.category.length > 0 && (
+                <Categories categories={activity.category} />
+              )}
+              <Creators creators={activity?.creators} />
               <Box className={classes.footer}>
                 <Box className={classes.captionStyle}>
                   <Typography
                     className={classes.captionIconStyle}
                     color="textSecondary"
                     variant="caption"
                     component="span"
+                  >
+                    <VisibilityIcon /> {activity.views_count}
+                    className={classes.captionIconStyle}
+                    color="textSecondary"
+                    variant="caption"
+                    component="span"
                   >
                     <VisibilityIcon /> {activity.views_count}
                   </Typography>
@@ -102,8 +132,25 @@ function Activity(props) {
                 </Box>
                 <Typography color="textSecondary" variant="caption" component="span" className={classes.date}>
                   {`
-                    ${dFormatter(activity.created_on).value} 
-                    ${t(`date.${dFormatter(activity.created_on).key}`)} 
+                    ${dFormatter(activity.created_on).value}
+                    ${t(`date.${dFormatter(activity.created_on).key}`)}
+                    ${t('date.ago',)}
+                  `}
+                </Typography>
+              </Box>
+                  <Typography
+                    className={classes.captionIconStyle}
+                    color="textSecondary"
+                    variant="caption"
+                    component="span"
+                  >
+                    <EmojiObjectsIcon /> {activity.inspired_projects.length}
+                  </Typography>
+                </Box>
+                <Typography color="textSecondary" variant="caption" component="span" className={classes.date}>
+                  {`
+                    ${dFormatter(activity.created_on).value}
+                    ${t(`date.${dFormatter(activity.created_on).key}`)}
                     ${t('date.ago',)}
                   `}
                 </Typography>