Merge pull request #21 from Ruffrl/priyapower/add-form-state-to-profiles

Add form state to profiles

apps/rufferal/app.json

@@ -38,9 +38,7 @@
       [
         "expo-camera",
         {
-          "cameraPermission": "Allow Rufferal to access your camera",
-          "microphonePermission": "Allow Rufferal to access your microphone",
-          "recordAudioAndroid": true
+          "cameraPermission": "Allow Rufferal to access your camera"
         }
       ],
       [

apps/rufferal/src/app/screens/Screens.tsx

@@ -2,7 +2,6 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { observer } from 'mobx-react-lite';
 import {
-  CameraScreen,
   CatAvatarScreen,
   CatCareplanScreen,
   CatDetailsScreen,
@@ -39,9 +38,7 @@ export const Screens = observer(() => {
         <Stack.Screen name="Dog Personality" component={DogPersonalityScreen} />
         <Stack.Screen name="Dog Careplan" component={DogCareplanScreen} />
         <Stack.Screen name="Search" component={SearchScreen} />
-
-        <Stack.Screen name="Camera" component={CameraScreen} />
       </Stack.Navigator>
     </NavigationContainer>
   );
-});
+});

apps/rufferal/src/app/screens/index.ts

@@ -9,4 +9,3 @@ export { DogPersonalityScreen } from './pets/dogs/DogPersonalityScreen';
 export { ManagePetsScreen } from './pets/ManagePetsScreen';
 export { PetSplashScreen } from './profile/create/PetSplashScreen';
 export { SearchScreen } from './search/SearchScreen';
-export { CameraScreen } from './photo/camera/CameraScreen';

apps/rufferal/src/app/screens/pets/ManagePetsScreen.tsx

