DataSync 2.0 (#420)

Co-authored-by: Gianluca <[email protected]>

Author: wtrocki

.gitignore

@@ -32,7 +32,6 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 package-lock.json
-server/src/config/keycloak.json
 
 server/website
 yarn.lock

.graphqlrc.yml

@@ -1,10 +1,10 @@
 ## GraphQL Config Generated by Graphback
-## Please review configuration and adjust it for your own project
+## Configuration is being used to generate client side queries
 schema: ./server/src/schema/schema.graphql
 documents: ./client/src/graphql/**/*.graphql
 extensions:
   graphback:
-    model: ./model
+    model: ./server/model/task.graphql
     crud:
       create: true
       update: true
@@ -15,14 +15,11 @@ extensions:
       subUpdate: true
       subDelete: true
     plugins:
+      ## Schema for preview only - server is not using it as it is generated at runtime
       graphback-schema:
         format: graphql
         outputPath: ./server/src/schema
-      graphback-resolvers:
-        format: 'ts'
-        outputPath: ./server/src/resolvers
+      ## Client side queries
       graphback-client:
         format: 'ts'
-        outputPath: ./client/src/graphql
-      graphback-offix:
-        outputPath: ./server/src/resolvers
+        outputFile: ./client/src/graphql/generated.ts

client/package.json

@@ -22,19 +22,20 @@
     "graphql-tag": "2.10.3",
     "ionicons": "5.0.1",
     "keycloak-js": "10.0.2",
-    "offix-cache": "0.15.1",
-    "offix-client": "0.15.1",
+    "offix-cache": "0.16.0-alpha2",
+    "offix-client": "0.16.0-alpha2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-offix-hooks": "0.15.1",
+    "react-offix-hooks": "0.16.0-alpha2",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-scripts": "3.4.1",
+    "simpl-schema": "1.7.3",
     "subscriptions-transport-ws": "0.9.16",
     "typescript": "3.9.5",
-    "uniforms-ionic": "0.0.11",
     "uniforms": "3.0.0-alpha.4",
-    "uniforms-bridge-simple-schema-2": "3.0.0-alpha.4"
+    "uniforms-bridge-simple-schema-2": "3.0.0-alpha.4",
+    "uniforms-ionic": "0.1.0"
   },
   "scripts": {
     "start": "npm run build && cap serve",
@@ -61,7 +62,8 @@
     ]
   },
   "devDependencies": {
-    "@capacitor/cli": "2.1.2"
+    "@capacitor/cli": "2.1.2",
+    "@types/simpl-schema": "^0.2.7"
   },
   "description": "An Ionic project"
 }

client/public/assets/icon/avatar.svg

@@ -12,6 +12,12 @@
       "type": "image/png",
       "sizes": "512x512",
       "purpose": "maskable"
+    },
+    {
+      "src": "assets/icon/avatar.svg",
+      "type": "image/svg",
+      "sizes": "512x512",
+      "purpose": "maskable"
     }
   ],
   "start_url": ".",

client/public/manifest.json

@@ -15,7 +15,7 @@ export const App: React.FC = () => {
   useEffect(() => {
     const conflictListener: ConflictListener = {
       mergeOccurred() {
-        setShowConflict(true);
+        console.log("Merge occured! ")
       },
       conflictOccurred() {
         setShowConflict(true);

client/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { ApolloOfflineClient } from 'offix-client';
 import { ApolloOfflineProvider } from 'react-offix-hooks';
 import { ApolloProvider } from '@apollo/react-hooks';
-import { AppContext } from './AppContext';
+import { AuthContext } from './AuthContext';
 import { clientConfig } from './config';
 import { Loading } from './components/Loading';
 import { IContainerProps } from './declarations';
@@ -20,7 +20,9 @@ export const AppContainer: React.FC<IContainerProps> = ({ app: App }) => {
     const init = async () => {
       keycloak = await getKeycloakInstance();
       await apolloClient.init();
-
+      if (keycloak) {
+        await keycloak?.loadUserProfile();
+      }
       setInitialized(true);
     }
     init();
@@ -30,13 +32,13 @@ export const AppContainer: React.FC<IContainerProps> = ({ app: App }) => {
 
   // return container with keycloak provider
   return (
-    <AppContext.Provider value={{ keycloak }}>
+    <AuthContext.Provider value={{ keycloak, profile: keycloak?.profile }}>
       <ApolloOfflineProvider client={apolloClient}>
         <ApolloProvider client={apolloClient}>
           <App />
         </ApolloProvider>
       </ApolloOfflineProvider>
-    </AppContext.Provider>
+    </AuthContext.Provider>
   );
 
 

client/src/AppContainer.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { KeycloakInstance, KeycloakProfile } from 'keycloak-js';
+
+export interface IAuthContext {
+    keycloak?: KeycloakInstance | undefined
+    profile?: KeycloakProfile | undefined
+}
+
+export const AuthContext = React.createContext<IAuthContext>({ keycloak: undefined });

client/src/AppContext.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { IonHeader, IonToolbar, IonButtons, IonTitle, IonToast, IonButton, IonIcon } from '@ionic/react';
 import { person, exit, arrowBack } from 'ionicons/icons';
-import { AppContext } from '../AppContext';
+import { AuthContext } from '../AuthContext';
 import { logout } from '../auth/keycloakAuth';
 import { useApolloOfflineClient } from 'react-offix-hooks';
 import { Link } from 'react-router-dom';
@@ -11,7 +11,7 @@ export const Header : React.FC<{ title: string, backHref?: string, match: any, i
   const { url } = match;
 
   const client = useApolloOfflineClient();
-  const { keycloak } = useContext(AppContext);
+  const { keycloak } = useContext(AuthContext);
   const [ showToast, setShowToast ] = useState(false);
 
   const handleLogout = async () => {