Update bring extension

extensions/bring/CHANGELOG.md

@@ -1,6 +1,15 @@
 # Bring Changelog
 
+## [Enhancements] - {PR_MERGE_DATE}
+
+- Updated the rendering logic of grid items to show non-added items only when the user enters a search term.
+- Added items are now grouped by sections.
+- Changed icons for the grid items to better represent the command actions for adding and removing items.
+- Changed the action panel title from the extension name to the list name.
+- Introduced an empty view for when the shopping list is empty.
+
 ## [Update] - 2024-02-29
+
 - Added dropdown to select the shopping list and simplify the user interface.
 - Changed aspect ratio of the grid to 4:3.
 - Simplified the `getBringApi` login function and added error handling.

extensions/bring/package.json

@@ -36,21 +36,25 @@
       "title": "Add Items to List",
       "description": "Add items to a Bring! list",
       "mode": "view",
-      "keywords": ["shopping", "bring", "groceries"]
+      "keywords": [
+        "shopping",
+        "bring",
+        "groceries"
+      ]
     }
   ],
   "dependencies": {
-    "@raycast/api": "^1.68.1",
-    "@raycast/utils": "^1.12.5",
-    "axios": "^1.6.2"
+    "@raycast/api": "^1.83.2",
+    "@raycast/utils": "^1.17.0",
+    "axios": "^1.7.7"
   },
   "devDependencies": {
-    "@raycast/eslint-config": "^1.0.6",
+    "@raycast/eslint-config": "^1.0.11",
     "@types/node": "20.8.10",
-    "@types/react": "18.2.27",
-    "eslint": "^8.51.0",
-    "prettier": "^3.2.5",
-    "typescript": "^5.2.2"
+    "@types/react": "18.3.3",
+    "eslint": "^8.57.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.2"
   },
   "scripts": {
     "build": "ray build -e dist",

extensions/bring/src/components/ItemsGrid.tsx

@@ -16,15 +16,11 @@ export interface Item {
   specification?: string;
 }
 
-const ColorBringRed = "rgb(238, 82, 79)";
-const ColorBringGreen = "rgb(79, 171, 162)";
-
 export const ItemsGrid = ({
   list,
   sections,
   searchText,
   isLoading,
-  showAddedItemsOnTop,
   onSearchTextChange,
   onAddAction,
   onRemoveAction,
@@ -34,7 +30,6 @@ export const ItemsGrid = ({
   sections: Section[];
   searchText: string;
   isLoading: boolean;
-  showAddedItemsOnTop: boolean;
   onSearchTextChange: (text: string) => void;
   onAddAction: (item: Item, specification?: string) => void;
   onRemoveAction: (item: Item) => void;
@@ -52,40 +47,32 @@ export const ItemsGrid = ({
         keywords={keywords}
         title={name}
         subtitle={specification}
-        accessory={{
-          icon: { source: Icon.CircleFilled, tintColor: isInPurchaseList ? ColorBringRed : ColorBringGreen },
-        }}
+        accessory={{ icon: isInPurchaseList ? Icon.MinusCircleFilled : Icon.PlusCircleFilled }}
         actions={
-          <ActionPanel title="Bring!">
+          <ActionPanel title={list.name}>
             {!isInPurchaseList ? (
-              <Action
-                title="Add to List"
-                onAction={() => onAddAction(item)}
-                icon={{ source: Icon.PlusCircle, tintColor: Color.Green }}
-              />
+              <Action title="Add to List" onAction={() => onAddAction(item)} icon={Icon.Plus} />
             ) : (
-              <Action
-                title="Remove from List"
-                onAction={() => onRemoveAction(item)}
-                icon={{ source: Icon.MinusCircle, tintColor: Color.Red }}
-              />
+              <Action title="Remove from List" onAction={() => onRemoveAction(item)} icon={Icon.Minus} />
             )}
           </ActionPanel>
         }
       />
     );
   }
 
-  function getAddedItems(sections: Section[]): Item[] {
-    return sections
-      .reduce((acc, value) => acc.concat(value.items), [] as Item[])
-      .filter((item) => item.isInPurchaseList);
-  }
+  const addedItems = sections.flatMap((section) => section.items.filter((item) => item.isInPurchaseList));
+
+  const addedSections = sections
+    .map((section) => ({
+      ...section,
+      items: section.items.filter((item) => item.isInPurchaseList),
+    }))
+    .filter((section) => section.items.length > 0);
 
   return (
     <Grid
-      columns={5}
-      aspectRatio="4/3"
+      columns={6}
       searchText={searchText}
       searchBarPlaceholder="I need"
       onSearchTextChange={onSearchTextChange}
@@ -95,12 +82,27 @@ export const ItemsGrid = ({
       filtering={true}
       searchBarAccessory={DropdownComponent()}
     >
-      {showAddedItemsOnTop && getAddedItems(sections).map((item) => getGridItem(item))}
-      {sections.map(({ sectionId, name: sectionName, items }) => (
-        <Grid.Section key={sectionId} title={sectionName}>
-          {items.map((item) => getGridItem(item, [sectionName]))}
-        </Grid.Section>
-      ))}
+      {searchText.length === 0 ? (
+        addedItems.length > 0 ? (
+          addedSections.map(({ sectionId, name: sectionName, items }) => (
+            <Grid.Section key={sectionId} title={sectionName}>
+              {items.map((item) => getGridItem(item, [sectionName]))}
+            </Grid.Section>
+          ))
+        ) : (
+          <Grid.EmptyView
+            icon={Icon.CheckList}
+            title="No items added"
+            description="Search for items to add to your list"
+          />
+        )
+      ) : (
+        sections.map(({ sectionId, name: sectionName, items }) => (
+          <Grid.Section key={sectionId} title={sectionName}>
+            {items.filter((item) => !item.isInPurchaseList).map((item) => getGridItem(item, [sectionName]))}
+          </Grid.Section>
+        ))
+      )}
     </Grid>
   );
 };

extensions/bring/src/index.tsx

@@ -1,10 +1,10 @@
-import { useRef, useState, useEffect, useMemo } from "react";
+import { getPreferenceValues, Grid, Icon, showToast, Toast } from "@raycast/api";
 import { useCachedPromise, useCachedState } from "@raycast/utils";
-import { Grid, Icon, getPreferenceValues, showToast, Toast } from "@raycast/api";
-import { BringAPI, BringCustomItem, BringList, Translations, BringListInfo } from "./lib/bringAPI";
-import { getIconPlaceholder, getImageUrl, getLocaleForListFromSettings } from "./lib/helpers";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Item, ItemsGrid, Section } from "./components/ItemsGrid";
-import { getOrCreateCustomSection, getSectionsFromData, getListData, getTranslationsData } from "./lib/bringService";
+import { BringAPI, BringCustomItem, BringList, BringListInfo, Translations } from "./lib/bringAPI";
+import { getListData, getOrCreateCustomSection, getSectionsFromData, getTranslationsData } from "./lib/bringService";
+import { getIconPlaceholder, getImageUrl, getLocaleForListFromSettings } from "./lib/helpers";
 
 export default function Command() {
   const bringApiRef = useRef(new BringAPI());
@@ -145,7 +145,6 @@ export default function Command() {
         sections={sections}
         searchText={search}
         isLoading={isLoadingLists || isLoadingItems}
-        showAddedItemsOnTop={search.length === 0}
         onSearchTextChange={setSearch}
         onAddAction={addToList(selectedList)}
         onRemoveAction={removeFromList(selectedList)}