fix: use createSelector to avoid redux selector warning (#733)

Rewrite selectDepthDependentData to use createSelector rather than chaining selectors inline. The selectDepthDependentData selector was causing a warning because of its internal use of selectSoilData. Redux recommends using the createSelector wrapper when chaining selectors together to avoid unnecessary re-renders.

src/selectors.ts

@@ -333,15 +333,18 @@ export const useSiteSoilIntervals = (siteId: string): AggregatedInterval[] => {
   );
 };
 
-export const selectDepthDependentData =
-  ({
-    siteId,
-    depthInterval,
-  }: {
-    siteId: string;
-    depthInterval: { depthInterval: DepthInterval };
-  }) =>
-  (state: SharedState): DepthDependentSoilData =>
-    selectSoilData(siteId)(state).depthDependentData.find(
-      sameDepth(depthInterval),
-    ) ?? { depthInterval: depthInterval.depthInterval };
+export const selectDepthDependentData = ({
+  siteId,
+  depthInterval,
+}: {
+  siteId: string;
+  depthInterval: { depthInterval: DepthInterval };
+}): ((state: SharedState) => DepthDependentSoilData) =>
+  createSelector(
+    selectSoilData(siteId),
+    soilData =>
+      soilData.depthDependentData.find(sameDepth(depthInterval)) ??
+      ({
+        depthInterval: depthInterval.depthInterval,
+      } as DepthDependentSoilData),
+  );