| undefined;\n/** コンテキストの提供情報 */\ntype ContextInfoType = UserData & AuthInfoType & AppInfoType & {\n dialog?: AppDialogInfoType,\n error?: AppErrorDialogInfoType,\n};\nconst DefaultContextInfo:ContextInfoType = {\n ...DefaultUserInfo,\n ...DefaultAuthInfo,\n ...DefaultAppInfo,\n}\n/** 認証処理コンテキスト提供プロパティ */\nexport type AppOperationContextType = ContextInfoType & {\n isAuthenticated: () => boolean,\n setLoading: (loading:boolean, test:string) => void,\n setApi: (api:() => Promise
, success:(res:P) => void, retry?: () => void, error?: (err:ResponseType) => void, loadingText?: string) => void,\n setUserInfo: (info:UserData) => void,\n setAuthInfo: (info:AuthInfoType) => void,\n setDialog: (info:React.ReactElement) => void,\n clerAuthInfo: () => void,\n clearDialog: () => void,\n clearError: () => void,\n}\n/** 認証処理コンテキスト */\nexport const AppOperationContext = React.createContext({\n ...DefaultContextInfo,\n isAuthenticated: () => false,\n setLoading: (_) => console.error(`not setting provider`),\n setApi: (_, __) => console.error(`not setting provider`),\n setUserInfo: (_) => console.error(`not setting provider`),\n setAuthInfo: (_) => console.error(`not setting provider`),\n setDialog: (_) => console.error(`not setting provider`),\n clerAuthInfo: () => console.error(`not setting provider`),\n clearDialog: () => console.error(`not setting provider`),\n clearError: () => console.error(`not setting provider`),\n});\n/** API格納情報 */\ntype ApiInfoType = {\n api: () => Promise
,\n success: (res: ResponseType) => void,\n retry: () => void,\n retryCnt: number,\n error?: (err: ResponseType) => void,\n loadingText?: string,\n}[]\n\n/** プロバイダーコンポーネントのプロパティ */\ntype ProviderType = {\n children: React.ReactNode,\n}\n/**\n * アプリケーション提供コンポーネント\n * @param props \n * @returns \n */\nconst AppProvider = (props: ProviderType) => {\n const [guid, setGuid, removeGuid] = useCookie('guid', '');\n const [authInfo, setAuthInfo] = useState({guid:guid, login:false});\n const [userInfo, setUserInfo] = useState(DefaultUserInfo);\n const [appInfo, setAppInfo] = useState(DefaultAppInfo);\n const [dialogInfo, setDialogInfo] = useState();\n const [errorInfo, setErrorInfo] = useState();\n const [waitApi, setWaitApi] = useState>([]);\n\n // ユーザー情報\n // 認証情報保存処理\n const setAuth = (authInfo: AuthInfoType) => {\n setGuid(authInfo.guid);\n setAuthInfo(authInfo);\n }\n // 認証情報破棄（クライアントのみ）\n const clearAuth = () => {\n removeGuid();\n setAuthInfo(DefaultAuthInfo);\n }\n // ダイアログ\n const clearDialog = () => {\n setDialogInfo(undefined);\n }\n // エラークリア\n const clearError = () => {\n setErrorInfo(undefined);\n }\n // ローディング処理\n const setLoading = (loading: boolean, loadingText: string) => {\n setAppInfo({ ...appInfo, loading: loading, loadingText:loadingText });\n }\n // 認証済みかどうか\n const isAuthenticated = () => {\n return authInfo !== null && authInfo.guid !== undefined && authInfo.guid !== '' && authInfo.login;\n }\n // API共通処理\n const setApi = async function(\n api: () => Promise
, \n success:(res:P) => void, \n retry?: () => void,\n error?: (err:ResponseType) => void,\n loadingText?: string) {\n waitApi.push({\n api: api,\n success: (res) => success(res as P),\n retry: retry ? retry : () => {},\n retryCnt: 0,\n error: error,\n loadingText: loadingText ? loadingText : \"\",\n });\n setWaitApi([ ...waitApi ]);\n }\n const [ exec, setExec ] = React.useState(false);\n React.useLayoutEffect(() => {\n if (exec || waitApi.length === 0 || errorInfo !== undefined) {\n return;\n }\n if (waitApi.length > 0) {\n let api = waitApi.shift();\n if (api) {\n setExec(true);\n setLoading(true, api.loadingText as string);\n api.api()\n .then(res => {\n api && api.success && api.success(res);\n setLoading(false, \"\");\n setWaitApi([...waitApi]);\n })\n .catch((reason:ResponseType) => {\n // エラーコードによって処理を変える\n if (reason.httpStatusCode !== 200) {\n // HTTPレスポンスステータスコードのクライアント／サーバーエラーコードは\n // アプリケーション続行不能エラー（再ログインを促す、ユーザー個別）\n console.log(\"HTTPレスポンスコード\");\n clearDialog();\n setAuth({ ...authInfo, login: false });\n setErrorInfo({\n ...reason, \n retry: () => {\n window.location.replace(`${window.location.origin}/nft`);\n }\n });\n return;\n } else if (reason.errorCode < 10000) {\n console.log(\"進行不能\")\n // システム続行不能エラー（再ログインを促さない、ユーザー全体）\n clearDialog();\n setErrorInfo(reason);\n } else if (10000 < reason.errorCode && reason.errorCode < 20000) {\n console.log(\"続行不能\")\n // アプリケーション続行不能エラー（再ログインを促す、ユーザー個別）\n clearDialog();\n setAuth({ ...authInfo, login: false });\n setErrorInfo({\n ...reason, \n retry: () => {\n // セッションエラーの場合はguidを再作成させる\n if (reason.errorCode === ErrorCode.ACCOUNT_ALREADY_EXIST\n || reason.errorCode === ErrorCode.DEVICE_DOES_NOT_EXISTS\n || reason.errorCode === ErrorCode.USER_DOES_NOT_EXIST\n || reason.errorCode === ErrorCode.INVALID_AUTH\n || reason.errorCode === ErrorCode.NOTFOUND_SESSION_USER_ID\n || reason.errorCode === ErrorCode.INVALID_SESSION_USER_ID\n || reason.errorCode === ErrorCode.NOTFOUND_SESSION_USER) {\n clearAuth();\n }\n window.location.replace(`${window.location.origin}/nft`);\n }\n });\n return;\n } else if (20000 < reason.errorCode && reason.errorCode < 30000) {\n console.log(`一時エラー (${api?.retryCnt})`)\n // 一時エラー（再試行可能）\n if (api && api.retryCnt < 5) {\n // 指定回数までリトライ\n api.retryCnt++;\n setWaitApi([\n api,\n ...waitApi, \n ]);\n return;\n }\n } else if (30000 < reason.errorCode && reason.errorCode < 40000) {\n console.log(\"個別エラー\")\n // 個別のバリデーションエラー\n if (api && api.error) {\n api.error(reason);\n } else {\n setErrorInfo({\n ...reason, \n retry: api?.retry\n });\n }\n } else {\n console && console.error && console.error(\"api unknown error.\", reason);\n }\n setWaitApi([...waitApi]);\n })\n .finally(() => {\n setExec(false);\n setLoading(false, \"\");\n });\n }\n }\n }, [waitApi, exec]);\n return (\n \n {props.children}\n \n );\n}\nexport const useAppOperationContext = () => useContext(AppOperationContext);\nexport default AppProvider;","export const BaseUrl: { [key: string]: string } = {\n 'account': '/account',\n 'usercharacter': '/usercharacter',\n 'exchangecharacter': '/exchangecharacter',\n 'idap': '/idaplinkage',\n 'top': '/top',\n 'mission': '/mission',\n 'activity': '/activity',\n 'team': '/team',\n 'terms': '/terms',\n 'market': '/market',\n}\nconst Url: { [key: string]: string } = (function(url: { [key: string]: string }) {\n let obj: { [key: string]: string } = {};\n Object\n .keys(url)\n .map((key) => {\n obj[key] = `${process.env.REACT_APP_URL}${url[key]}/`;\n });\n return obj;\n})(BaseUrl);\nexport default Url;\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport UserData from '../../model/UserData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n guid: string,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n user: UserData\n}\n/**\n * アカウント作成処理\n */\nexport default class CreateAccountApi extends Api {\n /** リクエストURL */\n public url = `${Url.account}create`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport UserData from '../../model/UserData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n guid: string,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n user: UserData\n}\n/**\n * ログイン処理\n */\nexport default class LoginAccountApi extends Api {\n /** リクエストURL */\n public url = `${Url.account}login`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n guid: string,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n isSuccess: boolean,\n}\n/**\n * ログアウト処理\n */\nexport default class LogoutAccountApi extends Api {\n /** リクエストURL */\n public url = `${Url.account}logout`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n iDapLoginUrl: string,\n}\n/**\n * iDapログイン処理\n */\nexport default class iDapLoginApi extends Api {\n /** リクエストURL */\n public url = `${Url.idap}login`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport UserData from 'model/UserData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n userVerificationToken: string,\n guid: string,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n user: UserData,\n}\n/**\n * iDapログインコールバック処理\n */\nexport default class iDapLoginCallbackApi extends Api {\n /** リクエストURL */\n public url = `${Url.idap}logincallback`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport CharacterFilterRequestData from '../../model/CharacterFilterRequestData';\nimport UserCharacterData from '../../model/UserCharacterData';\nimport CharacterFilterData from '../../model/CharacterFilterData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n characterFilterRequestDataList: CharacterFilterRequestData[],\n // 所持一覧かどうか\n isOwner: boolean,\n // ページ番号(1スタート)\n pageNumber: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n userCharacters: UserCharacterData[],\n characterFilterDataList: CharacterFilterData[],\n characterCount: number,\n}\n/**\n * ユーザーキャラ一覧取得処理\n */\nexport default class UserCharactorListApi extends Api {\n /** リクエストURL */\n public url = `${Url.usercharacter}list`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport UserCharacterDetailData from '../../model/UserCharacterDetailData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n userCharacterId: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n userCharacterDetailData: UserCharacterDetailData,\n}\n/**\n * ユーザーキャラ詳細取得処理\n */\nexport default class UserCharactorDetailApi extends Api {\n /** リクエストURL */\n public url = `${Url.usercharacter}detail`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n let res = data as Response;\n // 並び順をsortOrder照準で並べ替え\n if (res && res.userCharacterDetailData && res.userCharacterDetailData.profiles) {\n res.userCharacterDetailData.profiles = res.userCharacterDetailData.profiles.sort((a,b) => a.sortingOrder - b.sortingOrder)\n }\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport UserData from '../../model/UserData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n userCharacterId: number,\n profileType: number,\n profileText: string,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n user: UserData,\n profileType: number,\n profileText: string,\n}\n/**\n * ユーザーキャラ一覧取得処理\n */\nexport default class UserCharactorListApi extends Api {\n /** リクエストURL */\n public url = `${Url.usercharacter}writeprofile`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n userCharacterId: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n userCharacterId: number,\n mstCharacterId: number,\n userId: number,\n name: string,\n description: string,\n hiddenDescription: string,\n secret: string,\n personality: string,\n hobby: string,\n dream: string,\n favoritePhrase: string,\n favoriteThing: string,\n dislikedThing: string,\n profileFilledCount: number,\n profileUpdatedAt: Date,\n lastAcquiredAt: Date,\n createdAt: Date,\n updatedAt: Date,\n iDapTokenIndex: number,\n likeCount: number,\n rarityType: number,\n mstCountryId: number,\n mstResidenceId: number,\n mstAppearanceIdBackground: number,\n mstAppearanceIdSpecialEffect: number,\n mstAppearanceIdHair: number,\n mstAppearanceIdHairAccessory: number,\n mstAppearanceIdMouth: number,\n mstAppearanceIdMouthAccessory: number,\n mstAppearanceIdEar: number,\n mstAppearanceIdEarAccessory: number,\n mstAppearanceIdFacePaint: number,\n mstAppearanceIdFace: number,\n mstAppearanceIdFaceAccessory: number,\n mstAppearanceIdBody: number,\n mstAppearanceIdNeckAccessory: number,\n mstAppearanceIdClothIn: number,\n mstAppearanceIdClothOut: number,\n mstAppearanceIdHand: number,\n mstAppearanceIdWeapon: number,\n}\n/**\n * ユーザーキャラライク処理\n */\nexport default class UserCharactorLikeApi extends Api {\n /** リクエストURL */\n public url = `${Url.usercharacter}likeusercharacter`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n baseMstCharacterId: number,\n materialMstCharacterId1: number,\n materialMstCharacterId2: number,\n materialMstCharacterId3: number,\n materialItemIndex: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n imagePath: string,\n shortStoryText: string,\n}\n/**\n * ランクアップ処理\n */\nexport default class UserCharactorRankupApi extends Api {\n /** リクエストURL */\n public url = `${Url.usercharacter}rankup`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport UserCharacterGetMaterialCharacterData from '../../model/RankupMaterialData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n}\n\n/** レスポンス */\nexport type Response = ResponseType & {\n userCharacterGetMaterialCharacterData: UserCharacterGetMaterialCharacterData[],\n userCharacterGetMaterialItemIndexes: number[]\n}\n/**\n * ランクアップ触媒取得処理\n */\nexport default class UserCharacterGetRankupMaterialApi extends Api {\n /** リクエストURL */\n public url = `${Url.usercharacter}getrankupmaterial`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport CharacterFilterRequestData from '../../model/CharacterFilterRequestData';\nimport ExchangeCharacterData from '../../model/ExchangeCharacterData';\nimport CharacterFilterData from '../../model/CharacterFilterData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n characterFilterRequestDataList: CharacterFilterRequestData[],\n // ページ番号(1スタート)\n pageNumber: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n exchangeCharacters: ExchangeCharacterData[],\n characterFilterDataList: CharacterFilterData[],\n characterCount: number,\n}\n/**\n * 交換キャラ一覧取得処理\n */\nexport default class ExchangeCharactorListApi extends Api {\n /** リクエストURL */\n public url = `${Url.exchangecharacter}list`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n userExchangeCharacterId: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n userId: number,\n name: string,\n iDapServiceUserId: number,\n profilePoint: number,\n exchangePoint: number,\n lastLoginAt: Date,\n isBanned: boolean,\n createdAt: Date,\n updatedAt: Date,\n}\n/**\n * 交換キャラ交換取得処理\n */\nexport default class ExchangeCharactorPurchaseApi extends Api {\n /** リクエストURL */\n public url = `${Url.exchangecharacter}characterpurchase`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\nimport ActivityData from '../../model/ActivityData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n activities: ActivityData[],\n}\n/**\n * 交換キャラ一覧取得処理\n */\nexport default class ExchangeCharactorListApi extends Api {\n /** リクエストURL */\n public url = `${Url.top}index`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport {Api, MethodType, RequestType, ResponseType} from '../Define';\nimport MissionData from '../../model/MissionData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n missions: MissionData[],\n}\n/**\n * ミッション一覧取得処理\n */\nexport default class MissionListApi extends Api {\n /** リクエストURL */\n public url = `${Url.mission}list`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport {Api, MethodType, RequestType, ResponseType} from '../Define';\nimport UserData from '../../model/UserData';\nimport MissionData from '../../model/MissionData'\n\n/** リクエスト */\nexport type Request = RequestType & {\n mstMissionId: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n user: UserData,\n mission: MissionData,\n}\n/**\n * ユーザーキャラ一覧取得処理\n */\nexport default class MissionListApi extends Api {\n /** リクエストURL */\n public url = `${Url.mission}receiveReward`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport {Api, MethodType, RequestType, ResponseType} from '../Define';\nimport ActivityData from '../../model/ActivityData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n activities: ActivityData[],\n}\n/**\n * 更新情報一覧取得処理\n */\nexport default class ActivityListApi extends Api {\n /** リクエストURL */\n public url = `${Url.activity}list`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport {Api, MethodType, RequestType, ResponseType} from '../Define';\nimport TeamCharacterData from '../../model/TeamCharacterData';\n\n/** リクエスト */\nexport type Request = RequestType & {\n mstTeamId: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n teamCharacters: TeamCharacterData[],\n}\n/**\n * チームのキャラクター一覧取得処理\n */\nexport default class CharactersApi extends Api {\n /** リクエストURL */\n public url = `${Url.team}characters`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n mstTermId: number,\n termsOfServiceContent: string,\n privacyPolicyContent: string,\n}\n/**\n * 利用規約取得処理\n */\nexport default class TermsGetApi extends Api {\n /** リクエストURL */\n public url = `${Url.terms}get`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n mstTermId: number\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n isSuccess: boolean,\n}\n/**\n * 利用規約同意処理\n */\nexport default class TermsAgreeApi extends Api {\n /** リクエストURL */\n public url = `${Url.terms}agree`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n url: string,\n}\n/**\n * マーケットトップ処理\n */\nexport default class MarketTopApi extends Api {\n /** リクエストURL */\n public url = `${Url.market}top`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n userCharacterId: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n url: string,\n}\n/**\n * IDapマーケットの出品URLを取得\n */\nexport default class MarketExhibitApi extends Api {\n /** リクエストURL */\n public url = `${Url.market}exhibit`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","import Url from '../Url';\nimport { Api, MethodType, RequestType, ResponseType } from '../Define';\n\n/** リクエスト */\nexport type Request = RequestType & {\n userId: number,\n}\n/** レスポンス */\nexport type Response = ResponseType & {\n url: string,\n}\n/**\n * IDapマーケットの出品URLを取得\n */\nexport default class MarketNftListApi extends Api {\n /** リクエストURL */\n public url = `${Url.market}nftlist`;\n /** リクエストパラメーター */\n public request: Request;\n /**\n * コンストラクター\n * @param request リクエストパラメーター\n */\n constructor(request: Request) {\n super(request);\n this.request = request;\n this.method = MethodType.POST;\n }\n /**\n * レスポンスパース処理\n * @param data レスポンスデータ\n * @returns レスポンス\n */\n public parseResponse(data: any): Response {\n return data;\n }\n}\n","\nimport {\n Api, \n RequestType, \n ResponseType, \n ErrorCode \n} from './Define';\nimport CreateApi, { Request as CreateApiRequest } from './account/Create';\nimport LoginApi, { Request as LoginApiRequest } from './account/Login';\nimport LogoutApi, { Request as LogoutApiRequest } from './account/Logout';\nimport IDapLoginApi, { Request as IDapLoginApiRequest } from './idap/Login';\nimport IDapLoginCallbackApi, { Request as IDapLoginCallbackApiRequest } from './idap/LoginCallback';\nimport UserCharaListApi, { Request as UserCharaListApiRequest } from './charactor/List';\nimport UserCharaDetailApi, { Request as UserCharaDetailApiRequest } from './charactor/Detail';\nimport UserCharaWriteProfileApi, { Request as UserCharaWriteProfileApiRequest } from './charactor/WriteProfile';\nimport UserCharaLikeApi, { Request as UserCharaLikeApiRequest } from './charactor/Like';\nimport UserCharacterRankupApi, { Request as UserCharacterRankupApiRequest } from './charactor/Rankup';\nimport UserCharacterGetRankupMaterialApi, { Request as UserCharacterGetRankupMaterialApiRequest } from './charactor/GetRankupMaterial';\nimport ExchangeCharaListApi, { Request as ExchangeCharaListApiRequest } from './exchangecharacter/List';\nimport ExchangeCharaPurchaseApi, { Request as ExchangeCharaPurchaseApiRequest } from './exchangecharacter/Purchase';\nimport TopIndexApi, { Request as TopIndexApiRequest } from './top/Index';\nimport MissionListApi, { Request as MissionListApiRequest } from './mission/List';\nimport MissionReceiveRewardApi, { Request as MissionReceiveRewardApiRequest } from './mission/ReceiveReward';\nimport ActivityListApi, { Request as ActivityListApiRequest } from './activity/List';\nimport TeamCharacterApi, { Request as TeamCharacterApiRequest } from './team/Characters';\nimport TermsGetApi, { Request as TermsGetApiRequest } from './terms/Get';\nimport TermsAgreeApi, { Request as TermsAgreeApiRequest } from './terms/Agree';\nimport MarketTopApi, { Request as MarketTopApiRequest } from './market/Top';\nimport MarketExhibitApi, { Request as MarketExhibitApiRequest } from './market/Exhibit';\nimport MarketNftListApi, { Request as MarketNftListApiRequest } from \"./market/NftList\";\n\n/** 通信共通ヘッダー */\nconst DefaultHeader:HeadersInit = {\n 'Accept': 'application/json',\n 'Accept-Encoding': 'gzip, deflate, br',\n 'Access-Control-Allow-Origin': '*',\n 'Content-Type': 'application/json;charset=UTF-8',\n 'Connection': 'keep-alive',\n}\n/**\n * アプリケーションで使用するAPI\n */\nconst APIS = (() => {\n /**\n * jsonとしてCMSApiと通信を行う\n * @param request\n * @returns\n */\n const callapi = async function(request:Api): Promise {\n let headers: HeadersInit = DefaultHeader;\n // フォームデータとして送るかどうか\n let body:any = {...request.request};\n // パラメータからtokenを削除\n if (body.token) {\n delete body.token;\n }\n\n // GETはパラメータをクエリに変換\n let url = (request.method === 'GET')\n ? `${request.url}?${new URLSearchParams(body).toString()}` \n : request.url;\n try {\n var response = await fetch(\n url,\n {\n method: request.method,\n headers: headers,\n body: (request.method === 'GET')? null: JSON.stringify(body),\n credentials: 'include',\n cache: 'no-cache',\n });\n\n if (!response.ok) {\n return Promise.reject({\n httpStatusCode: response.status,\n errorCode: -1,\n errorHttpStatus: true,\n errorMessage: `api: ${request.url} fail.\\n${response.statusText}`\n });\n }\n let responseObject = await response.json();\n let responseData = request.parseResponse(responseObject);\n if (responseData.errorCode) {\n console.log(\"error\", responseData);\n responseData.httpStatusCode = 200;\n responseData.errorHttpStatus = false;\n return Promise.reject(responseData);\n }\n console.log(\"success\", responseData)\n return responseData;\n } catch(e) {\n console.warn(`api request exception occur.\\n${url}`, e);\n return Promise.reject({\n httpStatusCode: -1,\n errorCode: 0,\n errorHttpStatus: false,\n errorMessage: `api: ${request.url} exception occur.`\n });\n }\n }\n // APIが増えたらここを増やす\n return {\n create: async(request:CreateApiRequest) => callapi(new CreateApi(request)),\n login: async(request:LoginApiRequest) => callapi(new LoginApi(request)),\n logout: async(request:LogoutApiRequest) => callapi(new LogoutApi(request)),\n idapLogin: async(request:IDapLoginApiRequest) => callapi(new IDapLoginApi(request)),\n idapLoginCallback: async(request:IDapLoginCallbackApiRequest) => callapi(new IDapLoginCallbackApi(request)),\n userCharaList: async(request:UserCharaListApiRequest) => callapi(new UserCharaListApi(request)),\n userCharaDetail: async(request:UserCharaDetailApiRequest) => callapi(new UserCharaDetailApi(request)),\n userCharaWriteProfile: async(request:UserCharaWriteProfileApiRequest) => callapi(new UserCharaWriteProfileApi(request)),\n userCharaLike: async(request:UserCharaLikeApiRequest) => callapi(new UserCharaLikeApi(request)),\n exchangeCharaList: async(request:ExchangeCharaListApiRequest) => callapi(new ExchangeCharaListApi(request)),\n exchangeCharaPurchase: async(request:ExchangeCharaPurchaseApiRequest) => callapi(new ExchangeCharaPurchaseApi(request)),\n topIndex: async(request:TopIndexApiRequest) => callapi(new TopIndexApi(request)),\n missionList: async(request:MissionListApiRequest) => callapi(new MissionListApi(request)),\n missionReceiveReward: async(request:MissionReceiveRewardApiRequest) => callapi(new MissionReceiveRewardApi(request)),\n activityList: async(request:ActivityListApiRequest) => callapi(new ActivityListApi(request)),\n teamCharaList: async(request:TeamCharacterApiRequest) => callapi(new TeamCharacterApi(request)),\n termsGet: async(request:TermsGetApiRequest) => callapi(new TermsGetApi(request)),\n termsAgree: async(request:TermsAgreeApiRequest) => callapi(new TermsAgreeApi(request)),\n marketTop: async(request:MarketTopApiRequest) => callapi(new MarketTopApi(request)),\n marketExhibit: async(request:MarketExhibitApiRequest) => callapi(new MarketExhibitApi(request)),\n marketNftList: async(request:MarketNftListApiRequest) => callapi(new MarketNftListApi(request)),\n characterRankup: async(request:UserCharacterRankupApiRequest) => callapi(new UserCharacterRankupApi(request)),\n characterGetRankupMaterial: async(request:UserCharacterGetRankupMaterialApiRequest) => callapi(new UserCharacterGetRankupMaterialApi(request)),\n }\n})();\nexport default APIS;\n","import React from 'react';\n\n/** 見出しコンポーネント */\ntype PropsType = {\n text: string,\n level: 0 | 1 | 2 | 3,\n}\nconst Component:React.FC = (props: PropsType) => {\n if (props.level === 3) {\n return (\n {props.text}
\n );\n }\n if (props.level === 2) {\n return (\n {props.text}
\n );\n }\n if (props.level === 1) {\n return (\n {props.text}
\n );\n }\n return (\n {props.text}
\n );\n}\nexport default Component;\n","import React from 'react';\nimport {Location, NavigateFunction, useLocation} from 'react-router-dom';\nimport { DialogPropsType, useAppOperationContext } from '../../provider/AppProvider';\nimport APIS from '../../api/Api';\nimport { Response as TermsGetResponse } from '../../api/terms/Get';\nimport { Response as TermAgreeResponse } from '../../api/terms/Agree';\nimport { Response as IDapLoginResponnse } from '../../api/idap/Login';\nimport { Response as LogoutResponse } from '../../api/account/Logout';\nimport { commonApiErrorHandler } from '../../util/Util';\nimport Headline from '../component/Headline';\n\n/** メニュコンポーネント */\ntype PropsType = DialogPropsType & {\n navigate: NavigateFunction,\n location: Location,\n needLogin: boolean,\n}\nconst Component:React.FC = (props: PropsType) => {\n const appOperation = useAppOperationContext();\n const [terms, setTerms] = React.useState();\n const [isConfirmTerms, setIsConfirmTerms] = React.useState(false);\n // ダイアログの表示状態\n const [isDialogOpen, setIsDialogOpen] = React.useState(false);\n\n // ルーティングの場所を取得\n const location = useLocation();\n // 初回レンダリング時の location を記録\n const [initialLocation] = React.useState(location);\n\n React.useEffect(() => {\n if (isDialogOpen && location !== initialLocation && props.close) {\n setIsDialogOpen(false);\n props.close();\n }\n }, [location, initialLocation, props, isDialogOpen]);\n\n React.useEffect(() => {\n appOperation.setApi(\n () => APIS.termsGet({}),\n (res) => {\n setTerms(res);\n setIsDialogOpen(true);\n });\n }, []);\n\n\n const handlerClose = (event: React.MouseEvent) => {\n event.preventDefault();\n setIsDialogOpen(false);\n if (appOperation.isIDapLogin) {\n appOperation.setApi(\n () => APIS.logout({\n guid: appOperation.guid,\n }),\n (res) => {\n if (res.isSuccess) {\n appOperation.clerAuthInfo();\n window.location.replace(`${window.location.origin}/${process.env.PUBLIC_URL}`);\n }\n },\n undefined, \n commonApiErrorHandler(appOperation, props.navigate, props.location, true)\n );\n } else {\n props.close && props.close();\n }\n }\n const handlerAgree = (event: React.MouseEvent) => {\n event.preventDefault();\n if (terms === undefined) {\n return;\n }\n if (!isConfirmTerms) {\n setIsConfirmTerms(true);\n } else {\n appOperation.setApi(\n () => APIS.termsAgree({ mstTermId: terms.mstTermId }),\n (res) => {\n if (res.isSuccess) {\n if (props.needLogin) {\n // 同フレーム内でAPIはセットできない。\n setTimeout(() => {\n props.close && props.close();\n appOperation.setApi(\n () => APIS.idapLogin({}),\n (res) => {\n window.location.href = res.iDapLoginUrl;\n },\n undefined, \n commonApiErrorHandler(appOperation, props.navigate, props.location, false)\n );\n }, 1);\n } else {\n props.close && props.close();\n }\n } else {\n alert('利用規約の更新に失敗しました。');\n }\n });\n }\n }\n if (isConfirmTerms) {\n return (\n <>\n \n \n \n \n \n
\n \n );\n }\n return (\n <>\n \n \n \n \n \n
\n \n );\n}\nexport default Component;\n","import { Location, NavigateFunction } from 'react-router-dom';\nimport APIS from 'api/Api';\nimport { ErrorCode, ResponseType } from 'api/Define';\nimport { Response as TermsGetResponse } from 'api/terms/Get';\nimport { AppOperationContextType } from 'provider/AppProvider';\nimport TermsOfUse from '../view/dialog/TermsOfUse';\n\n/**\n * 改行文字列をbrタグに置き換えて出力する\n * @param str \n * @returns \n */\nexport const nl2br = (str:string) => {\n const regex = /(\\n)/g;\n let index = 0;\n return str.split(regex).map(function (line) {\n return (line.match(regex))?
: line;\n });\n}\n/**\n * ライク数を表示する\n * @param cnt ライク数\n */\nexport const showLikeCount = (cnt: number) => {\n // if (cnt >= 1000000) {\n // return `${~~(cnt * 10 / 1000000) / 10}M`; \n // }\n // if (cnt >= 1000) {\n // return `${~~(cnt * 10 / 1000) / 10}K`; \n // }\n return cnt;\n}\n\n/**\n * 共通APIエラー処理（30000番台）\n * @param appOperation アプリケーションコンテキスト\n * @param navigate ナビゲーション\n * @param location ロケーション\n * @returns 共通処理\n */\nexport const commonApiErrorHandler = (\n appOperation: AppOperationContextType, \n navigate: NavigateFunction,\n location: Location,\n needReturnTop: boolean,\n needLogin?: boolean) => {\n return (response: ResponseType) => {\n // 利用規約更新エラーでなければスルー\n if (response.errorCode !== ErrorCode.NOT_AGREE_TERM \n && response.errorCode !== ErrorCode.INIT_AGREE_TERM) {\n return true;\n }\n // ダイアログ非表示\n appOperation.clearDialog();\n if (needReturnTop && location.pathname !== `${process.env.PUBLIC_URL}/`) {\n // トップでなければトップに遷移する\n window.location.replace(`${window.location.origin}${process.env.PUBLIC_URL}`);\n } else {\n // 利用規約を表示する\n appOperation.setDialog();\n }\n return false;\n }\n }\n\n/**\n * 画面遷移を行う\n * iOS safariでは非同期処理後のwindow.openが効かない\n * @param url 遷移先\n */\nexport const windowOpen = (url: string) => {\n if (!window.open(url)) {\n window.location.assign(url);\n }\n}\n","import React from 'react';\nimport { useNavigate, useLocation } from 'react-router-dom';\nimport { useAppOperationContext } from '../../provider/AppProvider';\nimport APIS from '../../api/Api';\nimport { Response as IDapLoginResponnse } from '../../api/idap/Login';\nimport { Response as LogoutResponse } from '../../api/account/Logout';\nimport { commonApiErrorHandler } from '../../util/Util';\nimport ExchangeBtn from '../../img/header/btn_exchange.png';\nimport KonamiLogo from '../../img/header/konami_logo.png';\n\n/** メニュコンポーネント */\ntype PropsType = {\n}\nconst Component:React.FC = (props: PropsType) => {\n const appOperation = useAppOperationContext();\n const navigate = useNavigate();\n const location = useLocation();\n const handlerClickIDapLogin = (event:React.MouseEvent) => {\n event.preventDefault();\n appOperation.setApi(\n () => APIS.idapLogin({}),\n (res) => {\n window.location.href = res.iDapLoginUrl;\n },\n undefined, \n commonApiErrorHandler(appOperation, navigate, location, false, true)\n );\n }\n const handlerClickLogout = (event:React.MouseEvent) => {\n event.preventDefault();\n appOperation.setApi(\n () => APIS.logout({\n guid: appOperation.guid,\n }),\n (res) => {\n if (res.isSuccess) {\n appOperation.clerAuthInfo();\n window.location.replace(`${window.location.origin}/${process.env.PUBLIC_URL}`);\n }\n },\n undefined, \n commonApiErrorHandler(appOperation, navigate, location, false)\n );\n }\n const handlerProfilePoint = (event:React.MouseEvent) => {\n event.preventDefault();\n navigate(`${process.env.PUBLIC_URL}/mycharacter`);\n }\n const showMenu = () => {\n if(appOperation.isIDapLogin){\n return (\n \n - \n {appOperation.profilePoint}\n
\n - \n {appOperation.exchangePoint}\n
\n
\n );\n }else{\n return (\n \n - \n ここからスタート\n
\n
\n );\n }\n }\n return (\n \n );\n}\nexport default Component;\n","/**\n * NOTE: If you refactor this to split up the modules into separate files,\n * you'll need to update the rollup config for react-router-dom-v5-compat.\n */\nimport * as React from \"react\";\nimport type {\n NavigateOptions,\n RelativeRoutingType,\n RouteObject,\n To,\n} from \"react-router\";\nimport {\n Router,\n createPath,\n useHref,\n useLocation,\n useMatch,\n useMatches,\n useNavigate,\n useNavigation,\n useResolvedPath,\n UNSAFE_DataRouterContext as DataRouterContext,\n UNSAFE_DataRouterStateContext as DataRouterStateContext,\n UNSAFE_RouteContext as RouteContext,\n UNSAFE_enhanceManualRouteObjects as enhanceManualRouteObjects,\n} from \"react-router\";\nimport type {\n BrowserHistory,\n Fetcher,\n FormEncType,\n FormMethod,\n GetScrollRestorationKeyFunction,\n HashHistory,\n History,\n HydrationState,\n Router as RemixRouter,\n} from \"@remix-run/router\";\nimport {\n createRouter,\n createBrowserHistory,\n createHashHistory,\n invariant,\n matchPath,\n} from \"@remix-run/router\";\n\nimport type {\n SubmitOptions,\n ParamKeyValuePair,\n URLSearchParamsInit,\n} from \"./dom\";\nimport {\n createSearchParams,\n defaultMethod,\n getFormSubmissionInfo,\n getSearchParamsForLocation,\n shouldProcessLinkClick,\n} from \"./dom\";\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Re-exports\n////////////////////////////////////////////////////////////////////////////////\n\nexport type {\n FormEncType,\n FormMethod,\n ParamKeyValuePair,\n SubmitOptions,\n URLSearchParamsInit,\n};\nexport { createSearchParams };\n\n// Note: Keep in sync with react-router exports!\nexport type {\n ActionFunction,\n ActionFunctionArgs,\n AwaitProps,\n DataRouteMatch,\n DataRouteObject,\n Fetcher,\n Hash,\n IndexRouteProps,\n JsonFunction,\n LayoutRouteProps,\n LoaderFunction,\n LoaderFunctionArgs,\n Location,\n MemoryRouterProps,\n NavigateFunction,\n NavigateOptions,\n NavigateProps,\n Navigation,\n Navigator,\n OutletProps,\n Params,\n ParamParseKey,\n Path,\n PathMatch,\n Pathname,\n PathPattern,\n PathRouteProps,\n RedirectFunction,\n RelativeRoutingType,\n RouteMatch,\n RouteObject,\n RouteProps,\n RouterProps,\n RouterProviderProps,\n RoutesProps,\n Search,\n ShouldRevalidateFunction,\n To,\n} from \"react-router\";\nexport {\n AbortedDeferredError,\n Await,\n MemoryRouter,\n Navigate,\n NavigationType,\n Outlet,\n Route,\n Router,\n RouterProvider,\n Routes,\n createMemoryRouter,\n createPath,\n createRoutesFromChildren,\n createRoutesFromElements,\n defer,\n isRouteErrorResponse,\n generatePath,\n json,\n matchPath,\n matchRoutes,\n parsePath,\n redirect,\n renderMatches,\n resolvePath,\n useActionData,\n useAsyncError,\n useAsyncValue,\n useHref,\n useInRouterContext,\n useLoaderData,\n useLocation,\n useMatch,\n useMatches,\n useNavigate,\n useNavigation,\n useNavigationType,\n useOutlet,\n useOutletContext,\n useParams,\n useResolvedPath,\n useRevalidator,\n useRouteError,\n useRouteLoaderData,\n useRoutes,\n} from \"react-router\";\n\n///////////////////////////////////////////////////////////////////////////////\n// DANGER! PLEASE READ ME!\n// We provide these exports as an escape hatch in the event that you need any\n// routing data that we don't provide an explicit API for. With that said, we\n// want to cover your use case if we can, so if you feel the need to use these\n// we want to hear from you. Let us know what you're building and we'll do our\n// best to make sure we can support you!\n//\n// We consider these exports an implementation detail and do not guarantee\n// against any breaking changes, regardless of the semver release. Use with\n// extreme caution and only if you understand the consequences. Godspeed.\n///////////////////////////////////////////////////////////////////////////////\n\n/** @internal */\nexport {\n UNSAFE_DataRouterContext,\n UNSAFE_DataRouterStateContext,\n UNSAFE_DataStaticRouterContext,\n UNSAFE_NavigationContext,\n UNSAFE_LocationContext,\n UNSAFE_RouteContext,\n UNSAFE_enhanceManualRouteObjects,\n} from \"react-router\";\n//#endregion\n\ndeclare global {\n var __staticRouterHydrationData: HydrationState | undefined;\n}\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Routers\n////////////////////////////////////////////////////////////////////////////////\n\nexport function createBrowserRouter(\n routes: RouteObject[],\n opts?: {\n basename?: string;\n hydrationData?: HydrationState;\n window?: Window;\n }\n): RemixRouter {\n return createRouter({\n basename: opts?.basename,\n history: createBrowserHistory({ window: opts?.window }),\n hydrationData: opts?.hydrationData || window?.__staticRouterHydrationData,\n routes: enhanceManualRouteObjects(routes),\n }).initialize();\n}\n\nexport function createHashRouter(\n routes: RouteObject[],\n opts?: {\n basename?: string;\n hydrationData?: HydrationState;\n window?: Window;\n }\n): RemixRouter {\n return createRouter({\n basename: opts?.basename,\n history: createHashHistory({ window: opts?.window }),\n hydrationData: opts?.hydrationData || window?.__staticRouterHydrationData,\n routes: enhanceManualRouteObjects(routes),\n }).initialize();\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Components\n////////////////////////////////////////////////////////////////////////////////\n\nexport interface BrowserRouterProps {\n basename?: string;\n children?: React.ReactNode;\n window?: Window;\n}\n\n/**\n * A `` for use in web browsers. Provides the cleanest URLs.\n */\nexport function BrowserRouter({\n basename,\n children,\n window,\n}: BrowserRouterProps) {\n let historyRef = React.useRef();\n if (historyRef.current == null) {\n historyRef.current = createBrowserHistory({ window, v5Compat: true });\n }\n\n let history = historyRef.current;\n let [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nexport interface HashRouterProps {\n basename?: string;\n children?: React.ReactNode;\n window?: Window;\n}\n\n/**\n * A `` for use in web browsers. Stores the location in the hash\n * portion of the URL so it is not sent to the server.\n */\nexport function HashRouter({ basename, children, window }: HashRouterProps) {\n let historyRef = React.useRef();\n if (historyRef.current == null) {\n historyRef.current = createHashHistory({ window, v5Compat: true });\n }\n\n let history = historyRef.current;\n let [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nexport interface HistoryRouterProps {\n basename?: string;\n children?: React.ReactNode;\n history: History;\n}\n\n/**\n * A `` that accepts a pre-instantiated history object. It's important\n * to note that using your own history object is highly discouraged and may add\n * two versions of the history library to your bundles unless you use the same\n * version of the history library that React Router uses internally.\n */\nfunction HistoryRouter({ basename, children, history }: HistoryRouterProps) {\n const [state, setState] = React.useState({\n action: history.action,\n location: history.location,\n });\n\n React.useLayoutEffect(() => history.listen(setState), [history]);\n\n return (\n \n );\n}\n\nif (__DEV__) {\n HistoryRouter.displayName = \"unstable_HistoryRouter\";\n}\n\nexport { HistoryRouter as unstable_HistoryRouter };\n\nexport interface LinkProps\n extends Omit, \"href\"> {\n reloadDocument?: boolean;\n replace?: boolean;\n state?: any;\n preventScrollReset?: boolean;\n relative?: RelativeRoutingType;\n to: To;\n}\n\n/**\n * The public API for rendering a history-aware .\n */\nexport const Link = React.forwardRef(\n function LinkWithRef(\n {\n onClick,\n relative,\n reloadDocument,\n replace,\n state,\n target,\n to,\n preventScrollReset,\n ...rest\n },\n ref\n ) {\n let href = useHref(to, { relative });\n let internalOnClick = useLinkClickHandler(to, {\n replace,\n state,\n target,\n preventScrollReset,\n relative,\n });\n function handleClick(\n event: React.MouseEvent\n ) {\n if (onClick) onClick(event);\n if (!event.defaultPrevented) {\n internalOnClick(event);\n }\n }\n\n return (\n // eslint-disable-next-line jsx-a11y/anchor-has-content\n \n );\n }\n);\n\nif (__DEV__) {\n Link.displayName = \"Link\";\n}\n\nexport interface NavLinkProps\n extends Omit {\n children?:\n | React.ReactNode\n | ((props: { isActive: boolean; isPending: boolean }) => React.ReactNode);\n caseSensitive?: boolean;\n className?:\n | string\n | ((props: {\n isActive: boolean;\n isPending: boolean;\n }) => string | undefined);\n end?: boolean;\n style?:\n | React.CSSProperties\n | ((props: {\n isActive: boolean;\n isPending: boolean;\n }) => React.CSSProperties | undefined);\n}\n\n/**\n * A wrapper that knows if it's \"active\" or not.\n */\nexport const NavLink = React.forwardRef(\n function NavLinkWithRef(\n {\n \"aria-current\": ariaCurrentProp = \"page\",\n caseSensitive = false,\n className: classNameProp = \"\",\n end = false,\n style: styleProp,\n to,\n children,\n ...rest\n },\n ref\n ) {\n let path = useResolvedPath(to);\n let match = useMatch({ path: path.pathname, end, caseSensitive });\n\n let routerState = React.useContext(DataRouterStateContext);\n let nextLocation = routerState?.navigation.location;\n let nextPath = useResolvedPath(nextLocation || \"\");\n let nextMatch = React.useMemo(\n () =>\n nextLocation\n ? matchPath(\n { path: path.pathname, end, caseSensitive },\n nextPath.pathname\n )\n : null,\n [nextLocation, path.pathname, caseSensitive, end, nextPath.pathname]\n );\n\n let isPending = nextMatch != null;\n let isActive = match != null;\n\n let ariaCurrent = isActive ? ariaCurrentProp : undefined;\n\n let className: string | undefined;\n if (typeof classNameProp === \"function\") {\n className = classNameProp({ isActive, isPending });\n } else {\n // If the className prop is not a function, we use a default `active`\n // class for s that are active. In v5 `active` was the default\n // value for `activeClassName`, but we are removing that API and can still\n // use the old default behavior for a cleaner upgrade path and keep the\n // simple styling rules working as they currently do.\n className = [\n classNameProp,\n isActive ? \"active\" : null,\n isPending ? \"pending\" : null,\n ]\n .filter(Boolean)\n .join(\" \");\n }\n\n let style =\n typeof styleProp === \"function\"\n ? styleProp({ isActive, isPending })\n : styleProp;\n\n return (\n \n {typeof children === \"function\"\n ? children({ isActive, isPending })\n : children}\n \n );\n }\n);\n\nif (__DEV__) {\n NavLink.displayName = \"NavLink\";\n}\n\nexport interface FormProps extends React.FormHTMLAttributes {\n /**\n * The HTTP verb to use when the form is submit. Supports \"get\", \"post\",\n * \"put\", \"delete\", \"patch\".\n */\n method?: FormMethod;\n\n /**\n * Normal `