Merge pull request #23 from developmentseed/feature/destine

Destine data

Author: yellowcap

.env

@@ -1,6 +1,9 @@
 APP_TITLE=GFTS
-APP_DESCRIPTION=GFTS point cloud
+APP_DESCRIPTION=Global Fish Tracking System
 
 #MAPBOX_TOKEN=
 
-#DATA_API=''
+#DATA_API=''
+REACT_APP_KEYCLOAK_URL
+REACT_APP_KEYCLOAK_REALM
+REACT_APP_KEYCLOAK_CLIENT_ID

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "static/destine"]
+	path = static/destine
+	url = git@github.com:developmentseed/gfts-destine-data.git

README.md

@@ -23,6 +23,20 @@ Install Node modules:
 yarn install
 ```
 
+### Initialize the Submodules
+The destine data repo is at: https://github.com/developmentseed/gfts-detine-data  
+If you cloned the repository with `git clone --recursive`, you can skip this step. Otherwise, run:
+
+```
+git submodule update --init --recursive
+```
+
+#### How the submodules are used
+The submodule is a private repository that is used to include the Destine data which cannot be publicly shared.
+
+When the app is built, the submodule is copied to the `destine` folder in the `dist` directory. The server will then handle requests to the `destine` folder and block the however is not authenticated.
+**Therefore, even though the data looks like it is freely available, it is actually protected by the server.**
+
 ## Usage
 
 ### Config files
@@ -33,8 +47,8 @@ These files are used to simplify the configuration of the app and should not con
 Run the project locally by copying the `.env` to `.env.local` and setting the following environment variables:
 
 
-| VAR | Description |
-| --- | --- |
+| VAR            | Description              |
+| -------------- | ------------------------ |
 | `MAPBOX_TOKEN` | Mapbox token for the map |
 
 ### Starting the app

app/components/auth/context.tsx

@@ -0,0 +1,130 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import Keycloak from 'keycloak-js';
+
+const url = process.env.REACT_APP_KEYCLOAK_URL;
+const realm = process.env.REACT_APP_KEYCLOAK_REALM;
+const clientId = process.env.REACT_APP_KEYCLOAK_CLIENT_ID;
+
+const isAuthEnabled = !!(url && realm && clientId);
+
+const keycloak: Keycloak | undefined = isAuthEnabled
+  ? new (Keycloak as any)({
+      url,
+      realm,
+      clientId
+    })
+  : undefined;
+
+interface UserProfile {
+  groups: string[];
+  username: string;
+}
+
+export type KeycloakContextProps = {
+  initStatus: 'loading' | 'success' | 'error';
+  isLoading: boolean;
+  profile?: UserProfile;
+  hasDPADAccess: boolean;
+} & (
+  | {
+      keycloak: Keycloak;
+      isEnabled: true;
+    }
+  | {
+      keycloak: undefined;
+      isEnabled: false;
+    }
+);
+
+const KeycloakContext = createContext<KeycloakContextProps>({
+  initStatus: 'loading',
+  isEnabled: isAuthEnabled
+} as KeycloakContextProps);
+
+export const KeycloakProvider = (props: { children: React.ReactNode }) => {
+  const [initStatus, setInitStatus] =
+    useState<KeycloakContextProps['initStatus']>('loading');
+  const [profile, setProfile] = useState<UserProfile | undefined>();
+
+  const wasInit = useRef(false);
+
+  useEffect(() => {
+    async function initialize() {
+      if (!keycloak) return;
+      // Keycloak can only be initialized once. This is a workaround to avoid
+      // multiple initialization attempts, specially by React double rendering.
+      if (wasInit.current) return;
+      wasInit.current = true;
+
+      try {
+        await keycloak.init({
+          // onLoad: 'login-required',
+          onLoad: 'check-sso',
+          checkLoginIframe: false
+        });
+        if (keycloak.authenticated) {
+          // const profile =
+          //   await (keycloak.loadUserProfile() as unknown as Promise<Keycloak.KeycloakProfile>);
+          setProfile({
+            groups: keycloak.idTokenParsed?.access_group || [],
+            username: keycloak.idTokenParsed?.preferred_username || ''
+          });
+        }
+
+        setInitStatus('success');
+      } catch (err) {
+        setInitStatus('error');
+        // eslint-disable-next-line no-console
+        console.error('Failed to initialize keycloak adapter:', err);
+      }
+    }
+    initialize();
+  }, []);
+
+  const base = {
+    initStatus,
+    isLoading: isAuthEnabled && initStatus === 'loading',
+    profile,
+    hasDPADAccess: !!(
+      isAuthEnabled &&
+      keycloak?.authenticated &&
+      profile?.groups?.includes('DPAD_Direct_Access')
+    )
+  };
+
+  return (
+    <KeycloakContext.Provider
+      value={
+        isAuthEnabled
+          ? {
+              ...base,
+              keycloak: keycloak!,
+              isEnabled: true
+            }
+          : {
+              ...base,
+              keycloak: undefined,
+              isEnabled: false
+            }
+      }
+    >
+      {props.children}
+    </KeycloakContext.Provider>
+  );
+};
+
+export const useKeycloak = () => {
+  const ctx = useContext(KeycloakContext);
+
+  if (!ctx) {
+    throw new Error('useKeycloak must be used within a KeycloakProvider');
+  }
+
+  return ctx;
+};

app/components/auth/userInfo.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Avatar, IconButton, Tooltip } from '@chakra-ui/react';
+import { CollecticonLogin } from '@devseed-ui/collecticons-chakra';
+
+import { useKeycloak } from './context';
+import SmartLink from '$components/common/smart-link';
+
+export function UserInfo() {
+  const { profile, isLoading, isEnabled, keycloak } = useKeycloak();
+
+  if (!isEnabled) {
+    return null;
+  }
+
+  const isAuthenticated = keycloak.authenticated;
+
+  if (!isAuthenticated || !profile || isLoading) {
+    return (
+      <Tooltip hasArrow label='Login' placement='right' bg='base.500'>
+        <IconButton
+          aria-label='Login'
+          size='sm'
+          variant='ghost'
+          colorScheme='base'
+          _active={{ bg: 'base.100a' }}
+          icon={<CollecticonLogin />}
+          onClick={() => {
+            if (!isLoading) {
+              keycloak.login({
+                redirectUri: window.location.href
+              });
+            }
+          }}
+        />
+      </Tooltip>
+    );
+  }
+
+  const username = profile.username;
+
+  return (
+    <Tooltip hasArrow label='Logout' placement='right' bg='base.500'>
+      <SmartLink
+        to='/'
+        display='block'
+        onClick={(e) => {
+          e.preventDefault();
+          keycloak.clearToken();
+          keycloak.logout({
+            redirectUri: window.location.href
+          });
+        }}
+      >
+        <Avatar
+          size='sm'
+          name={username}
+          bg='secondary.500'
+          color='white'
+          borderRadius='4px'
+        />
+      </SmartLink>
+    </Tooltip>
+  );
+}

app/components/common/app-context.tsx

@@ -13,9 +13,17 @@ interface IndividualContextProps {
   setCurrentPDFIndex: React.Dispatch<React.SetStateAction<number>>;
 }
 
+type DestineLayerType = 'temperature' | 'salinity';
+
 interface SpeciesContextProps {
   group: SpeciesGroup | null;
   setGroup: React.Dispatch<React.SetStateAction<SpeciesGroup | null>>;
+  destineLayer: DestineLayerType | null;
+  setDestineLayer: React.Dispatch<
+    React.SetStateAction<DestineLayerType | null>
+  >;
+  destineYear: number | undefined;
+  setDestineYear: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
 
 interface AppContextProps {
@@ -39,10 +47,18 @@ export const AppContextProvider: React.FC<{ children: ReactNode }> = ({
   };
 
   const [speciesGroup, setSpeciesGroup] = useState<SpeciesGroup | null>(null);
+  const [destineLayer, setDestineLayer] = useState<DestineLayerType | null>(
+    null
+  );
+  const [destineYear, setDestineYear] = useState<number>();
 
   const speciesContextValue = {
     group: speciesGroup,
-    setGroup: setSpeciesGroup
+    setGroup: setSpeciesGroup,
+    destineLayer,
+    setDestineLayer,
+    destineYear,
+    setDestineYear
   };
 
   useLayoutEffect(() => {
@@ -80,4 +96,4 @@ export const useSpeciesContext = (): SpeciesContextProps => {
     );
   }
   return context.species;
-};
+};