Function Project

ui/src/pages/project/index.tsx:67–216

()

];

const Project = () => {
  const [ projectList, saveProjectList ] = useState<IProject[]>([]);
  const [ isAdd, setIsAdd ] = useState<boolean>(true);
  const [ visible, setVisible ] = useState<boolean>(false);
  const [ projectKey, setProjectKey ] = useState<string>('');
  const [ isLoading, saveIsLoading ] = useState<boolean>(true);
  const [run, saveRun] = useState<boolean>(false);
  const [stepIndex, saveStepIndex] = useState<number>(0);

  const intl = useIntl();
  const { userInfo } = HeaderContainer.useContainer();

  const getUserGuide = useCallback(() => {
    getFromDictionary<IDictionary>(USER_GUIDE_PROJECT).then(res => {
      const { success, data } = res;
      if (success && data) {
        const savedData = JSON.parse(data.value);
        if (parseInt(savedData) !== STEPS.length) {
          setTimeout(() => {
            saveRun(true);
          }, 500);
          saveStepIndex(parseInt(savedData));
        }
      } else {
        setTimeout(() => {
          saveRun(true);
        }, 500);
      }
    });
  }, []);

  const init = useCallback(async () => {
    saveIsLoading(true);
    const res = await getProjectList<IProject[]>();
    const { data } = res;
    saveIsLoading(false);
    if (res.success && data) {
      saveProjectList(data);
      if (data.length > 0) {
        getUserGuide();
      }
    } else {
      message.error(res.message || intl.formatMessage({id: 'projects.list.error.text'}));
    }
  }, [getUserGuide, intl]);

  useEffect(() => {
    init();
  }, [init]);

  const handleAddProject = useCallback(() => {
    setIsAdd(true);
    setVisible(true);
  }, []);

  const handleEditProject = useCallback((projectKey: string) => {
    setIsAdd(false);
    setVisible(true);