feat: prevent deleting of a post if it's the only one left

fix #86

Author: Dun-sin

package-lock.json

@@ -12,6 +12,7 @@
     "fix": "eslint --ext .ts --ext .tsx --fix ./src"
   },
   "dependencies": {
+    "@iconify/react": "^4.1.1",
     "@types/dom-to-image": "^2.6.4",
     "@uiw/react-md-editor": "^3.23.5",
     "axios": "^1.5.0",
@@ -30,7 +31,6 @@
     "threads-api": "^1.6.3"
   },
   "devDependencies": {
-    "@iconify/react": "^4.1.1",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@typescript-eslint/eslint-plugin": "^6.5.0",

package.json

@@ -58,6 +58,7 @@ export const deleteContent = (
   contentState: ContentStateType,
   dispatchContent: any
 ) => {
+  if (contentState.postContent.length < 2) return;
   const newArray = [...contentState.postContent];
 
   newArray.splice(index, 1);

src/Threads/Themes/helper.ts

@@ -83,13 +83,15 @@ export function DefaultNoNumber({ index }: NoNumberProps) {
         </div>
       </div>
 
-      <span className='absolute -right-3 top-0 z-10'>
-        <Icon
-          icon='ep:remove-filled'
-          className='h-8 w-8 text-secondary cursor-pointer'
-          onClick={() => deleteContent(index, contentState, dispatchContent)}
-        />
-      </span>
+      {contentState.postContent.length >= 2 && (
+        <span className='absolute -right-3 top-0 z-10'>
+          <Icon
+            icon='ep:remove-filled'
+            className='h-8 w-8 text-secondary cursor-pointer'
+            onClick={() => deleteContent(index, contentState, dispatchContent)}
+          />
+        </span>
+      )}
     </div>
   );
 }

src/Threads/Themes/theme/NoNumberDesign.tsx

@@ -107,13 +107,15 @@ export function DefaultNumber({ index }: NumberProps) {
           </div>
         )}
       </div>
-      <span className='absolute -right-3 top-0 z-10'>
-        <Icon
-          icon='ep:remove-filled'
-          className='h-8 w-8 text-secondary cursor-pointer'
-          onClick={() => deleteContent(index, contentState, dispatchContent)}
-        />
-      </span>
+      {contentState.postContent.length >= 2 && (
+        <span className='absolute -right-3 top-0 z-10'>
+          <Icon
+            icon='ep:remove-filled'
+            className='h-8 w-8 text-secondary cursor-pointer'
+            onClick={() => deleteContent(index, contentState, dispatchContent)}
+          />
+        </span>
+      )}
     </div>
   );
 }
@@ -186,13 +188,15 @@ export function NumberOne({ index }: NumberProps) {
           </p>
         </div>
       </div>
-      <span className='absolute -right-3 top-0 z-10'>
-        <Icon
-          icon='ep:remove-filled'
-          className='h-8 w-8 text-secondary cursor-pointer'
-          onClick={() => deleteContent(index, contentState, dispatchContent)}
-        />
-      </span>
+      {contentState.postContent.length >= 2 && (
+        <span className='absolute -right-3 top-0 z-10'>
+          <Icon
+            icon='ep:remove-filled'
+            className='h-8 w-8 text-secondary cursor-pointer'
+            onClick={() => deleteContent(index, contentState, dispatchContent)}
+          />
+        </span>
+      )}
     </div>
   );
 }