feat: 🎸 Started on provider for selecting platform + feature to

apps/skolplattformen-sthlm/App.js

@@ -1,20 +1,28 @@
 import * as eva from '@eva-design/eva'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import CookieManager from '@react-native-cookies/cookies'
-import init from '@skolplattformen/api-hjarntorget'
+import initSkolplattformen from '@skolplattformen/api-skolplattformen'
+import initHjarntorget from '@skolplattformen/api-hjarntorget'
+
 import { ApiProvider } from '@skolplattformen/hooks'
 import { ApplicationProvider, IconRegistry } from '@ui-kitten/components'
 import { EvaIconsPack } from '@ui-kitten/eva-icons'
-import React, { useState } from 'react'
+import React, { useContext } from 'react'
 import { StatusBar, useColorScheme } from 'react-native'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { AppNavigator } from './components/navigation.component'
 import { LanguageProvider } from './context/language/languageContext'
+import {
+  SchoolPlatformProvider,
+  SchoolPlatformContext,
+} from './context/schoolPlatform/schoolPlatformContext'
 import { default as customMapping } from './design/mapping.json'
 import { darkTheme, lightTheme } from './design/themes'
 import useSettingsStorage from './hooks/useSettingsStorage'
 import { translations } from './utils/translation'
-const api = init(fetch, CookieManager)
+
+const apiSkolplattformen = initSkolplattformen(fetch, CookieManager)
+const apiHjarntorget = initHjarntorget(fetch, CookieManager)
 
 const reporter = __DEV__
   ? {
@@ -59,26 +67,31 @@ export default () => {
   const systemTheme = useColorScheme()
 
   const colorScheme = usingSystemTheme ? systemTheme : theme
-
   return (
-    <ApiProvider api={api} storage={AsyncStorage} reporter={reporter}>
-      <SafeAreaProvider>
-        <StatusBar
-          backgroundColor={colorScheme === 'dark' ? '#2E3137' : '#FFF'}
-          barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
-          translucent
-        />
-        <IconRegistry icons={EvaIconsPack} />
-        <ApplicationProvider
-          {...eva}
-          customMapping={customMapping}
-          theme={colorScheme === 'dark' ? darkTheme : lightTheme}
-        >
-          <LanguageProvider cache={true} data={translations}>
-            <AppNavigator />
-          </LanguageProvider>
-        </ApplicationProvider>
-      </SafeAreaProvider>
-    </ApiProvider>
+    <SchoolPlatformProvider>
+      <ApiProvider
+        api={apiSkolplattformen}
+        storage={AsyncStorage}
+        reporter={reporter}
+      >
+        <SafeAreaProvider>
+          <StatusBar
+            backgroundColor={colorScheme === 'dark' ? '#2E3137' : '#FFF'}
+            barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
+            translucent
+          />
+          <IconRegistry icons={EvaIconsPack} />
+          <ApplicationProvider
+            {...eva}
+            customMapping={customMapping}
+            theme={colorScheme === 'dark' ? darkTheme : lightTheme}
+          >
+            <LanguageProvider cache={true} data={translations}>
+              <AppNavigator />
+            </LanguageProvider>
+          </ApplicationProvider>
+        </SafeAreaProvider>
+      </ApiProvider>
+    </SchoolPlatformProvider>
   )
 }

apps/skolplattformen-sthlm/components/login.component.tsx

@@ -13,7 +13,7 @@ import {
   useStyleSheet,
 } from '@ui-kitten/components'
 import Personnummer from 'personnummer'
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import {
   Image,
   Linking,
@@ -22,6 +22,7 @@ import {
   View,
 } from 'react-native'
 import { schema } from '../app.json'
+import { SchoolPlatformContext } from '../context/schoolPlatform/schoolPlatformContext'
 import useSettingsStorage from '../hooks/useSettingsStorage'
 import { useTranslation } from '../hooks/useTranslation'
 import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
@@ -56,8 +57,8 @@ export const Login = () => {
   const [loginMethodIndex, setLoginMethodIndex] =
     useSettingsStorage('loginMethodIndex')
 
-  const [schoolPlatform, setSchoolPlatform] = useSettingsStorage(
-    'currentSchoolPlatform'
+  const { currentSchoolPlatform, changeSchoolPlatform } = useContext(
+    SchoolPlatformContext
   )
 
   const { t } = useTranslation()
@@ -73,11 +74,11 @@ export const Login = () => {
   const schoolPlatforms = [
     {
       id: 'stockholm-skolplattformen',
-      displayName: 'Stockholm stad',
+      displayName: 'Stockholm stad (Skolplattformen)',
     },
     {
       id: 'goteborg-hjarnkontoret',
-      displayName: 'Göteborg stad',
+      displayName: 'Göteborg stad (Hjärntorget)',
     },
   ]
 
@@ -98,7 +99,7 @@ export const Login = () => {
   }
 
   const getSchoolPlatformName = () => {
-    return schoolPlatforms.find((item) => item.id === schoolPlatform)
+    return schoolPlatforms.find((item) => item.id === currentSchoolPlatform)
       ?.displayName
   }
 
@@ -296,10 +297,10 @@ export const Login = () => {
                 title={item.displayName}
                 accessible={true}
                 accessoryRight={
-                  schoolPlatform === item.id ? CheckIcon : undefined
+                  currentSchoolPlatform === item.id ? CheckIcon : undefined
                 }
                 onPress={() => {
-                  setSchoolPlatform(item.id)
+                  changeSchoolPlatform(item.id)
                   setShowSchoolPlatformPicker(false)
                 }}
               />

apps/skolplattformen-sthlm/context/schoolPlatform/schoolPlatformContext.tsx

@@ -0,0 +1,37 @@
+import useSettingsStorage from '../../hooks/useSettingsStorage'
+import React, { createContext } from 'react'
+
+interface SchoolPlatformProps {
+  currentSchoolPlatform: string
+  changeSchoolPlatform: (platform: string) => void
+}
+
+const defaultState: SchoolPlatformProps = {
+  currentSchoolPlatform: 'stockholm-skolplattformen',
+  changeSchoolPlatform: (platform: string) =>
+    console.log('DEBUG ONLY: changing to', platform),
+}
+
+export const SchoolPlatformProvider: React.FC = ({ children }) => {
+  const [currentSchoolPlatform, setCurrentSchoolPlatform] = useSettingsStorage(
+    'currentSchoolPlatform'
+  )
+
+  const changeSchoolPlatform = (platform: string) => {
+    setCurrentSchoolPlatform(platform)
+  }
+
+  return (
+    <SchoolPlatformContext.Provider
+      value={{
+        currentSchoolPlatform,
+        changeSchoolPlatform,
+      }}
+    >
+      {children}
+    </SchoolPlatformContext.Provider>
+  )
+}
+
+export const SchoolPlatformContext =
+  createContext<SchoolPlatformProps>(defaultState)

apps/skolplattformen-sthlm/hooks/useSettingsStorage.tsx

@@ -9,7 +9,7 @@ export const settingsState = proxy({
     usingSystemTheme: true,
     theme: 'light',
     cachedPersonalIdentityNumber: '',
-    currentSchoolPlatform: 'stockholm-skolplattformen'
+    currentSchoolPlatform: 'stockholm-skolplattformen',
   },
 })
 

libs/api-hjarntorget/lib/features.ts

@@ -0,0 +1,5 @@
+import { Feature } from '@skolplattformen/api'
+
+export const features: Feature[] = [
+    { name: 'login', enabled: true },
+]

libs/api/lib/features.ts

@@ -0,0 +1,4 @@
+export interface Feature {
+    name: string;
+    enabled: boolean;
+}

libs/api/lib/index.ts

@@ -13,4 +13,5 @@ export {
 } from './cookies'
 export { URLSearchParams } from './URLSearchParams'
 
-export { wrap };
+export { wrap };
+export { Feature } from './features'

libs/api/package.json

@@ -2,8 +2,7 @@
   "name": "@skolplattformen/api",
   "version": "0.15.0",
   "description": "",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "lib/index.ts",
   "files": [
     "dist/**/*"
   ],

libs/hooks/src/feature.tsx

@@ -0,0 +1,27 @@
+import { Feature } from '@skolplattformen/api'
+import React from 'react'
+
+const FeatureFlagsContext = React.createContext<Feature[]>([])
+
+interface Props {
+  features: Feature[]
+}
+
+export const FeatureProvider: React.FC<Props> = (props) => {
+  return (
+    <FeatureFlagsContext.Provider value={props.features} {...props}>
+      {props.children}
+    </FeatureFlagsContext.Provider>
+  )
+}
+
+export const useFeature = (name: string) => {
+  const features = React.useContext<Feature[]>(FeatureFlagsContext)
+  if (features === null) {
+    throw new Error('You must wrap your components in a FeatureProvider.')
+  }
+
+  const feature = features.find((f) => f.name === name)
+
+  return feature && feature.enabled
+}