Feat/5569 5603 without proxy accordion

[stevenfukase]

Without Proxy設定画面内にアコーディオンを追加しました。
【英語】

【日本語】

【中国語】

[itizawa]

コメントしました。確認お願いします

[itizawa]

コメントしました。確認お願いします

[stevenfukase]

参考:

growi/src/client/js/components/Admin/ExportArchiveData/SelectCollectionsModal.jsx

Lines 41 to 56 in b803efd

	toggleCheckbox(e) {
	const { target } = e;
	const { name, checked } = target;
	this.setState((prevState) => {
	const selectedCollections = new Set(prevState.selectedCollections);
	if (checked) {
	selectedCollections.add(name);
	}
	else {
	selectedCollections.delete(name);
	}
	return { selectedCollections };
	});
	}

[itizawa]

なるほど、state がすでに Set オブジェクトの場合毎回 new Set で初期化するのは無駄だと思いましたがどうですかね...

[itizawa]

最近知ったんですけど、関数内で現在の state を参照して操作するのではなく prevState を操作した方が正しそう？
今回は直さなくていいですが

 const onToggleAccordionHandler = (i) => {
  setOpenAccordionIndexes((prevOpenAccordionIndexes)=>{
  const accordionIndexes = prevOpenAccordionIndexes
   if (accordionIndexes.has(i)) {
      accordionIndexes.delete(i);
    }
    else {
      accordionIndexes.add(i);
    }
   return accordionIndexes;
  }
}

参考：https://zenn.dev/stin/articles/use-appropriate-api#%E7%B5%90%E8%AB%96

[itizawa]

これだと毎回 Set オブジェクトを生成し直していますね。

[itizawa]

Suggested change

	const [openAccordionIndexes, setOpenAccordionIndexes] = useState(new Set());
	const onToggleAccordionHandler = (i) => {
	const accordionIndexes = new Set(openAccordionIndexes);
	if (accordionIndexes.has(i)) {
	accordionIndexes.delete(i);
	}
	else {
	accordionIndexes.add(i);
	}
	setOpenAccordionIndexes(accordionIndexes);
	};
	const [openAccordionIndexes, setOpenAccordionIndexes] = useState(new Set([]));
	const onToggleAccordionHandler = (i) => {
	if (accordionIndexes.has(i)) {
	setOpenAccordionIndexes(accordionIndexes.delete(i));
	}
	else {
	setOpenAccordionIndexes(accordionIndexes.add(i));
	}
	};

これで動くような？

[stevenfukase]

こちら、試しましたが動きませんでした。

  const [openAccordionIndexes, setOpenAccordionIndexes] = useState(new Set([]));

  const onToggleAccordionHandler = (i) => {
    if (openAccordionIndexes.has(i)) {
      setOpenAccordionIndexes(openAccordionIndexes.delete(i));
    }
    else {
      setOpenAccordionIndexes(openAccordionIndexes.add(i));
    }
  };

[itizawa]

なるほど、state がすでに Set オブジェクトの場合毎回 new Set で初期化するのは無駄だと思いましたがどうですかね...

[itizawa]

最近知ったんですけど、関数内で現在の state を参照して操作するのではなく prevState を操作した方が正しそう？
今回は直さなくていいですが

 const onToggleAccordionHandler = (i) => {
  setOpenAccordionIndexes((prevOpenAccordionIndexes)=>{
  const accordionIndexes = prevOpenAccordionIndexes
   if (accordionIndexes.has(i)) {
      accordionIndexes.delete(i);
    }
    else {
      accordionIndexes.add(i);
    }
   return accordionIndexes;
  }
}

参考：https://zenn.dev/stin/articles/use-appropriate-api#%E7%B5%90%E8%AB%96

[itizawa]

今後、完了した step によって accordion の開閉をコントロールするのだとしたら index ではなく key を保存した方が良さそうな気がしました。
必要であれば後ほどのタスクで対応するようにお願いします