Merge branch 'dev' of https://github.com/SE-Project-CMP-Tumbler/SE-Pr…

…oject-CMP-Front-end into dev
SE-Project-CMP-Tumbler · Dec 30, 2021 · 1a83471 · 1a83471
2 parents 6135027 + d0973f4
commit 1a83471
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 52 deletions.
diff --git a/tumblr-replica/src/components/Activity/Activity.jsx b/tumblr-replica/src/components/Activity/Activity.jsx
@@ -14,7 +14,9 @@ import {
   getTotalfollowers,
 } from '../../states/features/graph/graphSlice';
 import NotificationsList from './NotificationsList';
-// import Graph2 from '../Graph/Graph2';
+
+import { getBlogId, fetchBlogs, setcurrentblog } from '../../states/features/userblogs/userblogsSlice';
+
 
 /**
  * Component for show the activity for the Blog it has graph
@@ -82,15 +84,21 @@ function Activity({ option }) {
   }
   console.log(period, rate);
   const dispatch = useDispatch();
+  const BlogId = useSelector(getBlogId);
   React.useEffect(() => {
+    dispatch(setcurrentblog(URL1[4]));
+    dispatch(fetchBlogs());
+  }, []);
+  React.useEffect(() => {
+    console.log(BlogId, 'Activityyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy');
     if (optionval === 'notes') {
-      dispatch(fetchAsyncgraphnotes(period, rate));
+      dispatch(fetchAsyncgraphnotes({ period, rate, BlogId }));
     } else if (optionval === 'new') {
-      dispatch(fetchAsyncgraphnewfollowers(period, rate));
+      dispatch(fetchAsyncgraphnewfollowers({ period, rate, BlogId }));
     } else {
-      dispatch(fetchAsyncgraphtotalfollowers(period, rate));
+      dispatch(fetchAsyncgraphtotalfollowers({ period, rate, BlogId }));
     }
-  }, [conrate, conperiod, optionval]);
+  }, [conrate, conperiod, optionval, BlogId]);
   let Notes = {};
   if (optionval === 'notes') {
     Notes = useSelector(getNotes);
@@ -101,19 +109,22 @@ function Activity({ option }) {
   }
   console.log(Notes);
   return (
-    <>
-      <div>
-        <Grid container spacing={2}>
-          <Grid item xs={10} lg={6} sx={{ marginLeft: '10%' }}>
-            <Graph Notes={Notes} periodval={periodval} rateval={rateval} optionval={optionval} />
-            <NotificationsList />
-          </Grid>
-          <Grid item lg={4} sx={{ marginLeft: '2%', display: { xs: 'none', lg: 'block' } }}>
-            <SideTabs select={3} />
-          </Grid>
+  <div>
+      <Grid container spacing={2}>
+        <Grid item xs={10} lg={6} sx={{ marginLeft: '10%' }}>
+          <Graph
+            Notes={Notes}
+            periodval={periodval}
+            rateval={rateval}
+            optionval={optionval}
+          />
+          <NotificationsList />
+        </Grid>
+        <Grid item lg={4} sx={{ marginLeft: '2%', display: { xs: 'none', lg: 'block' } }}>
+          <SideTabs select={3} />
         </Grid>
-      </div>
-    </>
+      </Grid>
+    </div>
   );
 }
 Activity.propTypes = {

diff --git a/tumblr-replica/src/components/BlogPage/BlogPage.jsx b/tumblr-replica/src/components/BlogPage/BlogPage.jsx
@@ -60,9 +60,7 @@ function BlogPage() {
                 <div>No Posts available</div>
               </Box>
             ) : (
-              <>
-                <PostsList Posts={Posts} FetchnextPage={FetchnextPage} />
-              </>
+              Posts.meta.status === '200' && <PostsList Posts={Posts} FetchnextPage={FetchnextPage} />
             )}
         </Grid>
         <Grid item lg={4} sx={{ marginLeft: '2%', display: { xs: 'none', lg: 'block' } }}>

diff --git a/tumblr-replica/src/components/FollowingList/FollowingList.jsx b/tumblr-replica/src/components/FollowingList/FollowingList.jsx
@@ -83,6 +83,7 @@ export default function FollowingList() {
     dispatch(fetchAsyncfollowtags());
   }, []);
   const followtags = useSelector(getAllfollowtags);
+  const tags = followtags.response.tags.filter((tag) => tag.follow === true);
   const maxlen = followtags.response.tags.length;
   const handleStart = () => {
     setStart(((start + 4) % maxlen));
@@ -128,7 +129,7 @@ export default function FollowingList() {
                 </div>
               </ListItem>
               <Divider />
-              {followtags.response.tags.slice(start, start + 4)
+              {tags.slice(start, start + 4)
                 .map((tag) => (
                   <FollowingTag
                     key={tag}
@@ -152,7 +153,7 @@ export default function FollowingList() {
             Try switching to the mock server to see if the error persists.
           </Alert>
         ))
-                || (followtags.meta.msg === 'Loading' && <Box style={{ marginLeft: '30%' }}><ReactLoading type="bars" color="#fff" width={157} /></Box>)
+                || (followtags.meta.msg === 'Loading' && <Box style={{ marginLeft: '30%' }}><ReactLoading type="bars" color="#fff" width={70} /></Box>)
         )
             }
     </Box>

diff --git a/tumblr-replica/src/components/Graph/Graph.jsx b/tumblr-replica/src/components/Graph/Graph.jsx
@@ -130,22 +130,41 @@ export default function Graph({
           </Link>
         </Select>
       </FormControl>
-      {Notes.meta.status === '200' && !Notes.error ? (
+      {Notes.meta.status === 200 && !Notes.error ? (
         <>
-          <V.VictoryChart
-            width={700}
-            height={400}
-            theme={V.VictoryTheme.material}
-          >
-            <V.VictoryArea
-              data={Notes.response.data}
-              style={{
-                data: {
-                  fill: 'lightblue', fillOpacity: 0.7, stroke: '#c43a31', strokeWidth: 3,
-                },
-              }}
-            />
-          </V.VictoryChart>
+          {Notes.response.data.length > 0
+            ? (
+              <V.VictoryChart
+                width={700}
+                height={400}
+                theme={V.VictoryTheme.material}
+              >
+                <V.VictoryArea
+                  data={Notes.response.data}
+                  style={{
+                    data: {
+                      fill: 'lightblue', fillOpacity: 0.7, stroke: '#c43a31', strokeWidth: 3,
+                    },
+                  }}
+                />
+              </V.VictoryChart>
+            ) : (
+              <Box
+                sx={{
+                  width: '100%',
+                  height: 100,
+                  backgroundColor: '#122943',
+                  marginTop: 5,
+                  marginBottom: 5,
+                  color: 'white',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                No activity for this time period
+              </Box>
+            ) }
           <Grid container spacing={2}>
             <Grid item xs={6} sm={4}>
               <Link to={`/blog/raghadkhaled/activity/${periodval}/${rateval}`} style={linkst}>
@@ -209,7 +228,7 @@ export default function Graph({
 Graph.propTypes = {
   Notes: PropTypes.shape({
     meta: PropTypes.shape({
-      status: PropTypes.string.isRequired, msg: PropTypes.string.isRequired,
+      status: PropTypes.number.isRequired, msg: PropTypes.string.isRequired,
     }).isRequired,
     response: PropTypes.shape({
       data: PropTypes.arrayOf(PropTypes.shape({

diff --git a/tumblr-replica/src/components/Menue/Menue.jsx b/tumblr-replica/src/components/Menue/Menue.jsx
@@ -62,7 +62,7 @@ function Menue() {
         </Grid>
       )}
       {isDesktopOrLaptop && (
-        <Grid item sx={{ width: 'fit-content' }}>
+        <Grid item xs={10}>
           <div classsName="wttfd" style={{ width: 'fit-content' }}>
             <div style={{ backgroundColor: 'white' }}>
               <Stack direction="row">

diff --git a/tumblr-replica/src/components/PostsList/PostsList.jsx b/tumblr-replica/src/components/PostsList/PostsList.jsx
@@ -109,7 +109,7 @@ function PostsList({ Posts, FetchnextPage }) {
                   </>
                 ))
               ) : ((Posts.error && (
-              <Alert style={{ marginTop: '15%' }} severity="error">
+              <Alert style={{ marginTop: '15%', marginLeft: '7%' }} severity="error">
                 Component could not be loaded.
                 This could be due to trouble fetching data from the backend server.
                 Try switching to the mock server to see if the error persists.

diff --git a/tumblr-replica/src/components/SideTabs/SideTabs.jsx b/tumblr-replica/src/components/SideTabs/SideTabs.jsx
@@ -99,7 +99,7 @@ function SideTabs({ select }) {
               </ListItem>
             </Link>
           </>
-        ) : (((Bloginfo.error || Activity.error) && (
+        ) : (((Bloginfo.error && Activity.error && blogid === 0) && (
           <Alert style={{ marginTop: '15%' }} severity="error">
             Component could not be loaded.
             This could be due to trouble fetching data from the backend server.

diff --git a/tumblr-replica/src/components/followinglist/FollowingList.jsx b/tumblr-replica/src/components/followinglist/FollowingList.jsx
@@ -83,6 +83,7 @@ export default function FollowingList() {
     dispatch(fetchAsyncfollowtags());
   }, []);
   const followtags = useSelector(getAllfollowtags);
+  const tags = followtags.response.tags.filter((tag) => tag.follow === true);
   const maxlen = followtags.response.tags.length;
   const handleStart = () => {
     setStart(((start + 4) % maxlen));
@@ -128,7 +129,7 @@ export default function FollowingList() {
                 </div>
               </ListItem>
               <Divider />
-              {followtags.response.tags.slice(start, start + 4)
+              {tags.slice(start, start + 4)
                 .map((tag) => (
                   <FollowingTag
                     key={tag}
@@ -152,7 +153,7 @@ export default function FollowingList() {
             Try switching to the mock server to see if the error persists.
           </Alert>
         ))
-                || (followtags.meta.msg === 'Loading' && <Box style={{ marginLeft: '30%' }}><ReactLoading type="bars" color="#fff" width={157} /></Box>)
+                || (followtags.meta.msg === 'Loading' && <Box style={{ marginLeft: '30%' }}><ReactLoading type="bars" color="#fff" width={70} /></Box>)
         )
             }
     </Box>

diff --git a/tumblr-replica/src/states/features/blogposts/blogpostsSlice.js b/tumblr-replica/src/states/features/blogposts/blogpostsSlice.js
@@ -60,7 +60,7 @@ const fetchAsyncnextposts = createAsyncThunk(
 );
 
 const initialState = {
-  blogposts: { response: { }, meta: { status: '000', msg: 'Loading' } },
+  blogposts: { response: { }, meta: { status: '000', msg: 'Loading' }, error: false },
 };
 
 const blogpostsSlice = createSlice({
@@ -73,9 +73,8 @@ const blogpostsSlice = createSlice({
     },
     [fetchAsyncblogposts.fulfilled]:
      (state, { payload }) => ({ ...state, blogposts: payload }),
-    [fetchAsyncblogposts.rejected]: () => {
-      // console.log('Rejected!');
-    },
+    [fetchAsyncblogposts.rejected]:
+    (state) => ({ ...state, blogposts: { ...state.blogposts, error: true } }),
     [fetchAsyncnextposts.fulfilled]:
      (state, { payload }) => ({
        ...state,

diff --git a/tumblr-replica/src/states/features/graph/graphSlice.js b/tumblr-replica/src/states/features/graph/graphSlice.js
@@ -36,7 +36,7 @@ const fetchAsyncgraphnotes = createAsyncThunk(
         const USERTOKEN = state.user.user.accessToken;
         console.log(USERTOKEN);
         const AuthStr = `Bearer ${USERTOKEN}`;
-        const response = await apiR.get(`graph/notes/${dispatch.period}/${dispatch.rate}`, { headers: { Authorization: AuthStr } });
+        const response = await apiR.get(`graph/notes/${dispatch.BlogId}/${dispatch.period}/${dispatch.rate}`, { headers: { Authorization: AuthStr } });
         const Notes = response.data;
         const graphdata = [];
         for (let i = 0; i < Notes.response.data.length; i += 1) {
@@ -152,7 +152,7 @@ const fetchAsyncgraphtotalfollowers = createAsyncThunk(
         const USERTOKEN = state.user.user.accessToken;
         console.log(USERTOKEN);
         const AuthStr = `Bearer ${USERTOKEN}`;
-        const response = await apiR.get(`graph/total_followers/${dispatch.period}/${dispatch.rate}`, { headers: { Authorization: AuthStr } });
+        const response = await apiR.get(`graph/total_followers/${dispatch.BlogId}/${dispatch.period}/${dispatch.rate}`, { headers: { Authorization: AuthStr } });
         const Notes = response.data;
         const graphdata = [];
         for (let i = 0; i < Notes.response.data.length; i += 1) {

diff --git a/tumblr-replica/src/states/features/randomtag/randomtagSlice.js b/tumblr-replica/src/states/features/randomtag/randomtagSlice.js
@@ -10,7 +10,7 @@ const fetchAsyncrandomtags = createAsyncThunk(
         const response = await api.get('randomtags');
         for (let i = 0; i < response.data.response.tags.length; i += 1) {
           response.data.response.tags[i].follow = false;
-          response.data.response.tags[i].randomcolor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+          response.data.response.tags[i].randomcolor = `#${Math.floor(Math.random() * 16777000).toString(16)}`;
         }
         return response.data;
       } catch (error) {

diff --git a/tumblr-replica/src/states/features/tag/tagSlice.js b/tumblr-replica/src/states/features/tag/tagSlice.js
@@ -46,7 +46,7 @@ const DeleteAsyncfollowtags = createAsyncThunk(
         const AuthStr = `Bearer ${USERTOKEN}`;
         const response = await Axios({
           method: 'DELETE',
-          url: `${apiR}/follow_tag/${TagDescription}`,
+          url: `https://api.dev.tumbler.social/api/follow_tag/${TagDescription}`,
           headers: {
             Authorization: AuthStr,
             Accept: 'application/json',
@@ -81,7 +81,7 @@ const AddAsyncfollowtags = createAsyncThunk(
         const AuthStr = `Bearer ${USERTOKEN}`;
         const response = await Axios({
           method: 'POST',
-          url: `${apiR}/follow_tag/${TagDescription}`,
+          url: `https://api.dev.tumbler.social/api/follow_tag/${TagDescription}`,
           headers: {
             Authorization: AuthStr,
             Accept: 'application/json',