poging tot carrousel en verscheidende user functions pages aangemaakt

ReactJS/Native/AlfaPrentice/App/Router/Router.js

@@ -5,7 +5,20 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
 //Pages
-import { Home, SearchPage, Login, CompanyProfile, UserProfile} from '../index';
+import { 
+    Home, 
+    SearchPage, 
+    Login, 
+    CompanyProfile, 
+    UserProfile,
+    AccountSettings,
+    Agenda,
+    Contact,
+    InternStatus,
+    OutgoingSolicitation,
+    Suggestions,
+    Weekscedule,
+  } from '../index';
 
 const Stack = createStackNavigator();
 
@@ -43,6 +56,34 @@ class Routes extends React.Component {
           name="Userprofile"
           component={UserProfile}
         />
+        <Stack.Screen
+          name="Accountinstellingen"
+          component={AccountSettings}
+        />
+        <Stack.Screen
+          name="Agenda"
+          component={Agenda}
+        />
+        <Stack.Screen
+          name="Contact"
+          component={Contact}
+        />
+        <Stack.Screen
+          name="Stagestatus"
+          component={InternStatus}
+        />
+        <Stack.Screen
+          name="Verzondensolicitaties"
+          component={OutgoingSolicitation}
+        />
+        <Stack.Screen
+          name="Suggesties"
+          component={Suggestions}
+        />
+        <Stack.Screen
+          name="Weekstaten"
+          component={Weekscedule}
+        />
       </Stack.Navigator>
     </NavigationContainer>
     )

ReactJS/Native/AlfaPrentice/App/Views/Home.js

@@ -1,12 +1,12 @@
 //Modules
 import React from 'react'
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
-import { Actions } from 'react-native-router-flux';
 
 //Components
-import { DefaultLayout, Hero } from '../index';
+import { DefaultLayout, Hero, } from '../index';
 
-const Home = ({ navigation }) => {
+class Home extends React.Component {
+    render() {
    return (
        <DefaultLayout>
            <Hero HeroHeading="AlfaPrentice" HeroText="De plek ow je ideale stageplek te vinden"/>
@@ -16,4 +16,20 @@ const Home = ({ navigation }) => {
       </DefaultLayout>
    )
 }
-export default Home
+}
+
+const styles = StyleSheet.create({
+    carousel: {
+        height: 200, 
+        width: '100%',
+    },
+    container: {
+        width: 375,
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+      },
+  });
+
+export default Home;

ReactJS/Native/AlfaPrentice/App/Views/Profiles/UserProfile.js

@@ -16,13 +16,13 @@ class UserProfile extends React.Component {
             <DefaultLayout>
                 <View style={Styles.UserProfilePage}>
                     <Hero HeroHeading="Frits Haringa" HeroText="Student Applicatie en Mediaontwikkeling jaar 3"/>
-                    <ProfileLink Page="Home" Title="Status van je stageplek zien"/>
+                    <ProfileLink Page="Accountinstellingen" Title="Status van je stageplek zien"/>
-                    <ProfileLink Page="Home" Title="Uitgaande solicitaites bekijken"/>
+                    <ProfileLink Page="Agenda" Title="Uitgaande solicitaites bekijken"/>
-                    <ProfileLink Page="Home" Title="Account instellingen"/>
+                    <ProfileLink Page="Contact" Title="Account instellingen"/>
-                    <ProfileLink Page="Home" Title="Suggesties"/>
+                    <ProfileLink Page="Stagestatus" Title="Suggesties"/>
-                    <ProfileLink Page="Home" Title="Weekstaten"/>
+                    <ProfileLink Page="Verzondensolicitaties" Title="Weekstaten"/>
-                    <ProfileLink Page="Home" Title="Agenda"/>
+                    <ProfileLink Page="Suggesties" Title="Agenda"/>
-                    <ProfileLink Page="Home" Title="Contact opnemen"/>
+                    <ProfileLink Page="Weekstaten" Title="Contact opnemen"/>
                     <ProfileLink Page="Home" Title="Uitloggen" hr="false"/>
                 </View>
                 

ReactJS/Native/AlfaPrentice/App/Views/Profiles/Userfunctions/AccountSettings.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class AccountSettings extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Account instellingen</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default AccountSettings;

ReactJS/Native/AlfaPrentice/App/Views/Profiles/Userfunctions/Agenda.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class Agenda extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Agenda</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default Agenda;

ReactJS/Native/AlfaPrentice/App/Views/Profiles/Userfunctions/Contact.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class Contact extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Contact</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default Contact;

ReactJS/Native/AlfaPrentice/App/Views/Profiles/Userfunctions/InternStatus.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class InternStatus extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Status stage pagina</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default InternStatus;

ReactJS/Native/AlfaPrentice/App/Views/Profiles/Userfunctions/OutgoingSolicitation.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class OutgoingSolicitation extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>UItgaande solicitaties</Text>
+                </DefaultLayout> 
+        )
+    }
+}
+
+export default OutgoingSolicitation;

