fix(layer-selection) Pre select the previously selected layer in left panel

[amir-azma]

Description

We need to use store management in our Details tab. Also, the left panel selected layer should be the same as our previous layer selected.

Fixes #1376

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

https://amir-azma.github.io/geoview/raw-feature-info-1.html

Checklist:

• I have build (rush build) and deploy (rush host) my PR
• I have connected the issues(s) to this PR
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have created new issue(s) related to the outcome of this PR is needed
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

---

This change is 

[jolevesq]

Reviewed 3 of 4 files at r1, all commit messages.
Reviewable status: 3 of 4 files reviewed, 3 unresolved discussions (waiting on @amir-azma and @cphelefu)

---

packages/geoview-core/src/core/components/details/details.tsx line 26 at r1 (raw file):

export function DetailsFooter({ arrayOfLayerData, mapId }: TypeDetailsProps): JSX.Element | null {
  const store = getGeoViewStore(mapId);
  const { storeArrayOfLayerData } = useStore(store, (state) => state.detailsState);

It is better to not use deconstruction like this: const expanded = useStore(store, (state) => state.footerBarState.expanded);

---

packages/geoview-core/src/core/components/details/layers-list-footer.tsx line 59 at r1 (raw file):

  const store = getGeoViewStore(mapId);
  const { storeCurrentFeatureIndex, storeSelectedLayerPath, setStoreCurrentFeatureIndex } = useStore(store, (state) => state.detailsState);

No object deconstruction: https://stackoverflow.com/questions/68609189/fetching-multiple-states-with-zustand-react-shorthand-syntax

---

packages/geoview-core/src/core/stores/geoview-store.ts line 96 at r1 (raw file):

  storeArrayOfLayerData: TypeArrayOfLayerData;
  storeSelectedLayerPath: string;
  setStoreCurrentFeatureIndex: (newFeatureIndex: number) => void;

I do not think you need this function, you can set the value storeCurrentFEatureIndex directly

[cphelefu]

packages/geoview-core/src/core/components/details/details.tsx line 26 at r1 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

It is better to not use deconstruction like this: const expanded = useStore(store, (state) => state.footerBarState.expanded);

@jolevesq I think this is possible; it can be done in zunstand according to the documentation.

[cphelefu]

packages/geoview-core/src/core/components/details/layers-list-footer.tsx line 59 at r1 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

No object deconstruction: https://stackoverflow.com/questions/68609189/fetching-multiple-states-with-zustand-react-shorthand-syntax

Can we also remove setStoreFeatureIndex from the store? Whydo we need it in the store?

[cphelefu]

packages/geoview-core/src/core/stores/geoview-store.ts line 96 at r1 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

I do not think you need this function, you can set the value storeCurrentFEatureIndex directly

No need to start every variables with store. Rename to currentFeatureIndex, arrayOfLayerData, selectedLayerPath.

[cphelefu]

packages/geoview-core/src/core/stores/geoview-store.ts line 17 at r1 (raw file):

import { TypeMapFeaturesConfig, TypeValidMapProjectionCodes } from '@/core/types/global-types';
import { TypeLegendItemProps } from '../components/legend-2/types';
import { TypeArrayOfLayerData } from '../components/details/details';

The store does not need to depend on component for anything. This type should be in the store file or in another location, but not in a component file. We may need to discuss this one (maybe we need a central types folder).

[cphelefu]

packages/geoview-core/src/core/stores/geoview-store.ts line 209 at r1 (raw file):

          detailsState: {
            ...get().detailsState,
            storeCurrentFeatureIndex: newFeatureIndex,

This method can be removed from the store.

[jolevesq]

Reviewable status: 3 of 4 files reviewed, 5 unresolved discussions (waiting on @amir-azma and @cphelefu)

---

packages/geoview-core/src/core/components/details/details.tsx line 26 at r1 (raw file):

Previously, cphelefu (Christopher Phelefu) wrote…

@jolevesq I think this is possible; it can be done in zunstand according to the documentation.

But the store will listen to changes in the whole interface detailsState, it is best practice to specify the attribute.
https://github.com/pmndrs/zustand#fetching-everything
https://stackoverflow.com/questions/68609189/fetching-multiple-states-with-zustand-react-shorthand-syntax

[amir-azma]

Reviewable status: 3 of 4 files reviewed, 5 unresolved discussions (waiting on @cphelefu and @jolevesq)

---

packages/geoview-core/src/core/components/details/details.tsx line 26 at r1 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

But the store will listen to changes in the whole interface detailsState, it is best practice to specify the attribute.
https://github.com/pmndrs/zustand#fetching-everything
https://stackoverflow.com/questions/68609189/fetching-multiple-states-with-zustand-react-shorthand-syntax

I was going to pass 'shallow' as third param to useState, but vs code gives me warning that using 'shallow' is deprecated', like this
but the main reason to use object deconstruction is the main detailsState is holding an object of states, if it was primitives like string or boolean, then yes we didn't need deconstruction, then we could use like this : const nuts = useBearStore((state) => state.nuts)

'

[amir-azma]

Reviewable status: 3 of 4 files reviewed, 5 unresolved discussions (waiting on @cphelefu and @jolevesq)

---

packages/geoview-core/src/core/stores/geoview-store.ts line 96 at r1 (raw file):

Previously, cphelefu (Christopher Phelefu) wrote…

No need to start every variables with store. Rename to currentFeatureIndex, arrayOfLayerData, selectedLayerPath.

I though we needed to know where this variable is coming from, if it's from useState() or it's coming from store, yeah I can remove the store prefix

[amir-azma]

Reviewable status: 3 of 4 files reviewed, 5 unresolved discussions (waiting on @cphelefu and @jolevesq)

---

packages/geoview-core/src/core/stores/geoview-store.ts line 209 at r1 (raw file):

Previously, cphelefu (Christopher Phelefu) wrote…

This method can be removed from the store.

I think we can discuss about what needs to be in store, because in dataTable store, we have so many functions and states, but the main concept of store is to use the state in store in other components, I mean if the state X can be used in other components, then we add X to store

[amir-azma]

Reviewable status: 3 of 4 files reviewed, 5 unresolved discussions (waiting on @cphelefu and @jolevesq)

---

packages/geoview-core/src/core/stores/geoview-store.ts line 17 at r1 (raw file):

Previously, cphelefu (Christopher Phelefu) wrote…

The store does not need to depend on component for anything. This type should be in the store file or in another location, but not in a component file. We may need to discuss this one (maybe we need a central types folder).

Yes, I agree, there are some types that are defined inside the component, we may need to move it outside

[amir-azma]

Reviewable status: 0 of 4 files reviewed, 5 unresolved discussions (waiting on @cphelefu and @jolevesq)

---

packages/geoview-core/src/core/components/details/layers-list-footer.tsx line 59 at r1 (raw file):

Previously, cphelefu (Christopher Phelefu) wrote…

Can we also remove setStoreFeatureIndex from the store? Whydo we need it in the store?

Removed setStoreFeatureIndex and related states.

---

packages/geoview-core/src/core/stores/geoview-store.ts line 17 at r1 (raw file):

Previously, amir-azma wrote…

Yes, I agree, there are some types that are defined inside the component, we may need to move it outside

For now we keep the type in component, we discussed in standup today that we're going to clean the types from components in future.

[amir-azma]

Reviewable status: 0 of 4 files reviewed, 5 unresolved discussions (waiting on @cphelefu and @jolevesq)

---

packages/geoview-core/src/core/stores/geoview-store.ts line 96 at r1 (raw file):

Previously, amir-azma wrote…

I though we needed to know where this variable is coming from, if it's from useState() or it's coming from store, yeah I can remove the store prefix

Done

---

packages/geoview-core/src/core/stores/geoview-store.ts line 209 at r1 (raw file):

Previously, amir-azma wrote…

I think we can discuss about what needs to be in store, because in dataTable store, we have so many functions and states, but the main concept of store is to use the state in store in other components, I mean if the state X can be used in other components, then we add X to store

Done

[jolevesq]

Reviewed 1 of 4 files at r2, 3 of 3 files at r3, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @amir-azma and @cphelefu)

---

packages/geoview-core/src/core/components/details/layers-list-footer.tsx line 147 at r3 (raw file):

  useEffect(() => {
    if (arrayOfLayerData.length > 0) {
      // Check if have the previouse selected layer path in incoming arrayOfLayerData

Typo previous

[cphelefu]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @amir-azma)

[amir-azma]

Reviewed 1 of 4 files at r2, 3 of 3 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @jolevesq)

---

packages/geoview-core/src/core/components/details/layers-list-footer.tsx line 147 at r3 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

Typo previous

Done.

[jolevesq]

Reviewed 1 of 1 files at r4, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @amir-azma)