Private section in profile does not show all Private vizzes

closes vizhub-core/vizhub-feedback/issues/708

packages/controllers/src/apiController/visualizationAPIController/getPrivateVisualizationsController.js

@@ -0,0 +1,26 @@
+import { GetSearchResultsPageData } from 'vizhub-use-cases';
+import { userIdFromReq } from '../../userIdFromReq';
+
+export const getPrivateVisualizationsController = (expressApp, gateways) => {
+  const getSearchResultsPageData = new GetSearchResultsPageData(gateways);
+  expressApp.post('/api/visualization/get/private', async (req, res) => {
+    try {
+      const { owner, offset = 0 } = req.body;
+      if (userIdFromReq(req) !== owner) {
+        return res
+          .status(403)
+          .json({ error: 'Getting private visualizations is allowed only for visualizations owner' });
+      }
+
+      const data = await getSearchResultsPageData.execute({
+        offset,
+        owner,
+        onlyPrivate: true
+      });
+      res.json(data);
+    } catch (error) {
+      console.log(error);
+      res.json({ error });
+    }
+  });
+};

packages/controllers/src/apiController/visualizationAPIController/getPublicVisualizationsController.js

@@ -0,0 +1,18 @@
+import { GetSearchResultsPageData } from 'vizhub-use-cases';
+
+export const getPublicVisualizationsController = (expressApp, gateways) => {
+  const getSearchResultsPageData = new GetSearchResultsPageData(gateways);
+  expressApp.post('/api/visualization/get/public', async (req, res) => {
+    try {
+      const { owner, offset = 0 } = req.body;
+      const data = await getSearchResultsPageData.execute({
+        offset,
+        owner,
+      });
+      res.json(data);
+    } catch (error) {
+      console.log(error);
+      res.json({ error });
+    }
+  });
+};

packages/controllers/src/apiController/visualizationAPIController/getGetSharedVisualizationsController.js → packages/controllers/src/apiController/visualizationAPIController/getSharedVisualizationsController.js

@@ -1,7 +1,7 @@
-import { GetSharedVisualizations } from 'vizhub-use-cases';
+import { GetSearchResultsPageData } from 'vizhub-use-cases';
 