ReactJS/Native/AlfaPrentice/App/Views/Profiles/Userfunctions/Suggestions.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class Suggestions extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Suggesties</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default Suggestions;

ReactJS/Native/AlfaPrentice/App/Views/Profiles/Userfunctions/Weekstaten.js

@@ -0,0 +1,18 @@
+//Modules
+import React from 'react';
+import {View, Text} from 'react-native';
+
+//Components
+import { DefaultLayout } from '../../../index';
+
+class Weekscedule extends React.Component {
+    render() {
+        return (
+                <DefaultLayout>
+                    <Text>Weekstaten</Text>
+                </DefaultLayout>
+        )
+    }
+}
+
+export default Weekscedule;

ReactJS/Native/AlfaPrentice/App/index.js

@@ -14,6 +14,13 @@ import SearchPage from './Views/SearchPage';
 import Login from './Views/Login';
 import CompanyProfile from './Views/Profiles/CompanyProfile';
 import UserProfile from './Views/Profiles/UserProfile';
+import AccountSettings from './Views/Profiles/Userfunctions/AccountSettings';
+import Agenda from './Views/Profiles/Userfunctions/Agenda';
+import Contact from './Views/Profiles/Userfunctions/Contact';
+import InternStatus from './Views/Profiles/Userfunctions/InternStatus';
+import OutgoingSolicitation from './Views/Profiles/Userfunctions/OutgoingSolicitation';
+import Suggestions from './Views/Profiles/Userfunctions/Suggestions';
+import Weekscedule from './Views/Profiles/Userfunctions/Weekstaten';
 
 //Components export
 export {
@@ -33,6 +40,13 @@ export {
     Login,
     CompanyProfile,
     UserProfile,
+    AccountSettings,
+    Agenda,
+    Contact,
+    InternStatus,
+    OutgoingSolicitation,
+    Suggestions,
+    Weekscedule,
 }
 
 export default Routes; 

ReactJS/Native/AlfaPrentice/package-lock.json

@@ -1670,6 +1670,11 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz",
       "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ=="
     },
+    "@react-native-community/viewpager": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@react-native-community/viewpager/-/viewpager-1.1.7.tgz",
+      "integrity": "sha512-k9v2KJtAprNPq7IZmedD2VLMePvPW+ohX3uDnkpoKritBji+/RtRmTKrdtPi3Uvp0toq/KtPttAds1dr7AZNpw=="
+    },
     "@react-navigation/core": {
       "version": "5.14.4",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.14.4.tgz",
@@ -1772,6 +1777,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-native-snap-carousel": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/@types/react-native-snap-carousel/-/react-native-snap-carousel-3.8.2.tgz",
+      "integrity": "sha512-ItvLo19gQstxcir6wIXJxwohxdYj9t/lXv+MXfqhwMSYaR+Xa3vOP7b6TYQCe9GqDPH3sEgEg/uH6CLV+fhcWA==",
+      "requires": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
     "@types/react-native-vector-icons": {
       "version": "6.4.6",
       "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.6.tgz",
@@ -6293,6 +6307,36 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-addons-shallow-compare": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz",
+      "integrity": "sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=",
+      "requires": {
+        "fbjs": "^0.8.4",
+        "object-assign": "^4.1.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "fbjs": {
+          "version": "0.8.17",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+          "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+          "requires": {
+            "core-js": "^1.0.0",
+            "isomorphic-fetch": "^2.1.1",
+            "loose-envify": "^1.0.0",
+            "object-assign": "^4.1.0",
+            "promise": "^7.1.1",
+            "setimmediate": "^1.0.5",
+            "ua-parser-js": "^0.7.18"
+          }
+        }
+      }
+    },
     "react-devtools-core": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.10.0.tgz",
