A favorite icon will let the authenticated user add the resource to his favorites

geonode_mapstore_client/client/js/actions/gnresource.js

@@ -17,9 +17,11 @@ export const SET_RESOURCE_PERMISSIONS = 'GEONODE:SET_RESOURCE_PERMISSIONS';
 export const EDIT_TITLE_RESOURCE = 'GEONODE:EDIT_TITLE_RESOURCE';
 export const EDIT_ABSTRACT_RESOURCE = 'GEONODE:EDIT_ABSTRACT_RESOURCE';
 export const EDIT_THUMBNAIL_RESOURCE = 'GEONODE:EDIT_THUMBNAIL_RESOURCE';
+export const SET_FAVOURITE_RESOURCE = 'GEONODE:SET_FAVOURITE_RESOURCE';
 
 export const SET_SELECTED_LAYER_PERMISSIONS = "GEONODE:SET_SELECTED_LAYER_PERMISSIONS";
 
+
 /**
 * Actions for GeoNode resource
 * store information of the resource in use
@@ -174,3 +176,16 @@ export function setSelectedLayerPermissions(permissions) {
         permissions
     };
 }
+
+/**
+* Set the resource favourite field (trigger epic gnSaveFavouriteContent)
+* @memberof actions.gnresource
+* @param {bool} favourite resource data field
+*/
+export function setFavouriteResource(favourite) {
+
+    return {
+        type: SET_FAVOURITE_RESOURCE,
+        favourite
+    };
+}

geonode_mapstore_client/client/js/api/geonode/v2/index.js

@@ -243,6 +243,12 @@ export const getDocumentsByDocType = (docType = 'image', {
         }));
 };
 
