@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
264 lines (254 loc) • 9.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _SignInScreen = _interopRequireDefault(require("../screens/SignInScreen"));
var _SignUpScreen = _interopRequireDefault(require("../screens/SignUpScreen"));
var _AccountCenterScreen = _interopRequireDefault(require("../screens/AccountCenterScreen"));
var _AccountSwitcherScreen = _interopRequireDefault(require("../screens/AccountSwitcherScreen"));
var _SessionManagementScreen = _interopRequireDefault(require("../screens/SessionManagementScreen"));
var _AccountOverviewScreen = _interopRequireDefault(require("../screens/AccountOverviewScreen"));
var _AccountSettingsScreen = _interopRequireDefault(require("../screens/AccountSettingsScreen"));
var _PremiumSubscriptionScreen = _interopRequireDefault(require("../screens/PremiumSubscriptionScreen"));
var _BillingManagementScreen = _interopRequireDefault(require("../screens/BillingManagementScreen"));
var _AppInfoScreen = _interopRequireDefault(require("../screens/AppInfoScreen"));
var _KarmaCenterScreen = _interopRequireDefault(require("../screens/karma/KarmaCenterScreen"));
var _KarmaLeaderboardScreen = _interopRequireDefault(require("../screens/karma/KarmaLeaderboardScreen"));
var _KarmaRulesScreen = _interopRequireDefault(require("../screens/karma/KarmaRulesScreen"));
var _KarmaAboutScreen = _interopRequireDefault(require("../screens/karma/KarmaAboutScreen"));
var _KarmaRewardsScreen = _interopRequireDefault(require("../screens/karma/KarmaRewardsScreen"));
var _KarmaFAQScreen = _interopRequireDefault(require("../screens/karma/KarmaFAQScreen"));
var _ProfileScreen = _interopRequireDefault(require("../screens/ProfileScreen"));
var _FileManagementScreen = _interopRequireDefault(require("../screens/FileManagementScreen"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// Import screens
// Import types
// Define route configuration with screen components and default snap points
const routes = {
SignIn: {
component: _SignInScreen.default,
snapPoints: ['10%', '80%']
},
SignUp: {
component: _SignUpScreen.default,
snapPoints: ['10%', '90%']
},
AccountCenter: {
component: _AccountCenterScreen.default,
snapPoints: ['60%', '100%']
},
AccountSwitcher: {
component: _AccountSwitcherScreen.default,
snapPoints: ['70%', '100%']
},
SessionManagement: {
component: _SessionManagementScreen.default,
snapPoints: ['70%', '100%']
},
AccountOverview: {
component: _AccountOverviewScreen.default,
snapPoints: ['60%', '85%']
},
AccountSettings: {
component: _AccountSettingsScreen.default,
snapPoints: ['60%', '100%']
},
PremiumSubscription: {
component: _PremiumSubscriptionScreen.default,
snapPoints: ['70%', '100%']
},
BillingManagement: {
component: _BillingManagementScreen.default,
snapPoints: ['70%', '100%']
},
AppInfo: {
component: _AppInfoScreen.default,
snapPoints: ['60%', '90%']
},
KarmaCenter: {
component: _KarmaCenterScreen.default,
snapPoints: ['60%', '100%']
},
KarmaLeaderboard: {
component: _KarmaLeaderboardScreen.default,
snapPoints: ['60%', '100%']
},
KarmaRules: {
component: _KarmaRulesScreen.default,
snapPoints: ['60%', '90%']
},
AboutKarma: {
component: _KarmaAboutScreen.default,
snapPoints: ['60%', '90%']
},
KarmaRewards: {
component: _KarmaRewardsScreen.default,
snapPoints: ['60%', '90%']
},
KarmaFAQ: {
component: _KarmaFAQScreen.default,
snapPoints: ['60%', '90%']
},
Profile: {
component: _ProfileScreen.default,
snapPoints: ['60%', '90%']
},
FileManagement: {
component: _FileManagementScreen.default,
snapPoints: ['70%', '100%']
}
};
const OxyRouter = ({
oxyServices,
initialScreen,
onClose,
onAuthenticated,
theme,
adjustSnapPoints,
navigationRef,
containerWidth
}) => {
const [currentScreen, setCurrentScreen] = (0, _react.useState)(initialScreen);
const [screenHistory, setScreenHistory] = (0, _react.useState)([initialScreen]);
const [screenProps, setScreenProps] = (0, _react.useState)({});
// Update snap points when the screen changes
(0, _react.useEffect)(() => {
if (routes[currentScreen]) {
adjustSnapPoints(routes[currentScreen].snapPoints);
}
}, [currentScreen, adjustSnapPoints]);
// Navigation methods
const navigate = (screen, props = {}) => {
if (routes[screen]) {
setCurrentScreen(screen);
setScreenHistory(prev => [...prev, screen]);
setScreenProps(props);
} else {
console.error(`Screen "${screen}" not found`);
}
};
// Expose the navigate function to the parent component
(0, _react.useEffect)(() => {
if (navigationRef) {
navigationRef.current = navigate;
}
return () => {
if (navigationRef) {
navigationRef.current = null;
}
};
}, [navigate, navigationRef]);
// Expose the navigate method to the parent component (OxyProvider)
(0, _react.useEffect)(() => {
// Set up event listener for navigation events
const handleNavigationEvent = event => {
if (event && event.detail) {
// Support both string and object detail
if (typeof event.detail === 'string') {
const screenName = event.detail;
console.log(`Navigation event received for screen: ${screenName}`);
navigate(screenName);
} else if (typeof event.detail === 'object' && event.detail.screen) {
const {
screen,
props
} = event.detail;
console.log(`Navigation event received for screen: ${screen} with props`, props);
navigate(screen, props || {});
}
}
};
// For React Native - check for global navigation events
let intervalId = null;
if (typeof document !== 'undefined') {
// Web - use custom event listener
document.addEventListener('oxy:navigate', handleNavigationEvent);
} else {
// React Native - poll for global navigation events
intervalId = setInterval(() => {
const globalNav = globalThis.oxyNavigateEvent;
if (globalNav) {
console.log(`RN Navigation event received:`, globalNav);
if (globalNav.screen) {
navigate(globalNav.screen, globalNav.props || {});
}
// Clear the event after processing
globalThis.oxyNavigateEvent = null;
}
}, 100); // Check every 100ms
}
// Cleanup
return () => {
if (typeof document !== 'undefined') {
document.removeEventListener('oxy:navigate', handleNavigationEvent);
}
if (intervalId) {
clearInterval(intervalId);
}
};
}, []);
const goBack = () => {
if (screenHistory.length > 1) {
const newHistory = [...screenHistory];
newHistory.pop();
const previousScreen = newHistory[newHistory.length - 1];
setCurrentScreen(previousScreen);
setScreenHistory(newHistory);
} else {
// If no history, close the UI
if (onClose) {
onClose();
}
}
};
// Render the current screen component
const renderScreen = () => {
const CurrentScreen = routes[currentScreen]?.component;
console.log('[OxyRouter] Rendering screen:', currentScreen);
console.log('[OxyRouter] Available routes:', Object.keys(routes));
console.log('[OxyRouter] Current screen component found:', !!CurrentScreen);
if (!CurrentScreen) {
console.error(`Screen "${currentScreen}" not found`);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.errorContainer
});
}
console.log('[OxyRouter] Rendering screen component for:', currentScreen);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentScreen, {
oxyServices: oxyServices,
navigate: navigate,
goBack: goBack,
onClose: onClose,
onAuthenticated: onAuthenticated,
theme: theme,
containerWidth: containerWidth,
...screenProps
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.container,
children: renderScreen()
});
};
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1,
minHeight: 200,
// Ensure minimum height
backgroundColor: 'transparent' // Make sure it's visible
},
errorContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
minHeight: 100,
backgroundColor: 'red' // Make errors visible
}
});
var _default = exports.default = OxyRouter;
//# sourceMappingURL=OxyRouter.js.map