@@ -6330,6 +6374,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-mixin": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-mixin/-/react-mixin-3.1.1.tgz",
+      "integrity": "sha512-z9fZ0aCRDjlgxLdMeWkJ9TwhmVLhQ09r8RFpin/cEPA2T6jsb7YHNWcIe0Oii+hhJNyMymdy91CSya5mRkuCkg==",
+      "requires": {
+        "object-assign": "^4.0.1",
+        "smart-mixin": "^2.0.0"
+      }
+    },
     "react-native": {
       "version": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
       "integrity": "sha512-SHhcKW3LF+6Lx8zEbFNeWEuLKcSLv3seeKhEctdfl8Ey19HWdCzQMlDDKhFELBeyLFjrzhpvl4jVTM4h/Sw+YQ==",
@@ -6702,6 +6755,32 @@
         }
       }
     },
+    "react-native-anchor-carousel": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-anchor-carousel/-/react-native-anchor-carousel-3.1.2.tgz",
+      "integrity": "sha512-LPnK0mIK+/+t6gki14fQWMSMA2NbiG9gLGayuw2sNCegTnQQGl+NYbvyHinAH7WEm26dZe1YHlRnNPOaEzqKUQ==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
+    "react-native-carousel": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/react-native-carousel/-/react-native-carousel-0.12.0.tgz",
+      "integrity": "sha512-quuOYsEYPJ0g8YLWNyZ8mc6BVye4kHavQ+Ba/FlNbb4LdVqAyL3jo3Pd9doa96XBh65JCY2B2XNtaGlnHk3t5w==",
+      "requires": {
+        "@react-native-community/viewpager": "^1.1.7",
+        "react-timer-mixin": "^0.13.3"
+      }
+    },
+    "react-native-carousel-view": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-carousel-view/-/react-native-carousel-view-0.5.1.tgz",
+      "integrity": "sha1-Kw1k0y1xvgn/dVWqjBmx2smMWWk=",
+      "requires": {
+        "react-mixin": "^3.0.5",
+        "react-timer-mixin": "^0.13.3"
+      }
+    },
     "react-native-elements": {
       "version": "3.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.0.0-alpha.1.tgz",
@@ -6809,11 +6888,25 @@
       "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz",
       "integrity": "sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw=="
     },
+    "react-native-snap-carousel": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/react-native-snap-carousel/-/react-native-snap-carousel-3.9.1.tgz",
+      "integrity": "sha512-xWEGusacIgK1YaDXLi7Gao2+ISLoGPVEBR8fcMf4tOOJQufutlNwkoLu0l6B8Qgsrre0nTxoVZikRgGRDWlLaQ==",
+      "requires": {
+        "prop-types": "^15.6.1",
+        "react-addons-shallow-compare": "15.6.2"
+      }
+    },
     "react-native-status-bar-height": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.6.0.tgz",
       "integrity": "sha512-z3SGLF0mHT+OlJDq7B7h/jXPjWcdBT3V14Le5L2PjntjjWM3+EJzq2BcXDwV+v67KFNJic5pgA26cCmseYek6w=="
     },
+    "react-native-swiper-hooks": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/react-native-swiper-hooks/-/react-native-swiper-hooks-1.2.5.tgz",
+      "integrity": "sha512-Ytr0RBMaZgJpyw7UUFYzdmUlwRdHLcu7dXn/VUHqiD97FBV2ZDe/kzzfAvP1zIY1y7SE1qjLFWsuwy8fmVUoWQ=="
+    },
     "react-native-tab-view": {
       "version": "2.15.2",
       "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz",
@@ -7406,6 +7499,11 @@
       "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
       "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc="
     },
+    "smart-mixin": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/smart-mixin/-/smart-mixin-2.0.0.tgz",
+      "integrity": "sha1-o0oQVeMqdbMNK048oyPcmctT9Dc="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

ReactJS/Native/AlfaPrentice/package.json

@@ -11,17 +11,23 @@
     "@react-native-community/masked-view": "^0.1.10",
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
+    "@types/react-native-snap-carousel": "^3.8.2",
     "expo": "~39.0.2",
     "expo-status-bar": "~1.0.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+    "react-native-anchor-carousel": "^3.1.2",
+    "react-native-carousel": "^0.12.0",
+    "react-native-carousel-view": "^0.5.1",
     "react-native-elements": "^3.0.0-alpha.1",
     "react-native-gesture-handler": "^1.7.0",
     "react-native-reanimated": "^1.13.2",
     "react-native-router-flux": "^4.2.0",
     "react-native-safe-area-context": "^3.1.4",
     "react-native-screens": "^2.10.1",
+    "react-native-snap-carousel": "^3.9.1",
+    "react-native-swiper-hooks": "^1.2.5",
     "react-native-web": "~0.13.12"
   },
   "devDependencies": {