+export const setFavouriteResource = (pk, method) => {
+    // eslint-disable-next-line dot-notation
+    return axios[method](parseDevHostname(`${endpoints[RESOURCES]}/${pk}/favorite`))
+        .then(({ data }) => data );
+};
+
 export const getResourceByPk = (pk) => {
     return axios.get(parseDevHostname(`${endpoints[RESOURCES]}/${pk}`))
         .then(({ data }) => data.resource);

geonode_mapstore_client/client/js/apps/gn-home.jsx

@@ -22,6 +22,7 @@ import gnsearch from '@js/reducers/gnsearch';
 import gnresource from '@js/reducers/gnresource';
 import gnsearchEpics from '@js/epics/gnsearch';
 import gnlocaleEpics from '@js/epics/gnlocale';
+import gnsaveEpics from '@js/epics/gnsave';
 
 import {
     getConfiguration,
@@ -107,7 +108,8 @@ Promise.all([
             },
             appEpics: {
                 ...gnsearchEpics,
-                ...gnlocaleEpics
+                ...gnlocaleEpics,
+                ...gnsaveEpics
             },
             geoNodeConfiguration
         });

geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx

@@ -16,7 +16,7 @@ import {
     getUserName,
     getResourceTypesInfo
 } from '@js/utils/GNSearchUtils';
-
+import debounce from 'lodash/debounce';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import url from 'url';
 import {TextEditable, ThumbnailEditable} from '@js/components/ContentsEditable/';
@@ -95,10 +95,12 @@ function DetailsPanel({
     editAbstract,
     editThumbnail,
     activeEditMode,
-    closePanel
+    closePanel,
+    favourite,
+    onFavourite,
+    isLogged
 }) {
 
-
     const [editModeTitle, setEditModeTitle] = useState(false);
     const [editModeAbstract, setEditModeAbstract] = useState(false);
 
@@ -133,6 +135,9 @@ function DetailsPanel({
         }, 700);
     };
 
+    const handleFavourite = () => {
+        onFavourite(!favourite);
+    };
 
     const types = getTypesInfo();
     const {
@@ -234,6 +239,15 @@ function DetailsPanel({
                         }
                         {
                             <div className="gn-details-panel-tools">
+                                {
+                                    isLogged &&
+                                   <Button
+                                       variant="default"
+                                       onClick={debounce(handleFavourite, 500)}>
+                                       <FaIcon stylePrefix={ favourite ? `fa` : `far`} name="star" />
+                                   </Button>
+                                }
+
                                 {detailUrl && <OverlayTrigger
                                     placement="top"
                                     overlay={(props) =>

geonode_mapstore_client/client/js/components/home/FaIcon.jsx

@@ -11,9 +11,10 @@ import React from 'react';
 function FaIcon({
     name,
     className,
-    style
+    style,
+    stylePrefix = 'fa'
 }) {
-    return <i className={`fa fa-${name}${className ? ` ${className}` : ''}`} style={style}/>;
+    return <i className={`${stylePrefix} fa-${name}${className ? ` ${className}` : ''}`} style={style}/>;
 }
 
 FaIcon.defaultProps = {};

geonode_mapstore_client/client/js/epics/gnsave.js

@@ -39,12 +39,14 @@ import {
     resourceLoading,
     setResource,
     resourceError,
-    updateResourceProperties
+    updateResourceProperties,
+    SET_FAVOURITE_RESOURCE
 } from '@js/actions/gnresource';
 import {
     getResourceByPk,
     createGeoStory,
-    updateGeoStory
+    updateGeoStory,
+    setFavouriteResource
 } from '@js/api/geonode/v2';
 import { parseDevHostname } from '@js/utils/APIUtils';
 import uuid from 'uuid';
@@ -207,8 +209,33 @@ export const gnUpdateResource = (action$, store) =>
                 .startWith(resourceLoading());
         });
 
+export const gnSaveFavouriteContent = (action$, store) =>
+    action$.ofType(SET_FAVOURITE_RESOURCE)
+        .switchMap((action) => {
+            const state = store.getState();
+            const pk = state?.gnresource?.data.pk;
+            const favourite =  action.favourite;
+            const method = (favourite) ? 'post' : 'delete';
+
+            return Observable
+                .defer(() => setFavouriteResource(pk, method))
+                .switchMap(() => {
+                    return Observable.of(
+                        updateResourceProperties({
+                            'favourite': favourite
+                        })
+                    );
+                })
+                .catch((error) => {
+                    return Observable.of(resourceError(error.data || error.message));
+                });
+
+        });
+
+
 export default {
     gnSaveContent,
     gnUpdateResource,
-    gnSaveDirectContent
+    gnSaveDirectContent,
+    gnSaveFavouriteContent
 };

geonode_mapstore_client/client/js/reducers/gnresource.js

@@ -110,7 +110,6 @@ function gnresource(state = {selectedLayerPermissions: []}, action) {
         };
     }
 
-
     case SET_SELECTED_LAYER_PERMISSIONS:
         return {
             ...state,

geonode_mapstore_client/client/js/routes/Home.jsx

@@ -34,6 +34,9 @@ import {
     updateSuggestions
 } from '@js/actions/gnsearch';
 
+import { setFavouriteResource
+} from '@js/actions/gnresource';
+
 import {
     hashLocationToHref,
     getFilterById
@@ -100,10 +103,15 @@ const ConnectedCardGrid = connect(
 
 const ConnectedDetailsPanel = connect(
     createSelector([
-        state => state?.gnresource?.loading || false
-    ], (loading) => ({
-        loading
-    }))
+        state => state?.gnresource?.loading || false,
+        state => state?.gnresource?.data?.favourite || false
+    ], (loading, favourite) => ({
+        loading,
+        favourite
+    })),
+    {
+        onFavourite: setFavouriteResource
+    }
 )(DetailsPanel);
 
 const suggestionsRequestTypes = {
@@ -369,7 +377,6 @@ function Home({
     const filterFormTop = dimensions.brandNavbarHeight + dimensions.actionNavbarNodeHeight;
 
 
-
     return (
         <div className={`gn-home gn-theme-${theme?.variant || 'light'}`}>
             <BrandNavbar
@@ -456,6 +463,7 @@ function Home({
                                     : undefined}
                                 column={ hideHero &&
                                     <ConnectedDetailsPanel
+                                        isLogged={!!user}
                                         resource={resource}
                                         filters={queryFilters}
                                         linkHref={hrefDetailPanel}

geonode_mapstore_client/client/static/mapstore/configs/localConfig.json

@@ -387,8 +387,8 @@
                         },
                         {
                             "type": "link",
-                            "href": "/favorite/list/",
-                            "labelId": "gnhome.favorites"
+                            "href": "/favourite/list/",
+                            "labelId": "gnhome.favourites"
                         },
                         {
                             "type": "link",