Function ProjectLayout

ui/src/layout/projectLayout.tsx:97–386

(props: IProps)

];

const ProjectLayout = (props: IProps) => {
  const { projectKey, environmentKey, toggleKey, segmentKey } = useParams<IRouterParams>();
  const [ projectInfo, setProjectInfo ] = useState<IProject>({
    name: '',
    key: '',
    description: '',
    environments: [{
      name: '',
      key: '',
      clientSdkKey: '',
      serverSdkKey: ''
    }]
  });
  const [ envIndex, setEnvIndex ] = useState<number>(0);
  const [ toggleName, saveToggleName ] = useState<string>('');
  const [ segmentName, setSegmentName ] = useState<string>('');
  const [ tipVisible, saveTipVisible ] = useState<boolean>(false);
  const [ isLoading, saveIsLoading ] = useState<boolean>(false);
  const [ run, saveRun ] = useState<boolean>(false);
  const [ stepIndex, saveStepIndex ] = useState<number>(0);
  const history = useHistory();
  const match = useRouteMatch();
  const intl = useIntl();

  useEffect(() => {
    getProjectInfo<IProject>(projectKey).then(res => {
      saveIsLoading(false);
      if (res.success) {
        const { data } = res;
        if (data) {
          setProjectInfo(data);
        }
      } else {
        message.error(res.message || 'Get project information error!');
      }
    });
  }, [projectKey]);

  useEffect(() => {
    if(segmentKey) {
      getSegmentDetail<ISegmentInfo>(projectKey, segmentKey).then(res => {
        saveIsLoading(false);
        if (res.success) {
          const { data } = res;
          if (data) {
            setSegmentName(data.name);
          }
        } else {
          message.error(res.message || 'Error getting segment');
        }
      });
    }
  }, [projectKey, segmentKey]);

  useEffect(() => {
    if (!toggleKey) return;

    getToggleInfo<IToggleInfo>(projectKey, environmentKey, toggleKey).then(res => {