From eec99f8b8d8cad2d019c77d557371db9f7dc34f4 Mon Sep 17 00:00:00 2001 From: witehound Date: Mon, 2 Oct 2023 19:29:36 +0100 Subject: [PATCH 1/2] debugging useMutation --- client/.tamagui/tamagui.config.json | 766 +++++++----------- client/app/(app)/items/index.js | 7 +- client/components/item/AddItemGlobal.js | 18 +- client/components/pack/PackDetails.js | 1 + .../pack_table/DeletePackItemModal.js | 6 +- client/hooks/globalItems.js | 10 - client/hooks/globalItems/index.js | 3 + client/hooks/globalItems/useAddGlobalItems.js | 31 + .../hooks/globalItems/useDeleteGlobalItems.js | 22 + client/hooks/globalItems/useGetGlobalItems.js | 25 + client/hooks/items/index.js | 3 + client/hooks/items/useDeleteItems.js | 21 + client/hooks/items/useEditItems.js | 21 + client/hooks/items/useGetItems.js | 24 + client/hooks/packs/index.js | 1 + client/hooks/packs/useDeletePackItem.js | 16 + client/hooks/packs/useUserPacks.js | 9 + client/screens/items/index.js | 4 +- client/store/globalItemsStore.js | 16 +- client/store/itemsStore.js | 13 +- client/store/packsStore.js | 19 +- 21 files changed, 522 insertions(+), 514 deletions(-) delete mode 100644 client/hooks/globalItems.js create mode 100644 client/hooks/globalItems/index.js create mode 100644 client/hooks/globalItems/useAddGlobalItems.js create mode 100644 client/hooks/globalItems/useDeleteGlobalItems.js create mode 100644 client/hooks/globalItems/useGetGlobalItems.js create mode 100644 client/hooks/items/index.js create mode 100644 client/hooks/items/useDeleteItems.js create mode 100644 client/hooks/items/useEditItems.js create mode 100644 client/hooks/items/useGetItems.js create mode 100644 client/hooks/packs/useDeletePackItem.js diff --git a/client/.tamagui/tamagui.config.json b/client/.tamagui/tamagui.config.json index 026819a15..cf23b86de 100644 --- a/client/.tamagui/tamagui.config.json +++ b/client/.tamagui/tamagui.config.json @@ -8,6 +8,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -28,8 +29,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -479,6 +479,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "opacity": 0, @@ -799,8 +800,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "horizontal": { "true": { @@ -1141,9 +1141,8 @@ "unstyled": false }, "componentName": "Input", - "isReactNative": true, + "isReactNative": false, "isText": false, - "acceptsClassName": true, "isStyledHOC": false, "neverFlatten": true, "isHOC": true @@ -1186,10 +1185,10 @@ "unstyled": false }, "componentName": "Input", - "isReactNative": true, + "isReactNative": false, "isText": false, - "acceptsClassName": true, - "isStyledHOC": false + "isStyledHOC": false, + "neverFlatten": true } }, "Main": { @@ -1768,7 +1767,7 @@ }, "variants": { "size": { - "...": "Function" + "...size": "Function" }, "flex": { "true": { @@ -1937,8 +1936,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "isReactNative": false, @@ -2091,6 +2089,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true }, @@ -2290,7 +2289,7 @@ "unstyled": false }, "componentName": "TextArea", - "isReactNative": true, + "isReactNative": false, "isText": false, "acceptsClassName": true, "isStyledHOC": false, @@ -2338,10 +2337,11 @@ "unstyled": false }, "componentName": "TextArea", - "isReactNative": true, + "isReactNative": false, "isText": false, "acceptsClassName": true, - "isStyledHOC": false + "isStyledHOC": false, + "neverFlatten": true } }, "View": { @@ -2631,8 +2631,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -2903,8 +2902,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "componentName": "AvatarFallback", @@ -3066,8 +3064,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "componentName": "AvatarFallback", @@ -3227,8 +3224,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -3321,8 +3317,7 @@ } }, "size": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "componentName": "Avatar", @@ -3483,8 +3478,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -3788,8 +3782,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -3945,6 +3938,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -3964,12 +3958,12 @@ "unstyled": { "false": { "size": "$true", - "color": "$color", "userSelect": "none", "cursor": "pointer", "flexGrow": 0, "flexShrink": 1, - "ellipse": true + "ellipse": true, + "color": "$color" } }, "size": "Function", @@ -4278,8 +4272,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -4542,8 +4535,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -4803,8 +4795,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -5068,8 +5059,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -5332,8 +5322,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -5597,8 +5586,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -5895,8 +5883,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -6349,8 +6336,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -6617,8 +6603,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -6887,8 +6872,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -7155,8 +7139,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "unstyled": { "false": { @@ -7175,150 +7158,6 @@ "isStyledHOC": false } }, - "DialogTrigger": { - "staticConfig": { - "acceptsClassName": true, - "defaultProps": { - "display": "flex" - }, - "validStyles": { - "enterStyle": true, - "exitStyle": true, - "hoverStyle": true, - "pressStyle": true, - "focusStyle": true, - "backfaceVisibility": true, - "borderBottomEndRadius": true, - "borderBottomStartRadius": true, - "borderBottomWidth": true, - "borderLeftWidth": true, - "borderRightWidth": true, - "borderStyle": true, - "borderTopEndRadius": true, - "borderTopStartRadius": true, - "borderTopWidth": true, - "borderWidth": true, - "transform": true, - "alignContent": true, - "alignItems": true, - "alignSelf": true, - "borderEndWidth": true, - "borderStartWidth": true, - "bottom": true, - "display": true, - "end": true, - "flexBasis": true, - "flexDirection": true, - "flexWrap": true, - "gap": true, - "columnGap": true, - "rowGap": true, - "justifyContent": true, - "left": true, - "margin": true, - "marginBottom": true, - "marginEnd": true, - "marginHorizontal": true, - "marginLeft": true, - "marginRight": true, - "marginStart": true, - "marginTop": true, - "marginVertical": true, - "overflow": true, - "padding": true, - "paddingBottom": true, - "paddingEnd": true, - "paddingHorizontal": true, - "paddingLeft": true, - "paddingRight": true, - "paddingStart": true, - "paddingTop": true, - "paddingVertical": true, - "position": true, - "right": true, - "start": true, - "top": true, - "direction": true, - "shadowOffset": true, - "shadowRadius": true, - "backgroundColor": true, - "borderColor": true, - "borderBottomColor": true, - "borderTopColor": true, - "borderLeftColor": true, - "borderRightColor": true, - "borderEndColor": true, - "borderStartColor": true, - "shadowColor": true, - "color": true, - "placeholderTextColor": true, - "textDecorationColor": true, - "textShadowColor": true, - "borderRadius": true, - "borderTopLeftRadius": true, - "borderTopRightRadius": true, - "borderBottomLeftRadius": true, - "borderBottomRightRadius": true, - "width": true, - "height": true, - "minWidth": true, - "minHeight": true, - "maxWidth": true, - "maxHeight": true, - "x": true, - "y": true, - "scale": true, - "perspective": true, - "scaleX": true, - "scaleY": true, - "skewX": true, - "skewY": true, - "matrix": true, - "rotate": true, - "rotateY": true, - "rotateX": true, - "rotateZ": true, - "WebkitLineClamp": true, - "animationIterationCount": true, - "aspectRatio": true, - "borderImageOutset": true, - "borderImageSlice": true, - "borderImageWidth": true, - "columnCount": true, - "flex": true, - "flexGrow": true, - "flexOrder": true, - "flexPositive": true, - "flexShrink": true, - "flexNegative": true, - "fontWeight": true, - "gridRow": true, - "gridRowEnd": true, - "gridRowGap": true, - "gridRowStart": true, - "gridColumn": true, - "gridColumnEnd": true, - "gridColumnGap": true, - "gridColumnStart": true, - "lineClamp": true, - "opacity": true, - "order": true, - "orphans": true, - "tabSize": true, - "widows": true, - "zIndex": true, - "zoom": true, - "scaleZ": true, - "shadowOpacity": true - }, - "componentName": "DialogTrigger", - "isReactNative": false, - "isText": false, - "isStyledHOC": false, - "neverFlatten": true, - "isHOC": true - } - }, "Form": { "staticConfig": { "acceptsClassName": true, @@ -7611,7 +7450,7 @@ "staticConfig": { "acceptsClassName": true, "defaultProps": { - "display": "flex" + "alignItems": "stretch" }, "validStyles": { "enterStyle": true, @@ -7900,8 +7739,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -7995,7 +7833,8 @@ }, "unstyled": { "false": { - "size": "$true" + "size": "$true", + "y": 0 } }, "size": "Function" @@ -8018,9 +7857,8 @@ } }, "componentName": "Image", - "isReactNative": true, + "isReactNative": false, "isText": false, - "acceptsClassName": true, "isStyledHOC": false, "neverFlatten": true, "isHOC": true @@ -8031,6 +7869,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -8226,6 +8065,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -8564,8 +8404,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -8848,8 +8687,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -8985,6 +8823,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -9175,6 +9014,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -9361,6 +9201,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -9688,8 +9529,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -9952,8 +9792,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "isReactNative": false, @@ -10112,8 +9951,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "unstyled": { "false": { @@ -10283,8 +10121,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -10546,8 +10383,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -10810,8 +10646,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -11072,8 +10907,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -11333,8 +11167,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -11591,8 +11424,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -11720,10 +11552,10 @@ "scrollEnabled": true }, "componentName": "ScrollView", - "isReactNative": true, + "isReactNative": false, "isText": false, - "acceptsClassName": true, - "isStyledHOC": false + "isStyledHOC": false, + "neverFlatten": true } }, "SelectGroupFrame": { @@ -11875,8 +11707,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "componentName": "SelectGroup", @@ -12035,8 +11866,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "componentName": "SelectIcon", @@ -12051,6 +11881,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -12070,8 +11901,8 @@ "unstyled": { "false": { "size": "$true", - "color": "$color", "userSelect": "none", + "color": "$color", "ellipse": true } }, @@ -12707,8 +12538,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -12801,8 +12631,7 @@ } }, "size": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "componentName": "Square", @@ -12961,8 +12790,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -13055,8 +12883,7 @@ } }, "size": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "componentName": "Circle", @@ -13214,8 +13041,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "unstyled": { "false": { @@ -13387,8 +13213,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "open": { "true": { @@ -13572,8 +13397,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -13843,8 +13667,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "open": { "true": { @@ -14028,8 +13851,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -14298,8 +14120,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "orientation": { "horizontal": {}, @@ -14460,8 +14281,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "orientation": { "horizontal": {}, @@ -14623,8 +14443,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -14891,8 +14710,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -15158,8 +14976,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "orientation": { "horizontal": {}, @@ -15323,8 +15140,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "orientation": { "horizontal": {}, @@ -15500,8 +15316,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -15767,8 +15582,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "isReactNative": false, @@ -15924,8 +15738,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "isReactNative": false, @@ -16082,8 +15895,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" } }, "isReactNative": false, @@ -16241,8 +16053,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "unstyled": { "true": { @@ -16446,8 +16257,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -16551,7 +16361,8 @@ "defaultProps": { "alignItems": "stretch", "flexDirection": "column", - "unstyled": false + "unstyled": false, + "tag": "button" }, "validStyles": { "enterStyle": true, @@ -16694,20 +16505,20 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "unstyled": { "false": { "size": "$true", "borderRadius": 1000, - "backgroundColor": "$background", "borderWidth": 2, - "borderColor": "$background", + "borderColor": "transparent", + "backgroundColor": "$background", "focusStyle": { + "borderColor": "$borderColorFocus", "outlineColor": "$borderColorFocus", "outlineStyle": "solid", - "outlineWidth": 2 + "outlineWidth": 1 } } }, @@ -16739,7 +16550,8 @@ "defaultProps": { "alignItems": "stretch", "flexDirection": "column", - "unstyled": false + "unstyled": false, + "tag": "button" }, "validStyles": { "enterStyle": true, @@ -16882,20 +16694,20 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "unstyled": { "false": { "size": "$true", "borderRadius": 1000, - "backgroundColor": "$background", "borderWidth": 2, - "borderColor": "$background", + "borderColor": "transparent", + "backgroundColor": "$background", "focusStyle": { + "borderColor": "$borderColorFocus", "outlineColor": "$borderColorFocus", "outlineStyle": "solid", - "outlineWidth": 2 + "outlineWidth": 1 } } }, @@ -17069,8 +16881,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "backgrounded": { "true": { @@ -17169,9 +16980,6 @@ "borderRadius": 1000 } }, - "checked": { - "true": {} - }, "size": { "...size": "Function" } @@ -17335,8 +17143,7 @@ } }, "elevation": { - "...size": "Function", - ":number": "Function" + "...size": "Function" }, "unstyled": { "true": { @@ -17399,6 +17206,7 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, @@ -17417,8 +17225,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -17581,13 +17388,13 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, "fontFamily": "$body", "tag": "p", "userSelect": "auto", - "color": "$color", "size": "$true" }, "inlineWhenUnflattened": {}, @@ -17603,8 +17410,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -17764,13 +17570,13 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, "fontFamily": "$heading", "tag": "h1", "userSelect": "auto", - "color": "$color", "size": "$10", "accessibilityRole": "header", "margin": 0 @@ -17788,8 +17594,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -17949,13 +17754,13 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, "fontFamily": "$heading", "tag": "h2", "userSelect": "auto", - "color": "$color", "size": "$9", "accessibilityRole": "header", "margin": 0 @@ -17973,8 +17778,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -18134,13 +17938,13 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, "fontFamily": "$heading", "tag": "h3", "userSelect": "auto", - "color": "$color", "size": "$8", "accessibilityRole": "header", "margin": 0 @@ -18158,8 +17962,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -18319,13 +18122,13 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, "fontFamily": "$heading", "tag": "h4", "userSelect": "auto", - "color": "$color", "size": "$7", "accessibilityRole": "header", "margin": 0 @@ -18343,8 +18146,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -18504,13 +18306,13 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, "fontFamily": "$heading", "tag": "h5", "userSelect": "auto", - "color": "$color", "size": "$6", "accessibilityRole": "header", "margin": 0 @@ -18528,8 +18330,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -18689,13 +18490,13 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, "fontFamily": "$heading", "tag": "h6", "userSelect": "auto", - "color": "$color", "size": "$5", "accessibilityRole": "header", "margin": 0 @@ -18713,8 +18514,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -18874,13 +18674,13 @@ "acceptsClassName": true, "isText": true, "defaultProps": { + "color": "$color", "display": "flex", "suppressHighlighting": true, "unstyled": false, "fontFamily": "$heading", "tag": "span", "userSelect": "auto", - "color": "$color", "size": "$8", "accessibilityRole": "header", "margin": 0 @@ -18898,8 +18698,7 @@ }, "unstyled": { "false": { - "size": "$true", - "color": "$color" + "size": "$true" } }, "size": "Function", @@ -19229,6 +19028,170 @@ ], "nameToPaths": {}, "tamaguiConfig": { + "groupNames": [], + "settings": {}, + "onlyAllowShorthands": false, + "fontLanguages": [], + "animations": { + "isReactNative": true, + "animations": { + "bouncy": { + "type": "spring", + "damping": 10, + "mass": 0.9, + "stiffness": 100 + }, + "lazy": { + "type": "spring", + "damping": 20, + "stiffness": 60 + }, + "quick": { + "type": "spring", + "damping": 20, + "mass": 1.2, + "stiffness": 250 + } + }, + "View": "Component", + "Text": "Component", + "useAnimatedNumber": "Function", + "useAnimatedNumberReaction": "Function", + "useAnimatedNumberStyle": "Function", + "usePresence": "Function", + "useAnimations": "Function" + }, + "media": { + "xs": { + "maxWidth": 660 + }, + "sm": { + "maxWidth": 800 + }, + "md": { + "maxWidth": 1020 + }, + "lg": { + "maxWidth": 1280 + }, + "xl": { + "maxWidth": 1420 + }, + "xxl": { + "maxWidth": 1600 + }, + "gtXs": { + "minWidth": 661 + }, + "gtSm": { + "minWidth": 801 + }, + "gtMd": { + "minWidth": 1021 + }, + "gtLg": { + "minWidth": 1281 + }, + "short": { + "maxHeight": 820 + }, + "tall": { + "minHeight": 820 + }, + "hoverNone": { + "hover": "none" + }, + "pointerCoarse": { + "pointer": "coarse" + } + }, + "defaultTheme": "dark", + "shouldAddPrefersColorThemes": false, + "themeClassNameOnRoot": false, + "shorthands": { + "ussel": "userSelect", + "cur": "cursor", + "pe": "pointerEvents", + "col": "color", + "ff": "fontFamily", + "fos": "fontSize", + "fost": "fontStyle", + "fow": "fontWeight", + "ls": "letterSpacing", + "lh": "lineHeight", + "ta": "textAlign", + "tt": "textTransform", + "ww": "wordWrap", + "ac": "alignContent", + "ai": "alignItems", + "als": "alignSelf", + "b": "bottom", + "bc": "backgroundColor", + "bg": "backgroundColor", + "bbc": "borderBottomColor", + "bblr": "borderBottomLeftRadius", + "bbrr": "borderBottomRightRadius", + "bbw": "borderBottomWidth", + "blc": "borderLeftColor", + "blw": "borderLeftWidth", + "boc": "borderColor", + "br": "borderRadius", + "bs": "borderStyle", + "brw": "borderRightWidth", + "brc": "borderRightColor", + "btc": "borderTopColor", + "btlr": "borderTopLeftRadius", + "btrr": "borderTopRightRadius", + "btw": "borderTopWidth", + "bw": "borderWidth", + "dsp": "display", + "f": "flex", + "fb": "flexBasis", + "fd": "flexDirection", + "fg": "flexGrow", + "fs": "flexShrink", + "fw": "flexWrap", + "h": "height", + "jc": "justifyContent", + "l": "left", + "m": "margin", + "mah": "maxHeight", + "maw": "maxWidth", + "mb": "marginBottom", + "mih": "minHeight", + "miw": "minWidth", + "ml": "marginLeft", + "mr": "marginRight", + "mt": "marginTop", + "mx": "marginHorizontal", + "my": "marginVertical", + "o": "opacity", + "ov": "overflow", + "p": "padding", + "pb": "paddingBottom", + "pl": "paddingLeft", + "pos": "position", + "pr": "paddingRight", + "pt": "paddingTop", + "px": "paddingHorizontal", + "py": "paddingVertical", + "r": "right", + "shac": "shadowColor", + "shar": "shadowRadius", + "shof": "shadowOffset", + "shop": "shadowOpacity", + "t": "top", + "w": "width", + "zi": "zIndex", + "bls": "borderLeftStyle", + "brs": "borderRightStyle", + "bts": "borderTopStyle", + "bbs": "borderBottomStyle", + "bxs": "boxSizing", + "bxsh": "boxShadow", + "ox": "overflowX", + "oy": "overflowY" + }, "fonts": { "inter": { "family": "Inter, Helvetica, Arial, sans-serif", @@ -19396,169 +19359,6 @@ } } }, - "settings": {}, - "onlyAllowShorthands": false, - "fontLanguages": [], - "animations": { - "isReactNative": true, - "animations": { - "bouncy": { - "type": "spring", - "damping": 10, - "mass": 0.9, - "stiffness": 100 - }, - "lazy": { - "type": "spring", - "damping": 20, - "stiffness": 60 - }, - "quick": { - "type": "spring", - "damping": 20, - "mass": 1.2, - "stiffness": 250 - } - }, - "View": "Component", - "Text": "Component", - "useAnimatedNumber": "Function", - "useAnimatedNumberReaction": "Function", - "useAnimatedNumberStyle": "Function", - "usePresence": "Function", - "useAnimations": "Function" - }, - "media": { - "xs": { - "maxWidth": 660 - }, - "sm": { - "maxWidth": 800 - }, - "md": { - "maxWidth": 1020 - }, - "lg": { - "maxWidth": 1280 - }, - "xl": { - "maxWidth": 1420 - }, - "xxl": { - "maxWidth": 1600 - }, - "gtXs": { - "minWidth": 661 - }, - "gtSm": { - "minWidth": 801 - }, - "gtMd": { - "minWidth": 1021 - }, - "gtLg": { - "minWidth": 1281 - }, - "short": { - "maxHeight": 820 - }, - "tall": { - "minHeight": 820 - }, - "hoverNone": { - "hover": "none" - }, - "pointerCoarse": { - "pointer": "coarse" - } - }, - "defaultTheme": "dark", - "shouldAddPrefersColorThemes": false, - "themeClassNameOnRoot": false, - "shorthands": { - "ussel": "userSelect", - "cur": "cursor", - "pe": "pointerEvents", - "col": "color", - "ff": "fontFamily", - "fos": "fontSize", - "fost": "fontStyle", - "fow": "fontWeight", - "ls": "letterSpacing", - "lh": "lineHeight", - "ta": "textAlign", - "tt": "textTransform", - "ww": "wordWrap", - "ac": "alignContent", - "ai": "alignItems", - "als": "alignSelf", - "b": "bottom", - "bc": "backgroundColor", - "bg": "backgroundColor", - "bbc": "borderBottomColor", - "bblr": "borderBottomLeftRadius", - "bbrr": "borderBottomRightRadius", - "bbw": "borderBottomWidth", - "blc": "borderLeftColor", - "blw": "borderLeftWidth", - "boc": "borderColor", - "br": "borderRadius", - "bs": "borderStyle", - "brw": "borderRightWidth", - "brc": "borderRightColor", - "btc": "borderTopColor", - "btlr": "borderTopLeftRadius", - "btrr": "borderTopRightRadius", - "btw": "borderTopWidth", - "bw": "borderWidth", - "dsp": "display", - "f": "flex", - "fb": "flexBasis", - "fd": "flexDirection", - "fg": "flexGrow", - "fs": "flexShrink", - "fw": "flexWrap", - "h": "height", - "jc": "justifyContent", - "l": "left", - "m": "margin", - "mah": "maxHeight", - "maw": "maxWidth", - "mb": "marginBottom", - "mih": "minHeight", - "miw": "minWidth", - "ml": "marginLeft", - "mr": "marginRight", - "mt": "marginTop", - "mx": "marginHorizontal", - "my": "marginVertical", - "o": "opacity", - "ov": "overflow", - "p": "padding", - "pb": "paddingBottom", - "pl": "paddingLeft", - "pos": "position", - "pr": "paddingRight", - "pt": "paddingTop", - "px": "paddingHorizontal", - "py": "paddingVertical", - "r": "right", - "shac": "shadowColor", - "shar": "shadowRadius", - "shof": "shadowOffset", - "shop": "shadowOpacity", - "t": "top", - "w": "width", - "zi": "zIndex", - "bls": "borderLeftStyle", - "brs": "borderRightStyle", - "bts": "borderTopStyle", - "bbs": "borderBottomStyle", - "bxs": "boxSizing", - "bxsh": "boxShadow", - "ox": "overflowX", - "oy": "overflowY" - }, "themes": { "dark": { "color1": "#050505", diff --git a/client/app/(app)/items/index.js b/client/app/(app)/items/index.js index 063fb0aef..134d9f038 100644 --- a/client/app/(app)/items/index.js +++ b/client/app/(app)/items/index.js @@ -13,7 +13,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { getItemsGlobal } from '../../../store/globalItemsStore'; import { Stack } from 'expo-router'; import Head from 'expo-router/head'; -import { useFetchGlobalItems } from '~/hooks/globalItems'; +import useGetGlobalItems from '~/hooks/globalItems/useGetGlobalItems'; export default function Items() { const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false); @@ -27,10 +27,7 @@ export default function Items() { const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } = UseTheme(); - const { data, isLoading, isError, refetch } = useFetchGlobalItems( - limit, - page, - ); + const { data, isLoading, isError, refetch } = useGetGlobalItems(limit, page); console.log('🚀 ~ file: index.js:32 ~ Items ~ data:', data); // const data = useSelector((state) => state.globalItems); diff --git a/client/components/item/AddItemGlobal.js b/client/components/item/AddItemGlobal.js index 14383f232..111ad35ca 100644 --- a/client/components/item/AddItemGlobal.js +++ b/client/components/item/AddItemGlobal.js @@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { addItemsGlobal, addItemOffline } from '../../store/globalItemsStore'; import { addOfflineRequest } from '../../store/offlineQueue'; import { ItemForm } from './ItemForm'; // assuming you moved the form related code to a separate component +import useAddGlobalItems from '~/hooks/globalItems/useAddGlobalItems'; export const AddItemGlobal = ({ setIsAddItemModalOpen, @@ -46,15 +47,14 @@ export const AddItemGlobal = ({ dispatch(addItemOffline({ ...item, weight: Number(item.weight) })); dispatch(addOfflineRequest({ method: 'addGlobalItem', data: item })); } else { - dispatch( - addItemsGlobal({ - name, - weight, - quantity, - type: categoryType, - unit, - }), - ); + useAddGlobalItems({ + name, + weight, + quantity, + type: categoryType, + unit, + }); + setRefetch(refetch !== true); } diff --git a/client/components/pack/PackDetails.js b/client/components/pack/PackDetails.js index c3c36db3e..144386953 100644 --- a/client/components/pack/PackDetails.js +++ b/client/components/pack/PackDetails.js @@ -43,6 +43,7 @@ export function PackDetails() { const { data: userPacks, isLoading: isUserPacksLoading } = useUserPacks(userId); + const { data: currentPack, isLoading, diff --git a/client/components/pack_table/DeletePackItemModal.js b/client/components/pack_table/DeletePackItemModal.js index b2774f702..f052eda9a 100644 --- a/client/components/pack_table/DeletePackItemModal.js +++ b/client/components/pack_table/DeletePackItemModal.js @@ -8,6 +8,8 @@ import { deleteItemOffline, } from '../../store/globalItemsStore'; import { addOfflineRequest } from '../../store/offlineQueue'; +import useDeleteGlobalItems from '~/hooks/globalItems/useDeleteGlobalItems'; +import { useDeletePackItem } from '~/hooks/packs'; export const DeletePackItemModal = ({ itemId, @@ -40,10 +42,10 @@ export const DeletePackItemModal = ({ */ const deleteItemHandler = () => { if (pack) { - dispatch(deletePackItem({ itemId, currentPackId: pack._id })); + useDeletePackItem({ itemId, currentPackId: pack._id }); } else { if (isConnected) { - dispatch(deleteGlobalItem(itemId)); + useDeleteGlobalItems(itemId); setRefetch(refetch !== true); } else { dispatch(deleteItemOffline(itemId)); diff --git a/client/hooks/globalItems.js b/client/hooks/globalItems.js deleted file mode 100644 index cf1d5a531..000000000 --- a/client/hooks/globalItems.js +++ /dev/null @@ -1,10 +0,0 @@ -import { queryTrpc } from '../trpc'; - -export const useFetchGlobalItems = (limit, page) => { - const { isLoading, isError, data, refetch } = - queryTrpc.getItemsGlobally.useQuery({ - limit: Number(limit), - page: Number(page), - }); - return { isLoading, isError, data, refetch }; -}; diff --git a/client/hooks/globalItems/index.js b/client/hooks/globalItems/index.js new file mode 100644 index 000000000..f75d1fe96 --- /dev/null +++ b/client/hooks/globalItems/index.js @@ -0,0 +1,3 @@ +export * from './useGetGlobalItems'; +export * from './useDeleteGlobalItems'; +export * from './useAddGlobalItems'; diff --git a/client/hooks/globalItems/useAddGlobalItems.js b/client/hooks/globalItems/useAddGlobalItems.js new file mode 100644 index 000000000..8a90d323f --- /dev/null +++ b/client/hooks/globalItems/useAddGlobalItems.js @@ -0,0 +1,31 @@ +import { queryTrpc } from '../../trpc'; +import { store } from '../../store/store'; +import { addItemsGlobalReducer } from '../../store/globalItemsStore'; + +const useAddGlobalItems = (newItem) => { + const enabled = !!newItem; + + const mutation = queryTrpc.addItemGlobal.useMutation(); + + const { data, isLoading, error, refetch } = mutation.mutate( + { + name: newItem.name, + packId: newItem.packId, + quantity: newItem.quantity, + type: newItem.type, + weight: newItem.weight, + unit: newItem.unit, + }, + { + enabled, + }, + ); + + if (data) { + store.dispatch(addItemsGlobalReducer(data)); + } + + return { data, error, isLoading, refetch }; +}; + +export default useAddGlobalItems; diff --git a/client/hooks/globalItems/useDeleteGlobalItems.js b/client/hooks/globalItems/useDeleteGlobalItems.js new file mode 100644 index 000000000..71a7e8d60 --- /dev/null +++ b/client/hooks/globalItems/useDeleteGlobalItems.js @@ -0,0 +1,22 @@ +import { queryTrpc } from '../../trpc'; +import { store } from '../../store/store'; +import { deleteItemsGlobalReducer } from '../../store/globalItemsStore'; + +const useDeleteGlobalItems = (item) => { + const { data, isLoading, error, refetch } = queryTrpc.deleteGlobalItem + .useMutation() + .mutate( + { itemId: item }, + { + enabled: !!item, + }, + ); + + if (!error) { + store.dispatch(deleteItemsGlobalReducer(data)); + } + + return { data, error, isLoading, refetch }; +}; + +export default useDeleteGlobalItems; diff --git a/client/hooks/globalItems/useGetGlobalItems.js b/client/hooks/globalItems/useGetGlobalItems.js new file mode 100644 index 000000000..3bc04b122 --- /dev/null +++ b/client/hooks/globalItems/useGetGlobalItems.js @@ -0,0 +1,25 @@ +import { queryTrpc } from '../../trpc'; +import { store } from '../../store/store'; +import { setGlobalItems } from '../../store/globalItemsStore'; + +const useGetGlobalItems = (limit, page) => { + const { data, isLoading, error, refetch } = + queryTrpc.getItemsGlobally.useQuery( + { + limit, + page, + }, + { + refetchOnWindowFocus: false, + keepPreviousData: true, + }, + ); + + if (data) { + store.dispatch(setGlobalItems(data)); + } + + return { data, error, isLoading, refetch }; +}; + +export default useGetGlobalItems; diff --git a/client/hooks/items/index.js b/client/hooks/items/index.js new file mode 100644 index 000000000..1702b3cf5 --- /dev/null +++ b/client/hooks/items/index.js @@ -0,0 +1,3 @@ +export * from './useGetItems'; +export * from './useDeleteItems'; +export * from './useEditItems'; diff --git a/client/hooks/items/useDeleteItems.js b/client/hooks/items/useDeleteItems.js new file mode 100644 index 000000000..4e2499750 --- /dev/null +++ b/client/hooks/items/useDeleteItems.js @@ -0,0 +1,21 @@ +import { queryTrpc } from '../../trpc'; +import { store } from '../../store/store'; +import { deleteItemReducer } from '../../store/itemsStore'; + +const useDeleteItems = ({ itemId }) => { + const { data, isLoading, error } = queryTrpc.deleteItem.useMutation().mutate( + { itemId }, + { + enabled: !!itemId, + refetchOnWindowFocus: false, + keepPreviousData: true, + }, + ); + if (data) { + store.dispatch(deleteItemReducer(data)); + } + + return { data, error, isLoading }; +}; + +export default useDeleteItems; diff --git a/client/hooks/items/useEditItems.js b/client/hooks/items/useEditItems.js new file mode 100644 index 000000000..fd2df4125 --- /dev/null +++ b/client/hooks/items/useEditItems.js @@ -0,0 +1,21 @@ +import { queryTrpc } from '../../trpc'; +import { store } from '../../store/store'; +import { editItemReducer } from '../../store/itemsStore'; + +const useEditItems = (newItem) => { + const { data, isLoading, error } = queryTrpc.editItem.useMutation().mutate({ + _id: newItem._id, + name: newItem.name, + quantity: newItem.quantity, + type: newItem.type, + weight: newItem.weight, + unit: newItem.unit, + }); + if (data) { + store.dispatch(editItemReducer(data)); + } + + return { data, error, isLoading }; +}; + +export default useEditItems; diff --git a/client/hooks/items/useGetItems.js b/client/hooks/items/useGetItems.js new file mode 100644 index 000000000..988e98934 --- /dev/null +++ b/client/hooks/items/useGetItems.js @@ -0,0 +1,24 @@ +import { queryTrpc } from '../../trpc'; +import { store } from '../../store/store'; +import { setItems } from '../../store/itemsStore'; + +const useGetItems = ({ packId }) => { + const { data, isLoading, error } = queryTrpc.getItems.useQuery( + { + packId, + }, + { + enabled: !!packId, + refetchOnWindowFocus: false, + keepPreviousData: true, + }, + ); + + if (data) { + store.dispatch(setItems(data)); + } + + return { data, error, isLoading }; +}; + +export default useGetItems; diff --git a/client/hooks/packs/index.js b/client/hooks/packs/index.js index 6bd7b5a61..1921782ca 100644 --- a/client/hooks/packs/index.js +++ b/client/hooks/packs/index.js @@ -1,3 +1,4 @@ export * from './useAddNewPack'; export * from './useUserPacks'; export * from './useFetchSinglePack'; +export * from './useDeletePackItem'; diff --git a/client/hooks/packs/useDeletePackItem.js b/client/hooks/packs/useDeletePackItem.js new file mode 100644 index 000000000..b6b16a209 --- /dev/null +++ b/client/hooks/packs/useDeletePackItem.js @@ -0,0 +1,16 @@ +import { queryTrpc } from '../../trpc'; +import { store } from '../../store/store'; +import { deletePackItemReducer } from '../../store/packsStore'; + +export const useDeletePackItem = (item) => { + const { data, isLoading, error, refetch } = queryTrpc.deleteItem + .useMutation() + .mutate({ + itemId: item.itemId, + packId: item.currentPackId, + }); + if (!error) { + store.dispatch(deletePackItemReducer(data)); + } + return { mutation }; +}; diff --git a/client/hooks/packs/useUserPacks.js b/client/hooks/packs/useUserPacks.js index 09ba019e4..20f5a5c5f 100644 --- a/client/hooks/packs/useUserPacks.js +++ b/client/hooks/packs/useUserPacks.js @@ -1,8 +1,12 @@ import { queryTrpc } from '../../trpc'; +import { store } from '../../store/store'; +import { setUserPacks } from '../../store/packsStore'; +import { useState } from 'react'; export const useUserPacks = (ownerId, queryString) => { // If ownerId is not provided, don’t run the query. const enabled = !!ownerId; + const [isSet, setIsSet] = useState(false); // Leverage the query hook provided by tRPC const { data, error, isLoading, refetch } = queryTrpc.getPacks.useQuery( @@ -17,5 +21,10 @@ export const useUserPacks = (ownerId, queryString) => { // Extract packs or set an empty array if data is undefined. const packs = data?.packs || []; + if (packs && !isSet) { + store.dispatch(setUserPacks(packs)); + setIsSet(true); + } + return { data: packs, error, isLoading, refetch }; }; diff --git a/client/screens/items/index.js b/client/screens/items/index.js index e5eb90a76..90480af8a 100644 --- a/client/screens/items/index.js +++ b/client/screens/items/index.js @@ -12,6 +12,7 @@ import { getItemsGlobal } from '../../store/globalItemsStore'; import { Stack } from 'expo-router'; import { executeOfflineRequests } from '../../store/offlineQueue'; import useCustomStyles from '~/hooks/useCustomStyles'; +import useGetGlobalItems from '~/hooks/globalItems/useGetGlobalItems'; // import { checkNetworkConnected } from '~/utils/netInfo'; export default function Items() { @@ -37,8 +38,7 @@ export default function Items() { }, []); useEffect(() => { - if (isConnected && requests.length == 0) - dispatch(getItemsGlobal({ limit, page })); + if (isConnected && requests.length == 0) useGetGlobalItems({ limit, page }); }, [limit, page, refetch, isConnected]); return ( diff --git a/client/store/globalItemsStore.js b/client/store/globalItemsStore.js index a19edf9e4..3192daba6 100644 --- a/client/store/globalItemsStore.js +++ b/client/store/globalItemsStore.js @@ -76,6 +76,14 @@ const itemsSlice = createSlice({ error: null, }), reducers: { + setGlobalItems: itemsAdapter.setAll, + addItemsGlobalReducer: (state, action) => { + itemsAdapter.addOne(state, { ...action.payload }); + }, + deleteItemsGlobalReducer: (state, action) => { + itemsAdapter.removeOne(state, action.payload._id); + }, + deleteItemOffline: (state, action) => { return { ...state, @@ -143,6 +151,12 @@ const itemsSlice = createSlice({ }, }); -export const { deleteItemOffline, addItemOffline } = itemsSlice.actions; +export const { + deleteItemOffline, + addItemOffline, + setGlobalItems, + addItemsGlobalReducer, + deleteItemsGlobalReducer, +} = itemsSlice.actions; export default itemsSlice.reducer; diff --git a/client/store/itemsStore.js b/client/store/itemsStore.js index 35d490fd0..899eb0272 100644 --- a/client/store/itemsStore.js +++ b/client/store/itemsStore.js @@ -53,7 +53,15 @@ const initialState = itemsAdapter.getInitialState({ const itemsSlice = createSlice({ name: 'items', initialState, - reducers: {}, + reducers: { + setItems: itemsAdapter.setAll, + deleteItemReducer: (state, action) => { + itemsAdapter.removeOne(state, action.payload.id); + }, + editItemReducer: (state, action) => { + itemsAdapter.upsertOne(state, action.payload); + }, + }, extraReducers: (builder) => { builder .addCase(deleteItem.pending, (state) => { @@ -98,4 +106,7 @@ const itemsSlice = createSlice({ }, }); +export const { setItems, editItemReducer, deleteItemReducer } = + itemsSlice.actions; + export default itemsSlice.reducer; diff --git a/client/store/packsStore.js b/client/store/packsStore.js index e9fd1ff8a..5993a2278 100644 --- a/client/store/packsStore.js +++ b/client/store/packsStore.js @@ -173,6 +173,22 @@ const packsSlice = createSlice({ closeModal: (state) => { state.isOpenEditModal = false; }, + setUserPacks: packsAdapter.setAll, + deletePackItemReducer: (state, action) => { + const { itemId, currentPackId } = action.meta.arg; + + const existing = state.entities[currentPackId]; + if (!existing) { + return; + } + + const updatedItems = existing.items.filter((item) => item._id !== itemId); + + packsAdapter.updateOne(state, { + id: currentPackId, + changes: { items: updatedItems }, + }); + }, }, extraReducers: (builder) => { builder @@ -416,6 +432,7 @@ export const { selectAll: selectAllPacks, selectById: selectPackById } = export const selectIsLoading = (state) => state.packs.isLoading; export const selectError = (state) => state.packs.error; -export const { openModal, closeModal } = packsSlice.actions; +export const { openModal, closeModal, setUserPacks, deletePackItemReducer } = + packsSlice.actions; export default packsSlice.reducer; From f2003de80327e8156c92d08d02d160472a410d1a Mon Sep 17 00:00:00 2001 From: witehound Date: Mon, 2 Oct 2023 23:24:36 +0100 Subject: [PATCH 2/2] packs --- client/components/EditableText/index.js | 11 +- client/components/ScoreContainer.js | 14 ++- client/components/Water.js | 12 ++- client/components/item/AddItem.js | 58 +++++++--- client/components/pack/AddPack.js | 15 ++- .../pack_table/DeletePackItemModal.js | 29 ++++- client/components/pack_table/Table.tsx | 5 +- client/components/user/UserDataCard.js | 14 ++- .../hooks/globalItems/useDeleteGlobalItems.js | 24 ++--- client/hooks/packs/index.js | 35 +++++- client/hooks/packs/useAddNewPack.js | 6 +- client/hooks/packs/useDeletePackItem.js | 16 --- client/hooks/packs/useUserPacks.js | 2 +- client/hooks/useMutation.js | 9 ++ client/store/packsStore.js | 100 ++++++++++++++++-- 15 files changed, 284 insertions(+), 66 deletions(-) delete mode 100644 client/hooks/packs/useDeletePackItem.js create mode 100644 client/hooks/useMutation.js diff --git a/client/components/EditableText/index.js b/client/components/EditableText/index.js index 0a03fa4d8..17dd562c1 100644 --- a/client/components/EditableText/index.js +++ b/client/components/EditableText/index.js @@ -4,6 +4,8 @@ import { theme } from '../../theme'; import { useDispatch } from 'react-redux'; import { updatePack } from '../../store/packsStore'; import { editTrip } from '../../store/tripsStore'; +import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs'; +import { useMutation } from '~/hooks/useMutation'; export const EditableInput = ({ data, @@ -14,6 +16,10 @@ export const EditableInput = ({ }) => { const [headerTitle, setHeaderTitle] = useState(title || ''); const dispatch = useDispatch(); + const { mutation, onSuccesMutation } = useMutation( + PACKQUERYS.editItem, + PACKREDUCERS.updatePack, + ); return ( + onSuccesMutation({ ...data, itemId, packId: pack._id }), + }); dispatch(updatePack(packDetails)); } else { const tripDetails = { diff --git a/client/components/ScoreContainer.js b/client/components/ScoreContainer.js index f430f4f9e..b2600bb5f 100644 --- a/client/components/ScoreContainer.js +++ b/client/components/ScoreContainer.js @@ -4,9 +4,10 @@ import { Box, Button, VStack, Text, HStack, View } from 'native-base'; import { theme } from '../theme'; import useTheme from '../hooks/useTheme'; import { useDispatch } from 'react-redux'; -import { scorePack } from '../store/packsStore'; import { Svg, Circle, Path, G, Text as SvgText } from 'react-native-svg'; import useCustomStyles from '~/hooks/useCustomStyles'; +import { useMutation } from '~/hooks/useMutation'; +import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs'; const ScoreProgressChart = ({ score, size = 150, strokeWidth = 10 }) => { if (!score) return null; @@ -157,6 +158,10 @@ const GradingPieChart = ({ scores, size = 150, strokeWidth = 10 }) => { export default function ScoreContainer({ type, data, isOwner }) { const dispatch = useDispatch(); + const { mutation, onSuccesMutation } = useMutation( + PACKQUERYS.scorePack, + PACKREDUCERS.scorePack, + ); const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } = useTheme(); const styles = useCustomStyles(loadStyles); @@ -188,7 +193,12 @@ export default function ScoreContainer({ type, data, isOwner }) { const handleScoreClick = () => { if (type === 'pack') { - dispatch(scorePack(id)); + mutation.mutate( + { packId: id }, + { + onSuccess: (data) => onSuccesMutation(data), + }, + ); } else if (type === 'trip') { dispatch(scoreTrip(id)); } diff --git a/client/components/Water.js b/client/components/Water.js index 804dfc13f..0283cc24f 100644 --- a/client/components/Water.js +++ b/client/components/Water.js @@ -6,11 +6,19 @@ import { useDispatch } from 'react-redux'; import { addPackItem } from '../store/packsStore'; import useCustomStyles from '~/hooks/useCustomStyles'; +import { useMutation } from '~/hooks/useMutation'; +import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs'; + export default function Water({ currentPack, setWaterItem }) { const [waterWeight, setWaterWeight] = useState(0); const dispatch = useDispatch(); const styles = useCustomStyles(loadStyles); + const { mutation, onSuccesMutation } = useMutation( + PACKQUERYS.addItem, + PACKREDUCERS.addItem, + ); + /** * Update the water weight. * @@ -36,7 +44,9 @@ export default function Water({ currentPack, setWaterItem }) { type: ItemCategoryEnum.WATER, }; - dispatch(addPackItem(data)); + mutation.mutate(data, { + onSuccess: (data) => onSuccesMutation(data), + }); }; return ( diff --git a/client/components/item/AddItem.js b/client/components/item/AddItem.js index fe2e220f3..58132b5c4 100644 --- a/client/components/item/AddItem.js +++ b/client/components/item/AddItem.js @@ -1,13 +1,9 @@ import { useEffect, useState } from 'react'; import { Box, Input, Button, Text } from 'native-base'; import { useDispatch, useSelector } from 'react-redux'; -import { - addPackItem, - editPackItem, - editItemsGlobalAsDuplicate, -} from '../../store/packsStore'; import { ItemForm } from './ItemForm'; // assuming you moved the form related code to a separate component import { ItemCategoryEnum } from '../../constants/itemCategory'; +import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs'; export const AddItem = ({ _id, @@ -24,6 +20,24 @@ export const AddItem = ({ setRefetch = () => {}, }) => { const dispatch = useDispatch(); + const { + mutation: editItemsGlobalAsDuplicateMutation, + onSuccesMutation: editItemsGlobalAsDuplicateOnSuccessMutation, + } = useMutation( + PACKQUERYS.editGlobalItemAsDuplicate, + PACKREDUCERS.editGlobalItemAsDuplicate, + ); + + const { + mutation: editItemsMutation, + onSuccesMutation: editItemsOnSuccessMutation, + } = useMutation(PACKQUERYS.editItem, PACKREDUCERS.editItem); + + const { + mutation: addPackItemsMutation, + onSuccesMutation: addPackItemsOnSuccessMutation, + } = useMutation(PACKQUERYS.addItem, PACKREDUCERS.addItem); + const isLoading = useSelector((state) => state.packs.isLoading); // Moved the state up to the parent component @@ -56,9 +70,8 @@ export const AddItem = ({ if (isEdit) { if (packId && initialData.global) { console.log('editing', packId); - - dispatch( - editItemsGlobalAsDuplicate({ + editItemsGlobalAsDuplicateMutation.mutate( + { itemId: _id, packId, name, @@ -66,27 +79,39 @@ export const AddItem = ({ quantity, unit, type: categoryType, - }), + }, + { + onSuccess: (data) => + editItemsGlobalAsDuplicateOnSuccessMutation({ + ...data, + itemId: _id, + packId: pack._id, + }), + }, ); closeModalHandler(); } else { - dispatch( - editPackItem({ + editItemsMutation.mutate( + { name, weight, quantity, unit, type: categoryType, _id: initialData._id, - }), + }, + { + onSuccess: (data) => editItemsOnSuccessMutation(data), + }, ); + setPage(1); closeModalHandler(); setRefetch(refetch !== true); } } else { - dispatch( - addPackItem({ + addPackItemsMutation.mutate( + { name, weight, quantity, @@ -94,7 +119,10 @@ export const AddItem = ({ unit, _id, packId, - }), + }, + { + onSuccess: (data) => addPackItemsOnSuccessMutation(data), + }, ); setIsAddItemModalOpen(false); setRefetch(refetch !== true); diff --git a/client/components/pack/AddPack.js b/client/components/pack/AddPack.js index 8bf299d78..be8095664 100644 --- a/client/components/pack/AddPack.js +++ b/client/components/pack/AddPack.js @@ -9,7 +9,8 @@ import { useSelector, useDispatch } from 'react-redux'; import { CustomModal } from '../modal'; import useTheme from '../../hooks/useTheme'; import useCustomStyles from '~/hooks/useCustomStyles'; -import { useAddNewPack } from '~/hooks/packs'; +import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs'; +import { useMutation } from '@tanstack/react-query'; export const AddPack = () => { const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } = @@ -30,7 +31,10 @@ export const AddPack = () => { const error = useSelector((state) => state.packs.error); const isError = error !== null; - const { mutation } = useAddNewPack(); + const { + mutation: addPackMutation, + onSuccesMutation: addPackOnSuccesMutation, + } = useMutation(PACKQUERYS.addPack, PACKREDUCERS.addPack); /** * Handles the addition of a pack. * @@ -39,7 +43,12 @@ export const AddPack = () => { * @return {void} */ const handleAddPack = () => { - dispatch(addPack({ name, owner_id: user?._id, is_public: isPublic })); + addPackMutation.mutate( + { name, owner_id: user?._id, is_public: isPublic }, + { + onSuccess: (data) => addPackOnSuccesMutation(data), + }, + ); setName(''); }; diff --git a/client/components/pack_table/DeletePackItemModal.js b/client/components/pack_table/DeletePackItemModal.js index f052eda9a..4e0bddeec 100644 --- a/client/components/pack_table/DeletePackItemModal.js +++ b/client/components/pack_table/DeletePackItemModal.js @@ -9,7 +9,8 @@ import { } from '../../store/globalItemsStore'; import { addOfflineRequest } from '../../store/offlineQueue'; import useDeleteGlobalItems from '~/hooks/globalItems/useDeleteGlobalItems'; -import { useDeletePackItem } from '~/hooks/packs'; +import { PACKQUERYS, PACKREDUCERS, useDeletePackItem } from '~/hooks/packs'; +import { useMutation } from '~/hooks/useMutation'; export const DeletePackItemModal = ({ itemId, @@ -24,6 +25,16 @@ export const DeletePackItemModal = ({ setIsModalOpen(false); }; + const { mutation: deletePackItemMutation, onSuccesMutation } = useMutation( + PACKQUERYS.deleteItem, + PACKREDUCERS.deleteItem, + ); + + const { + mutation: deleteGlobalItemsMutation, + onSuccesMutation: deleteGlobalItemsonSuccesMutation, + } = useDeleteGlobalItems(); + /** * Sets the value of `isModalOpen` to `true`. * @@ -42,10 +53,22 @@ export const DeletePackItemModal = ({ */ const deleteItemHandler = () => { if (pack) { - useDeletePackItem({ itemId, currentPackId: pack._id }); + deletePackItemMutation.mutate( + { itemId, packId: pack._id }, + { + onSuccess: (data) => + onSuccesMutation({ ...data, itemId, packId: pack._id }), + }, + ); } else { if (isConnected) { - useDeleteGlobalItems(itemId); + deleteGlobalItemsMutation.mutate( + { itemId: item }, + { + onSuccess: (data) => deleteGlobalItemsonSuccesMutation(data), + }, + ); + setRefetch(refetch !== true); } else { dispatch(deleteItemOffline(itemId)); diff --git a/client/components/pack_table/Table.tsx b/client/components/pack_table/Table.tsx index beed3bc94..1dcaded98 100644 --- a/client/components/pack_table/Table.tsx +++ b/client/components/pack_table/Table.tsx @@ -16,6 +16,8 @@ import { PackOptions } from '../PackOptions'; import CustomButton from '../custombutton'; import ItemPicker from '../Picker'; import useCustomStyles from '~/hooks/useCustomStyles'; +import { useMutation } from '~/hooks/useMutation'; +import { PACKQUERYS } from '~/hooks/packs'; const WeightUnitDropdown = ({ value, onChange }) => { return ( @@ -225,6 +227,7 @@ export const TableContainer = ({ }) => { const user = useSelector((state) => state.auth.user); const dispatch = useDispatch(); + const { mutation } = useMutation(PACKQUERYS.duplicatePublicPack); const styles = useCustomStyles(loadStyles); let ids = []; if (currentPack?.items) { @@ -238,7 +241,7 @@ export const TableContainer = ({ ownerId: user._id, items: checkedItems, }; - dispatch(duplicatePackItem(data)); + mutation.mutate(data); }; const [weightUnit, setWeightUnit] = useState('g'); diff --git a/client/components/user/UserDataCard.js b/client/components/user/UserDataCard.js index 6fcb4072e..229daad76 100644 --- a/client/components/user/UserDataCard.js +++ b/client/components/user/UserDataCard.js @@ -23,6 +23,9 @@ import { Link } from 'expo-router'; import { truncateString } from '../../utils/truncateString'; import { useEffect } from 'react'; +import { useMutation } from '~/hooks/useMutation'; +import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs'; + const UserDataCard = ({ type, // "pack" or "trip" destination, @@ -39,6 +42,10 @@ const UserDataCard = ({ differentUser, }) => { const dispatch = useDispatch(); + const { mutation, onSuccesMutation } = useMutation( + PACKQUERYS.editPack, + PACKREDUCERS.editPack, + ); /** * Updates the state at the specified index with the given boolean value. @@ -64,7 +71,12 @@ const UserDataCard = ({ const handleChangeStatus = (index) => { updateState(index, true); if (type === 'pack') { - dispatch(changePackStatus({ _id, is_public: !is_public })); + mutation.mutate( + { _id, is_public: !is_public }, + { + onSuccess: (data) => onSuccesMutation(data), + }, + ); } else if (type === 'trip') { } }; diff --git a/client/hooks/globalItems/useDeleteGlobalItems.js b/client/hooks/globalItems/useDeleteGlobalItems.js index 71a7e8d60..f2016b0e7 100644 --- a/client/hooks/globalItems/useDeleteGlobalItems.js +++ b/client/hooks/globalItems/useDeleteGlobalItems.js @@ -2,21 +2,19 @@ import { queryTrpc } from '../../trpc'; import { store } from '../../store/store'; import { deleteItemsGlobalReducer } from '../../store/globalItemsStore'; -const useDeleteGlobalItems = (item) => { - const { data, isLoading, error, refetch } = queryTrpc.deleteGlobalItem - .useMutation() - .mutate( - { itemId: item }, - { - enabled: !!item, - }, - ); +const useDeleteGlobalItems = () => { + const mutation = queryTrpc.deleteGlobalItem.useMutation(); + // .mutate( + // { itemId: item }, + // { + // enabled: !!item, + // }, + // ); - if (!error) { - store.dispatch(deleteItemsGlobalReducer(data)); - } + const onSuccesMutation = (data) => + store.dispatch(deletePackItemReducer(data)); - return { data, error, isLoading, refetch }; + return { mutation, deleteItemsGlobalReducer }; }; export default useDeleteGlobalItems; diff --git a/client/hooks/packs/index.js b/client/hooks/packs/index.js index 1921782ca..a5fa84191 100644 --- a/client/hooks/packs/index.js +++ b/client/hooks/packs/index.js @@ -1,4 +1,35 @@ -export * from './useAddNewPack'; +import { + scorePackReducer, + deletePackItemReducer, + changePackStatusReducer, + addPackItemReducer, + addPackReducer, + editGlobalItemAsDuplicateReducer, + editPackItemReducer, + updatePackReducer, +} from '../../store/packsStore'; + +export const PACKQUERYS = { + scorePack: 'scorePack', + duplicatePublicPack: 'duplicatePublicPack', + deleteItem: 'deleteItem', + editPack: 'editPack', + addItem: 'addItem', + addPack: 'addPack', + editGlobalItemAsDuplicate: 'editGlobalItemAsDuplicate', + editItem: 'editItem', +}; + +export const PACKREDUCERS = { + scorePack: scorePackReducer, + deleteItem: deletePackItemReducer, + editPack: changePackStatusReducer, + addItem: addPackItemReducer, + addPack: addPackReducer, + editGlobalItemAsDuplicate: editGlobalItemAsDuplicateReducer, + editItem: editPackItemReducer, + updatePack: updatePackReducer, +}; + export * from './useUserPacks'; export * from './useFetchSinglePack'; -export * from './useDeletePackItem'; diff --git a/client/hooks/packs/useAddNewPack.js b/client/hooks/packs/useAddNewPack.js index 15b95ecf2..f0a6fc797 100644 --- a/client/hooks/packs/useAddNewPack.js +++ b/client/hooks/packs/useAddNewPack.js @@ -1,6 +1,10 @@ +import { store } from '../../store/store'; +import { addPackReducer } from '../../store/packsStore'; import { queryTrpc } from '../../trpc'; export const useAddNewPack = () => { const mutation = queryTrpc.addPack.useMutation(); - return { mutation }; + + const onSuccesMutation = (data) => store.dispatch(addPackReducer(data)); + return { mutation, onSuccesMutation }; }; diff --git a/client/hooks/packs/useDeletePackItem.js b/client/hooks/packs/useDeletePackItem.js deleted file mode 100644 index b6b16a209..000000000 --- a/client/hooks/packs/useDeletePackItem.js +++ /dev/null @@ -1,16 +0,0 @@ -import { queryTrpc } from '../../trpc'; -import { store } from '../../store/store'; -import { deletePackItemReducer } from '../../store/packsStore'; - -export const useDeletePackItem = (item) => { - const { data, isLoading, error, refetch } = queryTrpc.deleteItem - .useMutation() - .mutate({ - itemId: item.itemId, - packId: item.currentPackId, - }); - if (!error) { - store.dispatch(deletePackItemReducer(data)); - } - return { mutation }; -}; diff --git a/client/hooks/packs/useUserPacks.js b/client/hooks/packs/useUserPacks.js index 20f5a5c5f..893759300 100644 --- a/client/hooks/packs/useUserPacks.js +++ b/client/hooks/packs/useUserPacks.js @@ -21,7 +21,7 @@ export const useUserPacks = (ownerId, queryString) => { // Extract packs or set an empty array if data is undefined. const packs = data?.packs || []; - if (packs && !isSet) { + if (packs && !isLoading && !isSet) { store.dispatch(setUserPacks(packs)); setIsSet(true); } diff --git a/client/hooks/useMutation.js b/client/hooks/useMutation.js new file mode 100644 index 000000000..acd9c723a --- /dev/null +++ b/client/hooks/useMutation.js @@ -0,0 +1,9 @@ +import { store } from '../store/store'; +import { queryTrpc } from '../trpc'; + +export const useMutation = (route, reducer) => { + const mutation = queryTrpc.useMutation([route]); + + const onSuccesMutation = (data) => store.dispatch(scorePackReducer(data)); + return { mutation, onSuccesMutation: reducer ? onSuccesMutation : null }; +}; diff --git a/client/store/packsStore.js b/client/store/packsStore.js index 5993a2278..b3bde82bc 100644 --- a/client/store/packsStore.js +++ b/client/store/packsStore.js @@ -173,11 +173,13 @@ const packsSlice = createSlice({ closeModal: (state) => { state.isOpenEditModal = false; }, - setUserPacks: packsAdapter.setAll, + setUserPacks: (state, action) => { + packsAdapter.setAll(state, action.payload); + }, deletePackItemReducer: (state, action) => { - const { itemId, currentPackId } = action.meta.arg; + const { itemId, packId } = action.payload; - const existing = state.entities[currentPackId]; + const existing = state.entities[packId]; if (!existing) { return; } @@ -185,10 +187,85 @@ const packsSlice = createSlice({ const updatedItems = existing.items.filter((item) => item._id !== itemId); packsAdapter.updateOne(state, { - id: currentPackId, + id: packId, changes: { items: updatedItems }, }); }, + addPackReducer: (state, action) => { + packsAdapter.addOne(state, action.payload.createdPack); + }, + changePackStatusReducer: (state, action) => { + packsAdapter.updateOne(state, { + id: action.payload._id, + changes: action.payload, + }); + }, + addPackItemReducer: (state, action) => { + const existingPack = state.entities[action.payload.packId]; + if (existingPack) { + packsAdapter.updateOne(state, { + id: action.payload.packId, + changes: { items: [...existingPack.items, action.payload.newItem] }, + }); + } + }, + scorePackReducer: (state, action) => { + packsAdapter.updateOne(state, { + id: action.payload._id, + changes: action.updatedPack, + }); + }, + editGlobalItemAsDuplicateReducer: (state, action) => { + const { itemId, packId } = action.payload; + const existingPack = state.entities[packId]; + + if (!existingPack) { + return; + } + const updatedItems = existingPack.items.map((item) => + item._id === itemId ? action.payload : item, + ); + console.log('updated items', updatedItems); + + packsAdapter.updateOne(state, { + id: packId, + changes: { items: updatedItems }, + }); + }, + editPackItemReducer: (state, action) => { + const newItem = action.payload; + const packIds = newItem.packs; // packIds is an array of pack Ids + + packIds.forEach((packId) => { + console.log('packid', packId); + // loop through each packId + const existingPack = state.entities[packId]; + console.log('existingPack', existingPack); + if (!existingPack) { + return; + } + + const updatedItems = existingPack.items.map((item) => + item._id === newItem._id ? newItem : item, + ); + console.log('updatediTEMS', updatedItems); + + packsAdapter.updateOne(state, { + id: packId, + changes: { items: updatedItems }, + }); + }); + }, + updatePackReducer: (state, action) => { + InformUser({ + title: 'Pack has been succesfully updated', + placement: 'bottom', + duration: 2000, + style: { + backgroundColor: 'green', + }, + }); + }, }, extraReducers: (builder) => { builder @@ -432,7 +509,18 @@ export const { selectAll: selectAllPacks, selectById: selectPackById } = export const selectIsLoading = (state) => state.packs.isLoading; export const selectError = (state) => state.packs.error; -export const { openModal, closeModal, setUserPacks, deletePackItemReducer } = - packsSlice.actions; +export const { + openModal, + closeModal, + setUserPacks, + deletePackItemReducer, + addPackReducer, + changePackStatusReducer, + addPackItemReducer, + scorePackReducer, + editPackItemReducer, + editGlobalItemAsDuplicateReducer, + updatePackReducer, +} = packsSlice.actions; export default packsSlice.reducer;