@@ -1,4 +1,5 @@
-import { ManagePets, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { ManagePets } from '@rufferal/ui';
 
 export const ManagePetsScreen = ({ navigation }: PageNavigationProps) => {
   return <ManagePets navigation={navigation} />;

apps/rufferal/src/app/screens/pets/cats/CatAvatarScreen.tsx

@@ -1,5 +1,6 @@
-import { CatAvatar, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { CatAvatar } from '@rufferal/ui';
 
-export const CatAvatarScreen  = ({ navigation }: PageNavigationProps) => {
+export const CatAvatarScreen = ({ navigation }: PageNavigationProps) => {
   return <CatAvatar navigation={navigation} />;
 };

apps/rufferal/src/app/screens/pets/cats/CatCareplanScreen.tsx

@@ -1,5 +1,6 @@
-import { CatCareplan, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { CatCareplan } from '@rufferal/ui';
 
-export const CatCareplanScreen  = ({ navigation }: PageNavigationProps) => {
+export const CatCareplanScreen = ({ navigation }: PageNavigationProps) => {
   return <CatCareplan navigation={navigation} />;
 };

apps/rufferal/src/app/screens/pets/cats/CatDetailsScreen.tsx

@@ -1,4 +1,5 @@
-import { CatDetails, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { CatDetails } from '@rufferal/ui';
 
 export const CatDetailsScreen = ({ navigation }: PageNavigationProps) => {
   return <CatDetails navigation={navigation} />;

apps/rufferal/src/app/screens/pets/cats/CatPersonalityScreen.tsx

@@ -1,5 +1,6 @@
-import { CatPersonality, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { CatPersonality } from '@rufferal/ui';
 
-export const CatPersonalityScreen  = ({ navigation }: PageNavigationProps) => {
+export const CatPersonalityScreen = ({ navigation }: PageNavigationProps) => {
   return <CatPersonality navigation={navigation} />;
 };

apps/rufferal/src/app/screens/pets/dogs/DogAvatarScreen.tsx

@@ -1,5 +1,6 @@
-import { DogAvatar, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { DogAvatar } from '@rufferal/ui';
 
-export const DogAvatarScreen  = ({ navigation }: PageNavigationProps) => {
+export const DogAvatarScreen = ({ navigation }: PageNavigationProps) => {
   return <DogAvatar navigation={navigation} />;
 };

apps/rufferal/src/app/screens/pets/dogs/DogCareplanScreen.tsx

@@ -1,5 +1,6 @@
-import { DogCareplan, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { DogCareplan } from '@rufferal/ui';
 
-export const DogCareplanScreen  = ({ navigation }: PageNavigationProps) => {
+export const DogCareplanScreen = ({ navigation }: PageNavigationProps) => {
   return <DogCareplan navigation={navigation} />;
 };

apps/rufferal/src/app/screens/pets/dogs/DogDetailsScreen.tsx

@@ -1,5 +1,6 @@
-import { DogDetails, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { DogDetails } from '@rufferal/ui';
 
-export const DogDetailsScreen  = ({ navigation }: PageNavigationProps) => {
+export const DogDetailsScreen = ({ navigation }: PageNavigationProps) => {
   return <DogDetails navigation={navigation} />;
 };

apps/rufferal/src/app/screens/pets/dogs/DogPersonalityScreen.tsx

@@ -1,5 +1,6 @@
-import { DogPersonality, PageNavigationProps } from '@rufferal/ui';
+import { PageNavigationProps } from '@rufferal/types';
+import { DogPersonality } from '@rufferal/ui';
 
-export const DogPersonalityScreen  = ({ navigation }: PageNavigationProps) => {
+export const DogPersonalityScreen = ({ navigation }: PageNavigationProps) => {
   return <DogPersonality navigation={navigation} />;
 };

store/src/pet-store/pet-store.tsx

@@ -1,47 +1,88 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Pet } from '@rufferal/types';
 import { generateKey } from '@rufferal/utils';
 import { makeAutoObservable } from 'mobx';
-
-type PetSpecies = 'cat' | 'dog';
-type PetStatus = 'active' | 'inactive';
-
-export interface Pet {
-  avatar: string;
-  breed: string;
-  id?: string;
-  name: string;
-  species: PetSpecies;
-  status?: PetStatus;
-}
+import { makePersistable } from 'mobx-persist-store';
 
 class PetStore {
   pets: Pet[] = [];
+  editingPetId?: string;
 
   constructor() {
     makeAutoObservable(this);
+
+    makePersistable(this, {
+      name: 'PetStore',
+      properties: ['pets'],
+      storage: AsyncStorage,
+    });
+  }
+
+  createPet({ id, ...createParams }: Pet) {
+    if (process.env['NODE_ENV'] === 'development') {
+      const newId = id || generateKey();
+      const newPet: Pet = {
+        id: newId,
+        state: 'active',
+        ...createParams,
+      };
+      this.setEditing({ id: newId });
+      this.pets.push(newPet);
+    }
+  }
+
+  findPet(id?: string) {
+    if (id) {
+      return this.pets.find((pet) => pet.id === id);
+    } else {
+      return undefined;
+    }
+  }
+
+  setEditing({ id }: { id?: string }) {
+    this.editingPetId = id;
   }
 
-  addPet({ id, name, species, breed, avatar }: Pet) {
-    const newPet: Pet = {
-      avatar,
-      breed,
-      id: id || generateKey(),
-      name,
-      species,
-      status: 'active',
-    };
-    this.pets.push(newPet);
+  currentEditingPet() {
+    return this.findPet(this.editingPetId);
   }
 
-  archivePet(petId: string) {
-    const currentPet = this.pets.find((pet) => pet.id === petId);
+  updatePet({ id, ...updateParams }: Pet) {
+    // Find the index of the pet with the specified id
+    const index = this.pets.findIndex((pet) => pet.id === id);
+    // If the pet is found,
+    if (index !== -1) {
+      // remove it from the array and return the pet for updates
+      let [currentPet] = this.pets.splice(index, 1);
+      // modify values
+      currentPet = { ...currentPet, ...updateParams };
+      // add back to array
+      this.pets.push(currentPet);
+    } else {
+      console.error('ERROR: Could not update Pet');
+    }
+  }
+
+  archivePet({ id }: { id: string }) {
+    const currentPet = this.findPet(id);
     if (currentPet) {
-      currentPet.status = 'inactive';
+      currentPet.state = 'inactive';
     }
   }
 
   activePets() {
-    const aPets = this.pets.filter((pet) => pet.status === 'active');
-    return aPets ? aPets : [];
+    const active = this.pets.filter((pet) => pet.state === 'active');
+    return active ? active : [];
+  }
+
+  async resetStorage() {
+    console.log('Resetting PetStore');
+    try {
+      await AsyncStorage.removeItem('PetStore');
+    } catch (e) {
+      console.log('ASYNC ERROR:', e);
+    }
+    console.log('Pet Store reset | pets:', this.pets);
   }
 }
 

tailwind/src/tailwind.config.js

@@ -137,17 +137,17 @@ module.exports = {
           950: '#3E3540',
         },
         red: {
-          50: '#fff3f1',
-          100: '#ffe3df',
-          200: '#ffcbc4',
-          300: '#ffa69b',
-          400: '#ff7462',
-          500: '#ff4931',
-          600: '#e8270e', // PRIMARY
-          700: '#cb200a',
-          800: '#a71f0d',
-          900: '#8a2012',
-          950: '#4c0b03',
+          50: '#FFF3F1',
+          100: '#FFE3DF',
+          200: '#FFCBC4',
+          300: '#FFA69B',
+          400: '#FF7462',
+          500: '#FF4931',
+          600: '#E8270E', // PRIMARY
+          700: '#CB200A',
+          800: '#A71F0D',
+          900: '#8A2012',
+          950: '#4C0B03',
         },
         silver: {
           50: '#F7F7F7',

tsconfig.base.json

@@ -15,6 +15,7 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
+      "@rufferal/types": ["types/src/index.ts"],
       "@rufferal/assets/*": ["assets/*"],
       "@rufferal/store": ["store/src/index.ts"],
       "@rufferal/tailwind": ["tailwind/src/index.ts"],

types/.babelrc.js

@@ -0,0 +1,21 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@nx/react/babel',
+        {
+          runtime: 'automatic',
+          useBuiltIns: 'usage',
+        },
+      ],
+    ],
+    plugins: [],
+    env: {
+      test: {
+        presets: ['babel-preset-expo'],
+      },
+    },
+  };
+};

types/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", ".expo", "web-build", "cache", "dist"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

types/README.md

@@ -0,0 +1,7 @@
+# types
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test types` to execute the unit tests via [Jest](https://jestjs.io).

types/jest.config.ts

@@ -0,0 +1,21 @@
+module.exports = {
+  displayName: 'types',
+  resolver: '@nx/jest/plugins/resolver',
+  preset: 'jest-expo',
+  moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  moduleNameMapper: {
+    '\\.svg$': '@nx/expo/plugins/jest/svg-mock',
+  },
+  transform: {
+    '.[jt]sx?$': [
+      'babel-jest',
+      {
+        configFile: __dirname + '/.babelrc.js',
+      },
+    ],
+    '^.+.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp|ttf|otf|m4v|mov|mp4|mpeg|mpg|webm|aac|aiff|caf|m4a|mp3|wav|html|pdf|obj)$':
+      require.resolve('jest-expo/src/preset/assetFileTransformer.js'),
+  },
+  coverageDirectory: '../coverage/types',
+};

types/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "types",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "types/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project types --web",
+  "targets": {}
+}

types/src/index.ts

@@ -0,0 +1,2 @@
+export * from './store'
+export * from './ui'

types/src/store/index.ts

@@ -0,0 +1 @@
+export * from './pets'