-export const getGetSharedVisualizationsController = (expressApp, gateways) => {
-  const getSearchResultsPageData = new GetSharedVisualizations(gateways);
+export const getSharedVisualizationsController = (expressApp, gateways) => {
+  const getSearchResultsPageData = new GetSearchResultsPageData(gateways);
   expressApp.post('/api/visualization/get/shared', async (req, res) => {
     try {
       const { offset = 0, collaborators = [] } = req.body;

packages/controllers/src/apiController/visualizationAPIController/index.js

@@ -11,12 +11,16 @@ import { getThumbnailController } from './getThumbnailController';
 import { getPreviewController } from './getPreviewController';
 import { getSearchResultsPageDataController } from './getSearchResultsPageData';
 import { getForksController } from './getForksController';
-import { getGetSharedVisualizationsController } from './getGetSharedVisualizationsController';
+import { getSharedVisualizationsController } from './getSharedVisualizationsController';
+import { getPrivateVisualizationsController } from './getPrivateVisualizationsController';
+import { getPublicVisualizationsController } from './getPublicVisualizationsController';
 
 // the order of controllers matters
 export const visualizationAPIController = (expressApp, gateways) => {
   createVisualizationController(expressApp, gateways);
-  getGetSharedVisualizationsController(expressApp, gateways);
+  getSharedVisualizationsController(expressApp, gateways);
+  getPrivateVisualizationsController(expressApp, gateways);
+  getPublicVisualizationsController(expressApp, gateways);
   getVisualizationController(expressApp, gateways);
   exportVisualizationController(expressApp, gateways);
   saveVisualizationController(expressApp, gateways);

packages/database/src/constants.js

@@ -0,0 +1,3 @@
+// The number of vizzes shown in a page of content.
+// Infinite scroll pagination fetches the next page.
+export const pageSize = 100;

packages/database/src/getPageVisualizationInfos.js

@@ -6,15 +6,12 @@ import {
 } from 'vizhub-entities';
 import { DOCUMENT_INFO } from './collectionName';
 import { fetchShareDBQuery } from './fetchShareDBQuery';
+import { pageSize } from './constants';
 
 const defaultSort = VIZ_INFO_DEFAULT_SORT_OPTION.id;
 const isAllowed = (sort) =>
   !!VIZ_INFO_SORT_OPTIONS.find(({ id }) => id === sort);
 
-// The number of vizzes shown in a page of content.
-// Infinite scroll pagination fetches the next page.
-const pageSize = 100;
-
 export const getPageVisualizationInfos = (connection) => async ({
   query,
   offset,

packages/database/src/getVisualizationInfosByUserId.js

@@ -7,8 +7,6 @@ export const getVisualizationInfosByUserId = (connection) => async ({
 }) => {
   return getPageVisualizationInfos(connection)({
     ...commonProps,
-    // Show private visualizations if profile owner is currently authenticated.
-    includePrivate: owner === authenticatedUser,
     extraQueryParams: { owner },
   });
 };

packages/database/src/searchVisualizationInfos.js

@@ -1,29 +1,33 @@
 import { VisualizationInfo, VISUALIZATION_TYPE } from 'vizhub-entities';
 import { DOCUMENT_INFO } from './collectionName';
 import { fetchShareDBQuery } from './fetchShareDBQuery';
-
-// The number of vizzes shown in a page of content.
-// Infinite scroll pagination fetches the next page.
-const pageSize = 100;
+import { pageSize } from './constants';
 
 export const searchVisualizationInfos = (connection) => async ({
   query,
   collaborators,
   offset,
   inlcudePrivate,
+  onlyPrivate,
+  owner
 }) => {
   const mongoQuery = {
     documentType: VISUALIZATION_TYPE,
     $limit: pageSize,
     $skip: offset * pageSize,
     $sort: { lastUpdatedTimestamp: -1 },
     privacy: { $ne: 'private' },
+    owner
   };
 
   if (inlcudePrivate) {
     delete mongoQuery['privacy'];
   }
 
+  if(onlyPrivate) {
+    mongoQuery['privacy'] = 'private';
+  }
+
   if (query) {
     mongoQuery['$text'] = { $search: query };
   }

packages/neoFrontend/src/VizzesGrid/usePaginatedVizzes.js

@@ -6,7 +6,7 @@ import {
   useRef,
 } from 'react';
 
-const initialState = {
+const initialStateFallback = {
   visualizationInfos: [],
   isFetchingNextPage: false,
   currentPage: 0,
@@ -18,7 +18,7 @@ const initialState = {
 function reducer(state, action) {
   switch (action.type) {
     case 'RESET':
-      return initialState;
+      return action.data;
     case 'FETCH_NEXT_PAGE_REQUEST':
       return {
         ...state,
@@ -52,7 +52,7 @@ function reducer(state, action) {
 
 const noop = () => {};
 
-export const usePaginatedVizzes = (fetchData) => {
+export const usePaginatedVizzes = (fetchData, initialState = initialStateFallback) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const {
     visualizationInfos,
@@ -63,7 +63,7 @@ export const usePaginatedVizzes = (fetchData) => {
     error,
   } = state;
 
-  const reset = useCallback(() => dispatch({ type: 'RESET' }), [dispatch]);
+  const reset = useCallback(() => dispatch({ type: 'RESET', data: initialState }), [initialState, dispatch]);
 
   // change current page should not cause reset since current page stay untouched
   useEffect(() => {

packages/neoFrontend/src/featureFlags.js

@@ -36,7 +36,7 @@ export const showNeoPricing = process.env.REACT_APP_NEO_PRICING === 'true';
 
 // List of usernames who have access to
 // private viz feature.
-const core = ['ci'];
+const core = ['ci', 'stushurik'];
 
 const professors = ['Razpudding', 'sjengle', 'nazareno'];
 

packages/neoFrontend/src/pages/ProfilePage/Body/index.js

@@ -9,38 +9,38 @@ import {
   useVizzesSort,
 } from '../../../VizzesGrid/VizzesSortForm';
 import { Content, Centering } from '../../styles';
+import { ProfilePageDataContext } from '../ProfilePageDataContext';
 import { SidebarWrapper, Main, Sidebar } from '../styles';
 import { LinkWithIcon } from '../LinkWithIcon';
 import { ProfilePane } from '../ProfilePane';
-import { useProfileData } from './useProfileData';
+import { useProfileVizzes } from './useProfileVizzes';
 import { ProfileMenuBar } from './styles';
 
 export const Body = () => {
   const { me } = useContext(AuthContext);
-  const [typeOfVizzes, setTypeOfVizzes] = useState('public');
-  const profilePageData = useProfileData(me, typeOfVizzes);
+  const { user, visualizationInfos: initialVisualizationInfos } = useContext(ProfilePageDataContext);
+  const [vizType, setVizType] = useState('public');
   const {
-    user,
     visualizationInfos,
     paginate,
     usersById,
     isFetchingNextPage,
-  } = profilePageData;
+  } = useProfileVizzes({ me, vizType, initialVisualizationInfos });
 
   useEffect(() => {
     sendEvent(`event.pageview.profile.user:${user.id}`);
   }, [user]);
 
   const showPublic = useCallback(() => {
-    setTypeOfVizzes('public');
+    setVizType('public');
   }, []);
 
   const showPrivate = useCallback(() => {
-    setTypeOfVizzes('private');
+    setVizType('private');
   }, []);
 
   const showVizzesSharedWithMe = useCallback(() => {
-    setTypeOfVizzes('shared');
+    setVizType('shared');
   }, []);
 
   const [sort, handleSortChange] = useVizzesSort();
@@ -56,15 +56,15 @@ export const Body = () => {
       <SidebarWrapper>
         <Sidebar>
           <LinkWithIcon
-            active={typeOfVizzes === 'public'}
+            active={vizType === 'public'}
             icon="LockOpenSVG"
             onClick={showPublic}
           >
             Public
           </LinkWithIcon>
           {showProfileSidebar(user, me) ? (
             <LinkWithIcon
-              active={typeOfVizzes === 'private'}
+              active={vizType === 'private'}
               icon="LockSVG"
               onClick={showPrivate}
             >
@@ -73,7 +73,7 @@ export const Body = () => {
           ) : null}
           {Boolean(me) && user.id === me.id && (
             <LinkWithIcon
-              active={typeOfVizzes === 'shared'}
+              active={vizType === 'shared'}
               icon="SharedWithMeSVG"
               onClick={showVizzesSharedWithMe}
             >

packages/neoFrontend/src/pages/ProfilePage/Body/usePrivateVizFetcher.js

@@ -0,0 +1,26 @@
+import { useCallback , useEffect, useState} from 'react';
+
+export const usePrivateVizFetcher = (userId, vizType) => {
+  const [state, setState] = useState(false);
+
+  useEffect(() => {
+    if(vizType === 'private') setState(true)
+  }, [vizType])
+
+  const fetchData = useCallback(
+    async (offset) => {
+      if (!userId) return;
+
+      const response = await fetch('/api/visualization/get/private', {
+        method: 'POST',
+        mode: 'cors',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ offset, owner: userId }),
+      });
+      return await response.json();
+    },
+    [userId]
+  );
+
+  return state ? fetchData : null;
+};

packages/neoFrontend/src/pages/ProfilePage/Body/useProfileVizzes.js

@@ -0,0 +1,36 @@
+
+import { useMemo } from 'react';
+import { usePaginatedVizzes } from '../../../VizzesGrid/usePaginatedVizzes';
+import { usePublicVizFetcher } from './usePublicVizFetcher';
+import { usePrivateVizFetcher } from './usePrivateVizFetcher';
+import { useSharedWithMeVizFetcher } from './useSharedWithMeVizFetcher';
+
+export const useProfileVizzes = ({ me, vizType, initialVisualizationInfos }) => {
+  const publicInitialState = useMemo(() => {
+    return {
+      visualizationInfos: initialVisualizationInfos,
+      isFetchingNextPage: false,
+      currentPage: 1,
+      fetchedAllPages: false,
+      usersById: {[me.id]: me},
+      error: null,
+    }
+  }, [me, initialVisualizationInfos])
+
+  const publicVizFetcher = usePublicVizFetcher(me.id, vizType)
+  const publicData = usePaginatedVizzes(publicVizFetcher, publicInitialState)
+
+  const privateVizFetcher = usePrivateVizFetcher(me.id, vizType)
+  const privateData = usePaginatedVizzes(privateVizFetcher)
+
+  const sharedWithMeVizFetcher = useSharedWithMeVizFetcher(me.id, vizType)
+  const sharedData = usePaginatedVizzes(sharedWithMeVizFetcher);
+
+  if (vizType === 'shared') {
+    return sharedData;
+  } else if (vizType === 'private') {
+    return privateData
+  } else {
+    return publicData
+  }
+};

packages/neoFrontend/src/pages/ProfilePage/Body/usePublicVizFetcher.js

@@ -0,0 +1,26 @@
+import { useCallback , useEffect, useState} from 'react';
+
+export const usePublicVizFetcher = (userId, vizType) => {
+  const [state, setState] = useState(false);
+
+  useEffect(() => {
+    if(vizType === 'public') setState(true)
+  }, [vizType])
+
+  const fetchData = useCallback(
+    async (offset) => {
+      if (!userId) return;
+
+      const response = await fetch('/api/visualization/get/public', {
+        method: 'POST',
+        mode: 'cors',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ offset, owner: userId }),
+      });
+      return await response.json();
+    },
+    [userId]
+  );
+
+  return state ? fetchData : null;
+};