v0.0.7-portal-done

src/components/elements/SnapCameraAR/PortalItemRender.tsx

@@ -20,7 +20,7 @@ import {
 
 const faker = require('@faker-js/faker');
 interface IProps {
-  modelIDProps: PortalRowItem;
+  portalIDProps: PortalRowItem;
   bitMask: number;
   onLoadCallback: (uuid: any, state: any) => void;
   onClickStateCallback?: () => void;
@@ -43,7 +43,7 @@ export default class PortalItemRender extends React.PureComponent<
   state: IState = {
     position: [0, -10, -1],
     rotation: [0, 0, 0],
-    scale: this.props.modelIDProps?.scale,
+    scale: this.props.portalIDProps?.scale,
     nodeIsVisible: false,
     shouldBillboard: true,
     insidePortal: true,
@@ -150,17 +150,17 @@ export default class PortalItemRender extends React.PureComponent<
   };
 
   _onPortalEnter = () => {
-    //this.state.insidePortal = true;
-    this.setState({
-      insidePortal: true,
-    });
+    this.state.insidePortal = true;
+    //this.setState({
+    //  insidePortal: true,
+    //});
   };
 
   _onPortalExit = () => {
-    //this.state.insidePortal = false;
-    this.setState({
-      insidePortal: false,
-    });
+    this.state.insidePortal = false;
+    //this.setState({
+    //  insidePortal: false,
+    //});
   };
 
   _setInitialPlacement = (position: any) => {
@@ -192,13 +192,13 @@ export default class PortalItemRender extends React.PureComponent<
     });
   };
 
