Release v1.12.0

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likeminds.community/likeminds-feed-reactjs",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
@@ -25,7 +25,7 @@
     "@aws-sdk/credential-providers": "3.556.0",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@likeminds.community/feed-js": "1.19.0",
+    "@likeminds.community/feed-js": "1.20.0",
     "@mui/material": "5.15.10",
     "@mui/x-date-pickers": "7.22.2",
     "@testing-library/jest-dom": "5.14.1",

core/src/assets/scss/_components.scss

@@ -19,6 +19,7 @@
   padding: 1rem;
 }
 
+
 .lm-card-title {
   font-weight: bold;
   margin-bottom: 0.5rem;

core/src/assets/scss/_responsive.scss

@@ -39,8 +39,8 @@ $breakpoint-lg: 1200px;
     flex-grow: initial;
     width: 100%;
   }
-  .lm-member, .lm-sidenav, .lm-moderation-header, .moderation-separator, .edit-permission-web-view{
-    display: none;
+  .lm-member, .lm-sidenav, .lm-moderation-header, .moderation-separator, .edit-permission-web-view, .lm-feed-upload-banner-snackbar{
+    display: none !important;
   }
   .lm-feed-wrapper__card {
     border-radius: 0;
@@ -52,6 +52,9 @@ $breakpoint-lg: 1200px;
   .moderation-mobile-tab-wrapper, .edit-permission-mobile-view, .lm-mobile-view-toggle-bar{
     display: block;
   }
+  .mobile-upload-banner{
+    display: flex;
+  }
   .lm-header-notification{
     padding-left: 3rem;
   }

core/src/assets/scss/_uploadBanner.scss

@@ -0,0 +1,81 @@
+.lm-feed-upload-banner {
+  &__uploading{
+    display: flex;
+    align-items: center;
+    gap: pxToRem(12);
+    font-size: pxToRem(16);
+    font-weight: 500;
+    color: var(--lm-feed-dark-color);
+  }
+
+  &__container {
+    max-width: pxToRem(1200);
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: pxToRem(16);
+  }
+
+  &__cancel-btn {
+    padding: pxToRem(8) pxToRem(12);
+    border: none;
+    border-radius: pxToRem(20);
+    cursor: pointer;
+    font-family: "Roboto";
+    font-size: pxToRem(16);
+    font-weight: 500;
+    color: var(--lm-feed-dark-color);
+  }
+
+  &__retry-btn {
+    padding: pxToRem(8) pxToRem(12);
+    border: none;
+    border-radius: pxToRem(20);
+    cursor: pointer;
+    font-family: "Roboto";
+    font-size: pxToRem(16);
+    font-weight: 500;
+    color: var(--lm-feed-danger-color);
+    background-color: #FEE4E2;
+    margin-right: pxToRem(12);
+  }
+
+  &__retry-cancel-btn {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   border: none;
+   border-radius: 100%;
+   padding: pxToRem(8);
+  }
+}
+
+.lm-feed-upload-banner-snackbar{
+  padding: pxtoRem(16);
+}
+
+.lm-feed-upload-banner-text {
+  font-size: pxToRem(16);
+  font-weight: 500;
+  color: var(--lm-feed-dark-color);
+}
+
+.retry-banner-img{
+  margin-right: pxToRem(8);
+}
+
+.mobile-upload-banner{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--lm-feed-light-color);
+  width: 100%;
+  padding: pxToRem(16);
+  display: none;
+}
+
+.lm-feed-mobile-upload-banner{
+  display: flex;
+}

core/src/assets/scss/styles.scss

@@ -29,6 +29,8 @@
 @import "tagging";
 // Import Create post styles
 @import "createPost";
+// Import Create upload banner styles
+@import "uploadBanner";
 
 // Import Create poll styles
 @import "createPoll";

core/src/components/LMFeedUniversalFeed.tsx

@@ -14,7 +14,7 @@ import LMFeedAllMembers from "./LMFeedAllMembers";
 import { LMFeedDataContext } from "../contexts/LMFeedDataContext";
 import LMFeedGlobalClientProviderContext from "../contexts/LMFeedGlobalClientProviderContext";
 import { LMFeedNotificationAnalytics } from "../shared/enums/lmNotificationAnalytics";
-
+import LMFeedUploadBanner from "./LMFeedUploadBanner";
 interface LMFeedUniversalFeedProps {
   followedTopics?: string[];
 }
@@ -116,6 +116,7 @@ const LMFeedUniversalFeed = ({ followedTopics }: LMFeedUniversalFeedProps) => {
   return (
     <div ref={wrapperRef} className="lm-feed-wrapper lm-d-flex">
       <div className="lm-flex-grow" id="feed-scroller">
+      <LMFeedUploadBanner/>
         <LMFeedCreatePost showStarterComponent />
         {CustomComponents?.CustomTopicDropDown ? (
           CustomComponents.CustomTopicDropDown

core/src/components/LMFeedUploadBanner.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { useLMFeedRetryPost } from "../hooks/useRetryPost";
+import { CircularProgress, Snackbar } from "@mui/material";
+import RetryIcon from "../assets/images/retry-mechanism.svg";
+import CancelIcon from "../assets/images/X.svg";
+
+const LMFeedUploadBanner: React.FC = () => {
+  const { isVisible, uploadFailed, handleRetry, handleCancel } =
+    useLMFeedRetryPost();
+
+  if (!isVisible) return null;
+
+  const postingMessage = (
+    <div className="lm-feed-upload-banner__uploading">
+      <CircularProgress size={30} />
+      <div className="lm-feed-upload-banner-text">Uploading...</div>
+    </div>
+  );
+
+  const postingAction = (
+    <React.Fragment>
+      <button
+        className="lm-feed-upload-banner__cancel-btn"
+        onClick={handleCancel}
+      >
+        Cancel
+      </button>
+    </React.Fragment>
+  );
+
+  const failedMessage = (
+    <div className="lm-feed-upload-banner-text">Upload Failed.</div>
+  );
+
+  const failedAction = (
+    <React.Fragment>
+      <button
+        className="lm-feed-upload-banner__retry-btn"
+        onClick={handleRetry}
+      >
+        <img src={RetryIcon} alt="" className="retry-banner-img" />
+        Retry
+      </button>
+      <button
+        className="lm-feed-upload-banner__retry-cancel-btn"
+        onClick={handleCancel}
+      >
+        <img src={CancelIcon} alt="cancel" className="retry-cancel-img" />
+      </button>
+    </React.Fragment>
+  );
+
+  return (
+    <>
+      <div className="lm-feed-upload-banner__container">
+        {!uploadFailed ? (
+          <div className="mobile-upload-banner">
+            <div className="lm-feed-upload-banner__uploading">
+              <CircularProgress size={30} />
+              <div className="lm-feed-upload-banner-text">Uploading...</div>
+            </div>
+            <button
+              className="lm-feed-upload-banner__cancel-btn"
+              onClick={handleCancel}
+            >
+              Cancel
+            </button>
+          </div>
+        ) : (
+          <div className="mobile-upload-banner">
+            <div className="lm-feed-upload-banner-text">Upload Failed.</div>
+            <div className="lm-feed-mobile-upload-banner">
+              <button
+                className="lm-feed-upload-banner__retry-btn"
+                onClick={handleRetry}
+              >
+                <img src={RetryIcon} alt="retry" className="retry-banner-img" />
+                Retry
+              </button>
+              <button
+                className="lm-feed-upload-banner__retry-cancel-btn"
+                onClick={handleCancel}
+              >
+                <img
+                  src={CancelIcon}
+                  alt="cancel"
+                  className="retry-cancel-img"
+                />
+              </button>
+            </div>
+          </div>
+        )}
+        {!uploadFailed ? (
+          <Snackbar
+            className="lm-feed-upload-banner-snackbar"
+            open={isVisible}
+            message={postingMessage}
+            action={postingAction}
+            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+            ContentProps={{
+              sx: {
+                backgroundColor: "#ffffff",
+                color: "#000",
+                width: "420px",
+                "& .MuiSnackbarContent-message": {
+                  margin: "8px 0 8px 8px",
+                },
+                "& .MuiSnackbarContent-action": {
+                  marginRight: "8px",
+                },
+              },
+            }}
+          />
+        ) : (
+          <Snackbar
+            className="lm-feed-upload-banner-snackbar"
+            open={isVisible}
+            message={failedMessage}
+            action={failedAction}
+            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+            ContentProps={{
+              sx: {
+                backgroundColor: "#ffffff",
+                color: "#000",
+                width: "420px",
+                "& .MuiSnackbarContent-message": {
+                  margin: "12px 0 12px 12px",
+                },
+                "& .MuiSnackbarContent-action": {
+                  marginRight: "12px",
+                },
+              },
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default LMFeedUploadBanner;

core/src/components/LMQNAFeedUniversalFeed.tsx

@@ -14,6 +14,7 @@ import LMFeedGlobalClientProviderContext from "../contexts/LMFeedGlobalClientPro
 import { LMFeedNotificationAnalytics } from "../shared/enums/lmNotificationAnalytics";
 import LMQNAFeedCreatePost from "./LMQNAFeedCreatePost";
 import LMQNAFeedPosts from "./LMQNAFeedPosts";
+import LMFeedUploadBanner from "./LMFeedUploadBanner";
 
 interface LMFeedUniversalFeedProps {
   PostView?: React.FC;
@@ -112,6 +113,7 @@ const LMQNAFeedUniversalFeed = (props: LMFeedUniversalFeedProps) => {
   return (
     <div ref={wrapperRef} className="lm-feed-wrapper lm-d-flex">
       <div className="lm-flex-grow" id="feed-scroller">
+        <LMFeedUploadBanner />
         <LMQNAFeedCreatePost showStarterComponent />
         {CustomComponents?.CustomTopicDropDown ? (
           CustomComponents.CustomTopicDropDown

core/src/components/LMSocialFeed.tsx

@@ -23,7 +23,6 @@ import {
   LMCoreCallbacks,
   LMSDKCallbacksImplementations,
 } from "../shared/LMSDKCoreCallbacks";
-import LMFeedPostCreationProgressBar from "./LMFeedPostCreationProgressBar";
 
 export interface LMFeedProps<T> extends CustomAgentProviderInterface {
   children?: React.ReactNode;
@@ -144,7 +143,7 @@ function LMSocialFeed({
                 logoutUser: logoutUser,
               }}
             >
-              <LMFeedListDataContextProvider children={children}/>
+              <LMFeedListDataContextProvider children={children} />
             </UserProviderContext.Provider>
           </GeneralContext.Provider>
         </CustomAgentProviderContext.Provider>
@@ -154,7 +153,6 @@ function LMSocialFeed({
           onClose={closeSnackbar}
           autoHideDuration={3000}
         />
-        <LMFeedPostCreationProgressBar open={openPostCreationProgressBar} />
       </GlobalClientProviderContext.Provider>
     </div>
   );

core/src/components/lmDialogs/LMFeedDeleteDialogBox.tsx

@@ -61,4 +61,5 @@ const LMFeedDeleteDialogBox = ({ mode, onClose }: LMDeletePostDialogProps) => {
   );
 };
 
+
 export default LMFeedDeleteDialogBox;

core/src/components/lmTopicFeed/LMFeedTopicSelectedBlock.tsx

@@ -36,4 +36,5 @@ export const LMFeedTopicSelectedBlock = ({
       );
     }
   }
-};
+
+};

core/src/components/lmTopicFeed/LMFeedTopicSelectionTile.tsx

@@ -29,4 +29,5 @@ const LMFeedTopicSelectionTile: React.FC<LMFeedTopicSelectionTileProps> = memo(
   },
 );
 
+
 export default LMFeedTopicSelectionTile;

core/src/components/lmTopicFeed/LMFeedTopicsTile.tsx

@@ -13,4 +13,5 @@ const LMFeedTopicsTile = ({ topic }: LMFeedTopicTileInterface) => {
   );
 };
 
+
 export default LMFeedTopicsTile;

core/src/components/lmTopicFeed/LMFeedViewTopicDropdown.tsx

@@ -360,3 +360,4 @@ const LMFeedViewTopicDropdown: React.FC<LMFeedTopicDropdownProps> = ({
 };
 
 export default LMFeedViewTopicDropdown;
+