mobx-react#useLocalStore JavaScript Examples

The following examples show how to use mobx-react#useLocalStore. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From apps-ng with Apache License 2.0 5 votes vote down vote up 
StoreProvider = ({ children }) => {
  const store = useLocalStore(createStore)

  return <StoreContext.Provider value={store}>
    {children}
  </StoreContext.Provider>
}
Example #2
Source File: MainTimeTable.js    From front-app with MIT License 5 votes vote down vote up 
MainTimeTable = observer(() => {
  const store = useLocalStore(() => ({
    timeTableList: [],
    setTimeTableList: (list) => (store.timeTableList = list),
  }))
  const { timeTableList, setTimeTableList } = store

  useEffect(() => {
    getTimeTable().then((res) => {
      const { timeTableList } = res
      setTimeTableList(timeTableList)
    })
  }, [])

  const getMainDate = () => {
    if (timeTableList.length !== 0) return moment.parseZone(timeTableList[0].start_time).format('MM/DD')
  }

  return (
    <div className={'timeTableContainer'}>
      <div className={'mainDate'}>{getMainDate()}</div>
      <div className={'timeTable'}>
        {timeTableList &&
          timeTableList.map((data, idx) => {
            const { start_time, end_time, speech, track_name } = data
            const time_result = (moment(end_time) - moment(start_time)) / 60000
            return (
              <div key={`table_list_${idx}`} className={idx % 2 === 0 ? 'timeTable__list' : 'timeTable__list odd'}>
                <div className={'timeTable__list-number'}>{idx + 1}</div>
                <div className={'timeTable__list-data'}>
                  <div>
                    {moment.parseZone(start_time).format(' HH:mm')} - {moment.parseZone(end_time).format(' HH:mm')} ({time_result}')
                  </div>
                  <div>{makeLineBreak(track_name)}</div>
                  <div>{makeLineBreak(speech)}</div>
                </div>
              </div>
            )
          })}
      </div>
    </div>
  )
})
Example #3
Source File: MainContainer.js    From front-app with MIT License 4 votes vote down vote up 
MainContainer = observer(() => {
  const { WebinarInfoStore, userStore } = useStores()
  const history = useHistory()
  const { getWebinarInfo, link, title, detail } = WebinarInfoStore
  const { userLogin, userLogout, accessToken } = userStore
  const store = useLocalStore(() => ({
    menuIndex: 0,
    changeMenu: (index) => {
      store.menuIndex = index
    },
    sideMenuIndex: 0,
    changeSideMenu: (index) => {
      store.sideMenuIndex = index
    },
  }))
  const { menuIndex, changeMenu, sideMenuIndex, changeSideMenu } = store

  const handleGetWebinarInfo = useCallback(() => {
    getWebinarInfo().catch((error) => {
      return error
    })
  }, [getWebinarInfo])

  const InfoMenus = [
    { title: '정보', contents: InfoContainer },
    { title: '타임테이블', contents: TimeTableContainer },
  ]
  const SideMenuInfo = [
    { title: '채팅', img: chatIcon, active: chatActiveIcon, content: <MainChat /> },
    { title: 'Q&A', img: qnaIcon, active: qnaActiveIcon, content: <MainQna /> },
    { title: '타임테이블', img: timeTableIcon, active: timeTableActiveIcon, content: <MainTimeTable /> },
  ]

  // const onLogoutSuccess = (res) => {
  //   console.log('logout success', res)
  //   Swal.fire({
  //     title: '로그아웃 완료',
  //     text: '로그아웃 되었습니다.',
  //     icon: 'info',
  //   })
  // }
  //
  // const onSuccess = (res) => {
  //   getUserInfo()
  //     .then((result) => {
  //       const { userInfo, accessToken='' } = result
  //       console.log('login complete userData: ', userInfo, accessToken)
  //       userLogin(userInfo, accessToken)
  //     })
  //     .catch((err) => {
  //       console.log('get user info err', err)
  //     })
  //   refreshTokenSetup(res)
  // }
  //
  // const onFailure = (res) => {
  //   console.log('fail', res)
  //   if (res.error === 'idpiframe_initialization_failed' || res.error === 'popup_closed_by_user') {
  //     Swal.fire({
  //       title: '브라우저 쿠키 설정',
  //       text: '브라우저 설정에서 쿠키를 허용해주세요.',
  //       icon: 'warning',
  //     })
  //   }
  // }
  //
  // const { signIn } = useGoogleLogin({
  //   onSuccess,
  //   onFailure,
  //   autoLoad: true,
  //   clientId: GOOGLE_ID,
  //   isSignedIn: true,
  //   accessType: 'offline',
  // })

  // const { signOut } = useGoogleLogout({
  //   clientId: GOOGLE_ID,
  //   onLogoutSuccess,
  // })

  const logout = () => {
    userLogout()
    const wnd = window.open('https://accounts.google.com/logout', '_blank')
    setTimeout(() => {
      wnd.close()
    }, 300)
    axios.post(`${SERVER_URL}/auth/logout`, { access_token: accessToken }).then(() => {
      history.go(0)
    })

    // signOut()
  }

  useEffect(() => {
    handleGetWebinarInfo()
    getUserInfo({ access_token: accessToken })
      .then((result) => {
        const { userInfo, accessToken = '' } = result
        userLogin(userInfo, accessToken)
      })
      .catch((err) => {
        console.log('get user info err', err)
      })
  }, [])

  return (
    <>
      <Header login={accessToken.length !== 0} logout={logout} />
      <Main
        InfoMenus={InfoMenus}
        menuIndex={menuIndex}
        changeMenu={changeMenu}
        sideMenuIndex={sideMenuIndex}
        changeSideMenu={changeSideMenu}
        SideMenuInfo={SideMenuInfo}
        link={link}
        title={title}
        detail={detail}
      />
    </>
  )
})