-  _renderPortalInside(modelItem: PortalRowItem) {
+  _renderPortalInside(portalItem: PortalRowItem) {
     var uuid = faker.datatype.uuid();
     var portalSource: any =
-      this.props.modelIDProps.portal360Image != undefined &&
-      this.props.modelIDProps.portal360Image != null
-        ? this.props.modelIDProps.portal360Image
-        : modelItem.portal360Image;
+      this.props.portalIDProps.portal360Image != undefined &&
+      this.props.portalIDProps.portal360Image != null
+        ? this.props.portalIDProps.portal360Image
+        : portalItem.portal360Image;
     if (
       this._is360Photo(portalSource, portalSource.width, portalSource.height)
     ) {
@@ -294,7 +294,7 @@ export default class PortalItemRender extends React.PureComponent<
   }
 
   render() {
-    var modelItem = this.props.modelIDProps as PortalRowItem;
+    var portalItem = this.props.portalIDProps as PortalRowItem;
     var uuid = faker.datatype.uuid();
     const transformBehaviors: any = {};
     if (this.state.shouldBillboard) {
@@ -332,11 +332,11 @@ export default class PortalItemRender extends React.PureComponent<
 
         <ViroPortalScene
           key={`ms3-${uuid}`}
-          position={modelItem.position}
+          position={portalItem.position}
           onRotate={this._onRotate}
           onPinch={this._onPinch}
           passable={true}
-          scale={modelItem.portalScale}
+          scale={portalItem.portalScale}
           onClickState={() => {}}
           onPortalEnter={this._onPortalEnter}
           onPortalExit={this._onPortalExit}>
@@ -345,14 +345,14 @@ export default class PortalItemRender extends React.PureComponent<
               key={`ms5-${uuid}`}
               lightReceivingBitMask={this.props.bitMask | 1}
               shadowCastingBitMask={this.props.bitMask}
-              type={modelItem.frameType as any}
-              source={modelItem.obj as any}
-              resources={modelItem.resources}
+              type={portalItem.frameType as any}
+              source={portalItem.obj as any}
+              resources={portalItem.resources}
               onLoadStart={this._onObjectLoadStart(uuid)}
               onLoadEnd={this._onObjectLoadEnd(uuid)}
             />
           </ViroPortal>
-          {this._renderPortalInside(modelItem)}
+          {this._renderPortalInside(portalItem)}
         </ViroPortalScene>
       </ViroNode>
     );

src/hooks/useThemeColors.tsx

@@ -15,11 +15,11 @@ type ThemeColors = {
 export default function () {
   const colorScheme = Appearance.getColorScheme();
   const defaultTheme = useSelector(
-    (state: {theme: ThemeState}) => state.theme.theme,
+    (state: {themeSlice: ThemeState}) => state.themeSlice.theme,
   );
 
   const isSystemTheme = useSelector(
-    (state: {theme: ThemeState}) => state.theme.useSystemTheme,
+    (state: {themeSlice: ThemeState}) => state.themeSlice.useSystemTheme,
   ) as boolean;
 
   const currentTheme = !isSystemTheme ? defaultTheme : colorScheme;

src/redux/combinedSelector.ts

@@ -1,19 +1,19 @@
 import {createSelector} from '@reduxjs/toolkit';
 import {ArtRowItem} from './ArtRowItem';
-import {selectArts} from './slices/artSlice';
+import {selectAllArts} from './slices/artSlice';
 import {PortalRowItem} from './PortalRowItem';
-import {selectPortals} from './slices/portalSlice';
+import {selectAllPortals} from './slices/portalSlice';
 /**
  * Filters out users that are NOT in the follow list
  */
-export const selectSortedArts = createSelector([selectArts], (arts) => {
+export const selectSortedArts = createSelector([selectAllArts], (arts) => {
   let currentArts: ArtRowItem[] = arts;
 
   return currentArts;
 });
 
 export const selectSortedPortals = createSelector(
-  [selectPortals],
+  [selectAllPortals],
   (portals) => {
     let currentPortals: PortalRowItem[] = portals;
 

src/redux/rootReducers.ts

@@ -1,23 +1,25 @@
 import {combineReducers} from '@reduxjs/toolkit';
 import {persistCombineReducers} from 'redux-persist';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import theme from './slices/themeSlice';
+import themeSlice from './slices/themeSlice';
 import artSlice from './slices/artSlice';
 import portalSlice from './slices/portalSlice';
-import camera from './slices/cameraSlice';
+import cameraSlice from './slices/cameraSlice';
+import renderSlice from './slices/renderSlice';
 
 //Reducer
 const reducers = {
-  theme,
-  camera,
+  themeSlice,
+  cameraSlice,
   artSlice,
   portalSlice,
+  renderSlice,
 };
 
 const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
-  whitelist: ['theme', 'camera'],
+  whitelist: ['themeSlice', 'cameraSlice'],
 };
 
 export const persistedRootReducer = persistCombineReducers(

src/redux/slices/artSlice.ts

@@ -85,7 +85,7 @@ export const fetchAllSelectionArts = (state: RootState) =>
 export const selectedArt = (state: RootState) => state.artSlice.selectedArt;
 export const fetchPlanStatus = (state: RootState) => state.artSlice.planReady;
 
-export const {selectAll: selectArts} = artsAdapter.getSelectors(
+export const {selectAll: selectAllArts} = artsAdapter.getSelectors(
   (state: RootState) => state.artSlice,
 );
 export default reducer;

src/redux/slices/cameraSlice.ts

@@ -1,7 +1,7 @@
 import {createSlice} from '@reduxjs/toolkit';
 import {RootState} from '../useRedux';
 
-const sliceName = 'camera';
+const sliceName = 'cameraSlice';
 
 const slice = createSlice({
   name: sliceName,
@@ -24,7 +24,7 @@ const slice = createSlice({
 });
 
 export const {changeDefault} = slice.actions;
-export const fetchDefault = (state: RootState) => state.camera;
+export const fetchDefault = (state: RootState) => state.cameraSlice;
 
 export default slice.reducer;
 

src/redux/slices/portalSlice.ts

@@ -96,7 +96,7 @@ export const selectePortal = (state: RootState) =>
 export const fetchPortalPlanStatus = (state: RootState) =>
   state.portalSlice.planReady;
 
-export const {selectAll: selectPortals} = portalsAdapter.getSelectors(
+export const {selectAll: selectAllPortals} = portalsAdapter.getSelectors(
   (state: RootState) => state.portalSlice,
 );
 export default reducer;

src/redux/slices/renderSlice.ts

@@ -0,0 +1,34 @@
+import {createSlice} from '@reduxjs/toolkit';
+import {RootState} from '../useRedux';
+
+const sliceName = 'renderSlice';
+
+interface RenderTypeProps {
+  modelRender: any;
+}
+
+const slice = createSlice({
+  name: sliceName,
+  initialState: {
+    modelRender: 'arts',
+  } as RenderState,
+  reducers: {
+    updateRenderType: (state: RenderState, action: RenderLoad) => {
+      state.modelRender = action.payload.modelRender;
+    },
+  },
+});
+
+export const {updateRenderType} = slice.actions;
+export const fetchCurrentType = (state: RootState) => state.renderSlice;
+export default slice.reducer;
+
+export type RenderState = {
+  modelRender: string;
+};
+
+type RenderLoad = {
+  payload: {
+    modelRender: string;
+  };
+};

src/redux/slices/themeSlice.ts

@@ -1,7 +1,7 @@
 import {createSlice} from '@reduxjs/toolkit';
 import {RootState} from '../useRedux';
 
-const sliceName = 'theme';
+const sliceName = 'themeSlice';
 
 const slice = createSlice({
   name: sliceName,
@@ -29,7 +29,7 @@ const slice = createSlice({
 });
 
 export const {changeTheme, setDefaultTheme} = slice.actions;
-export const selectedTheme = (state: RootState) => state.theme;
+export const selectedTheme = (state: RootState) => state.themeSlice.theme;
 export default slice.reducer;
 
 export type ThemeState = {

src/screens/AcquireAR/AcquireAR.tsx

@@ -26,31 +26,30 @@ import {
   fetchPlanStatus,
   updateSelectedArt,
   updatePlanStatus,
+  selectAllArts,
 } from '@src/redux/slices/artSlice';
 import {
   fetchPortalsAPI,
   updateSelectedPortal,
+  selectAllPortals,
 } from '@src/redux/slices/portalSlice';
-import {
-  selectSortedArts,
-  selectSortedPortals,
-} from '@src/redux/combinedSelector';
+import {updateRenderType} from '@src/redux/slices/renderSlice';
 import {useAppDispatch, useAppSelector} from '@src/redux/useRedux';
 type AcquireARProps = {};
 
 const AcquireAR: React.FC<AcquireARProps> = () => {
   const dispatch = useAppDispatch();
   const {isPass} = React.useContext(PermissionContext);
   const {userToken} = React.useContext(AuthContext);
-  const allArts = useAppSelector(selectSortedArts);
-  const allPortals = useAppSelector(selectSortedPortals);
-
+  //Arts and Portal
+  const allArts = useAppSelector(selectAllArts);
   const planReady = useAppSelector(fetchPlanStatus);
-  const navigation = useNavigation();
+  const allPortals = useAppSelector(selectAllPortals);
 
+  //Navigatiion and button
+  const navigation = useNavigation();
   const fadeIn = React.useRef(new Animated.Value(0)).current;
   const fadeOut = React.useRef(new Animated.Value(1)).current;
-
   const [actionButton, setActionButton] = React.useState<
     'arts' | 'portals' | 'camera'
   >('arts');
@@ -106,6 +105,7 @@ const AcquireAR: React.FC<AcquireARProps> = () => {
 
   const _onItemArtPress = (item: ArtRowItem) => {
     dispatch(updateSelectedArt(item));
+    dispatch(updateRenderType({modelRender: actionButton}));
   };
 
   //PORTALS
@@ -122,6 +122,7 @@ const AcquireAR: React.FC<AcquireARProps> = () => {
 
   const _onItemPortalPress = (item: PortalRowItem) => {
     dispatch(updateSelectedPortal(item));
+    dispatch(updateRenderType({modelRender: actionButton}));
   };
 
   return (
@@ -230,8 +231,10 @@ const AcquireAR: React.FC<AcquireARProps> = () => {
 
           <Container style={[styles.bottomRow]}>
             <Carousel
-              data={allArts}
-              renderContent={_renderItemArts}
+              data={actionButton === 'arts' ? allArts : allPortals}
+              renderContent={
+                actionButton === 'arts' ? _renderItemArts : _renderItemPortals
+              }
               itemWidth={60}
               enableSnap={false}
               hasPagination={false}