@kaspernj/api-maker 1.0.350 → 1.0.352

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.350",
+  "version": "1.0.352",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -70,7 +70,7 @@
     "babel-jest": "^29.0.1",
     "eslint": "^8.2.0",
     "eslint-find-rules": "^4.0.0",
-    "eslint-plugin-jest": "^27.0.1",
+    "eslint-plugin-jest": "^28.2.0",
     "eslint-plugin-react": "^7.23.2",
     "i18n-on-steroids": "^1.0.7",
     "jest": "^29.0.1",

package/src/api.mjs

@@ -1,26 +1,21 @@
 import config from "./config.mjs"
 import CustomError from "./custom-error.mjs"
 import FormDataObjectizer from "form-data-objectizer"
+import Logger from "./logger.mjs"
 import qs from "qs"
+import SessionStatusUpdater from "./session-status-updater.mjs"
 
-export default class Api {
-  static get(path, pathParams = null) {
-    return Api.requestLocal({path, pathParams, method: "GET"})
-  }
+const logger = new Logger({name: "ApiMaker / Api"})
 
-  static delete(path, pathParams = null) {
-    return Api.requestLocal({path, pathParams, method: "DELETE"})
-  }
-
-  static patch(path, data = {}) {
-    return Api.requestLocal({path, data, method: "PATCH"})
-  }
+// logger.setDebug(true)
 
-  static post(path, data = {}) {
-    return Api.requestLocal({path, data, method: "POST"})
-  }
+export default class Api {
+  static get = async (path, pathParams = null) =>  await Api.requestLocal({path, pathParams, method: "GET"})
+  static delete = async (path, pathParams = null) => await Api.requestLocal({path, pathParams, method: "DELETE"})
+  static patch = async (path, data = {}) => await Api.requestLocal({path, data, method: "PATCH"})
+  static post = async (path, data = {}) => await Api.requestLocal({path, data, method: "POST"})
 
-  static request({data, headers, method, path, pathParams}) {
+  static async request({data, headers, method, path, pathParams}) {
     let requestPath = ""
     if (config.getHost()) requestPath += config.getHost()
     requestPath += path
@@ -30,16 +25,24 @@ export default class Api {
       requestPath += `?${pathParamsString}`
     }
 
-    return new Promise((resolve, reject) => {
-      const xhr = new XMLHttpRequest()
-      xhr.open(method, requestPath, true)
+    const xhr = new XMLHttpRequest()
 
-      if (headers) {
-        for (const headerName in headers) {
-          xhr.setRequestHeader(headerName, headers[headerName])
-        }
+    xhr.open(method, requestPath, true)
+    xhr.withCredentials = true
+
+    if (headers) {
+      for (const headerName in headers) {
+        xhr.setRequestHeader(headerName, headers[headerName])
       }
+    }
+
+    const response = await Api.executeXhr(xhr, data)
+
+    return response
+  }
 
+  static executeXhr(xhr, data) {
+    return new Promise((resolve, reject) => {
       xhr.onload = () => {
         const response = this._parseResponse(xhr)
 
@@ -62,12 +65,14 @@ export default class Api {
     })
   }
 
-  static requestLocal(args) {
+  static async requestLocal(args) {
     if (!args.headers) {
       args.headers = {}
     }
 
-    const token = this._token()
+    const token = await this._token()
+
+    logger.debug(() => `Got token: ${token}`)
 
     if (token) {
       args.headers["X-CSRF-Token"] = token
@@ -82,19 +87,14 @@ export default class Api {
       args.data = args.rawData
     }
 
-    return this.request(args)
+    return await this.request(args)
   }
 
-  static put(path, data = {}) {
-    return this.requestLocal({path, data, method: "PUT"})
+  static async put(path, data = {}) {
+    return await this.requestLocal({path, data, method: "PUT"})
   }
 
-  static _token() {
-    const tokenElement = document.querySelector("meta[name='csrf-token']")
-
-    if (tokenElement)
-      return tokenElement.getAttribute("content")
-  }
+  static _token = async () => await SessionStatusUpdater.current().getCsrfToken()
 
   static _parseResponse(xhr) {
     const responseType = xhr.getResponseHeader("content-type")

package/src/commands-pool.mjs

@@ -14,7 +14,7 @@ import {ValidationErrors} from "./validation-errors.mjs"
 const shared = {}
 
 export default class ApiMakerCommandsPool {
-  static addCommand (data, args = {}) {
+  static addCommand(data, args = {}) {
     let pool
 
     if (args.instant) {
@@ -34,17 +34,17 @@ export default class ApiMakerCommandsPool {
     return promiseResult
   }
 
-  static current () {
+  static current() {
     if (!shared.currentApiMakerCommandsPool) shared.currentApiMakerCommandsPool = new ApiMakerCommandsPool()
 
     return shared.currentApiMakerCommandsPool
   }
 
-  static flush () {
+  static flush() {
     ApiMakerCommandsPool.current().flush()
   }
 
-  constructor () {
+  constructor() {
     this.flushCount = 0
     this.pool = {}
     this.poolData = {}
@@ -52,7 +52,7 @@ export default class ApiMakerCommandsPool {
     this.globalRequestData = {}
   }
 
-  addCommand (data) {
+  addCommand(data) {
     return new Promise((resolve, reject) => {
       const id = this.currentId
       this.currentId += 1
@@ -87,11 +87,11 @@ export default class ApiMakerCommandsPool {
     })
   }
 
-  commandsCount () {
+  commandsCount() {
     return Object.keys(this.pool)
   }
 
-  async sendRequest ({commandSubmitData, url}) {
+  async sendRequest({commandSubmitData, url}) {
     let response
 
     for (let i = 0; i < 3; i++) {
@@ -113,7 +113,7 @@ export default class ApiMakerCommandsPool {
     throw new Error("Couldnt successfully execute request")
   }
 
-  async flush () {
+  async flush() {
     if (this.commandsCount() == 0) {
       return
     }
@@ -166,7 +166,7 @@ export default class ApiMakerCommandsPool {
     }
   }
 
-  handleFailedResponse (commandData, commandResponseData) {
+  handleFailedResponse(commandData, commandResponseData) {
     let error
 
     if (commandResponseData.error_type == "destroy_error") {
@@ -190,13 +190,13 @@ export default class ApiMakerCommandsPool {
     commandData.reject(error)
   }
 
-  clearTimeout () {
+  clearTimeout() {
     if (this.flushTimeout) {
       clearTimeout(this.flushTimeout)
     }
   }
 
-  isActive () {
+  isActive() {
     if (this.commandsCount() > 0) {
       return true
     }
@@ -208,7 +208,7 @@ export default class ApiMakerCommandsPool {
     return false
   }
 
-  setFlushTimeout () {
+  setFlushTimeout() {
     this.clearTimeout()
     this.flushTimeout = setTimeout(() => this.flush(), 0)
   }

package/src/devise.mjs

@@ -9,11 +9,11 @@ import Services from "./services.mjs"
 const shared = {}
 
 export default class ApiMakerDevise {
-  static callSignOutEvent (args) {
+  static callSignOutEvent(args) {
     events.emit("onDeviseSignOut", {args})
   }
 
-  static current () {
+  static current() {
     if (!shared.currentApiMakerDevise) {
       shared.currentApiMakerDevise = new ApiMakerDevise()
     }
@@ -21,11 +21,11 @@ export default class ApiMakerDevise {
     return shared.currentApiMakerDevise
   }
 
-  static events () {
+  static events() {
     return events
   }
 
-  static addUserScope (scope) {
+  static addUserScope(scope) {
     const currentMethodName = `current${inflection.camelize(scope)}`
 
     ApiMakerDevise[currentMethodName] = () => ApiMakerDevise.current().getCurrentScope(scope)
@@ -35,7 +35,7 @@ export default class ApiMakerDevise {
     ApiMakerDevise[isSignedInMethodName] = () => Boolean(ApiMakerDevise.current().getCurrentScope(scope))
   }
 
-  static async signIn (username, password, args = {}) {
+  static async signIn(username, password, args = {}) {
     if (!args.scope) args.scope = "user"
 
     const postData = {username, password, args}
@@ -53,21 +53,25 @@ export default class ApiMakerDevise {
     return {model, response}
   }
 
-  static updateSession (model, args = {}) {
-    if (!args.scope) {
-      args.scope = digg(model.modelClassData(), "name")
-    }
+  static updateSession(model, args = {}) {
+    if (!args.scope) args.scope = "user"
 
     const camelizedScopeName = inflection.camelize(args.scope, true)
 
     ApiMakerDevise.current().currents[camelizedScopeName] = model
   }
 
-  static setSignedOut (args) {
+  hasCurrentScope(scope) {
+    const camelizedScopeName = inflection.camelize(scope, true)
+
+    return camelizedScopeName in ApiMakerDevise.current().currents
+  }
+
+  static setSignedOut(args) {
     ApiMakerDevise.current().currents[inflection.camelize(args.scope, true)] = null
   }
 
-  static async signOut (args = {}) {
+  static async signOut(args = {}) {
     if (!args.scope) {
       args.scope = "user"
     }
@@ -87,11 +91,11 @@ export default class ApiMakerDevise {
     return response
   }
 
-  constructor () {
+  constructor() {
     this.currents = {}
   }
 
-  getCurrentScope (scope) {
+  getCurrentScope(scope) {
     if (!(scope in this.currents)) {
       this.currents[scope] = this.loadCurrentScope(scope)
     }
@@ -99,7 +103,7 @@ export default class ApiMakerDevise {
     return this.currents[scope]
   }
 
-  hasCurrentScope(scope) {
+  hasGlobalCurrentScope(scope) {
     if (globalThis.apiMakerDeviseCurrent && scope in globalThis.apiMakerDeviseCurrent) {
       return true
     }
@@ -107,8 +111,8 @@ export default class ApiMakerDevise {
     return false
   }
 
-  loadCurrentScope (scope) {
-    if (!this.hasCurrentScope(scope)) {
+  loadCurrentScope(scope) {
+    if (!this.hasGlobalCurrentScope(scope)) {
       return null
     }
 

package/src/logger.mjs

@@ -12,7 +12,13 @@ export default class ApiMakerLogger {
   }
 
   debug(message) {
-    if (this.getDebug()) this.log(message)
+    if (this.getDebug()) {
+      this.log(message)
+    }
+  }
+
+  error(message) {
+    console.error(message)
   }
 
   log(message) {

package/src/session-status-updater.mjs

@@ -1,38 +1,82 @@
+import config from "./config.mjs"
 import Devise from "./devise.mjs"
 import * as inflection from "inflection"
 import Logger from "./logger.mjs"
 import wakeEvent from "wake-event"
 
 const logger = new Logger({name: "ApiMaker / SessionStatusUpdater"})
+const shared = {}
+
+// logger.setDebug(true)
 
 export default class ApiMakerSessionStatusUpdater {
-  static current () {
-    if (!globalThis.apiMakerSessionStatusUpdater)
-      globalThis.apiMakerSessionStatusUpdater = new ApiMakerSessionStatusUpdater()
+  static current(args) {
+    if (!shared.apiMakerSessionStatusUpdater) {
+      shared.apiMakerSessionStatusUpdater = new ApiMakerSessionStatusUpdater(args)
+    }
 
-    return globalThis.apiMakerSessionStatusUpdater
+    return shared.apiMakerSessionStatusUpdater
   }
 
-  constructor (args = {}) {
+  constructor(args = {}) {
     this.events = {}
     this.timeout = args.timeout || 600000
+    this.useMetaElement = ("useMetaElement" in args) ? args.useMetaElement : true
 
     this.connectOnlineEvent()
     this.connectWakeEvent()
   }
 
-  connectOnlineEvent () {
-    window.addEventListener("online", () => this.updateSessionStatus(), false)
+  connectOnlineEvent() {
+    window.addEventListener("online", this.updateSessionStatus, false)
   }
 
-  connectWakeEvent () {
-    wakeEvent(() => this.updateSessionStatus())
+  connectWakeEvent() {
+    wakeEvent(this.updateSessionStatus)
   }
 
-  async sessionStatus () {
+  async getCsrfToken() {
+    if (this.csrfToken) {
+      logger.debug(`Get CSRF token from set variable: ${this.csrfToken}`)
+
+      return this.csrfToken
+    }
+
+    if (this.useMetaElement) {
+      const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
+
+      if (csrfTokenElement) {
+        logger.debug(() => `Get CSRF token from meta element: ${csrfTokenElement.getAttribute("content")}`)
+
+        this.csrfToken = csrfTokenElement.getAttribute("content")
+
+        return this.csrfToken
+      }
+    }
+
+    logger.debug("Updating session status because no CSRF token set yet")
+    await this.updateSessionStatus()
+
+    if (this.csrfToken) {
+      logger.debug(() => `Returning CSRF token after updating session status: ${this.csrfToken}`)
+
+      return this.csrfToken
+    }
+
+    throw new Error("CSRF token hasn't been set")
+  }
+
+  sessionStatus() {
     return new Promise((resolve) => {
+      const host = config.getHost()
+      let requestPath = ""
+
+      if (host) requestPath += host
+
+      requestPath += "/api_maker/session_statuses"
+
       const xhr = new XMLHttpRequest()
-      xhr.open("POST", "/api_maker/session_statuses", true)
+      xhr.open("POST", requestPath, true)
       xhr.onload = () => {
         const response = JSON.parse(xhr.responseText)
         resolve(response)
@@ -41,11 +85,11 @@ export default class ApiMakerSessionStatusUpdater {
     })
   }
 
-  onSignedOut (callback) {
+  onSignedOut(callback) {
     this.addEvent("onSignedOut", callback)
   }
 
-  startTimeout () {
+  startTimeout() {
     logger.debug("startTimeout")
 
     if (this.updateTimeout)
@@ -60,12 +104,12 @@ export default class ApiMakerSessionStatusUpdater {
     )
   }
 
-  stopTimeout () {
+  stopTimeout() {
     if (this.updateTimeout)
       clearTimeout(this.updateTimeout)
   }
 
-  async updateSessionStatus () {
+  updateSessionStatus = async () => {
     logger.debug("updateSessionStatus")
 
     const result = await this.sessionStatus()
@@ -75,25 +119,30 @@ export default class ApiMakerSessionStatusUpdater {
     this.updateUserSessionsFromResult(result)
   }
 
-  updateMetaElementsFromResult (result) {
+  updateMetaElementsFromResult(result) {
     logger.debug("updateMetaElementsFromResult")
-    const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
 
-    if (csrfTokenElement) {
-      logger.debug(() => `Changing token from "${csrfTokenElement.getAttribute("content")}" to "${result.csrf_token}"`)
-      csrfTokenElement.setAttribute("content", result.csrf_token)
-    } else {
-      logger.debug("csrf token element couldn't be found")
+    this.csrfToken = result.csrf_token
+
+    if (this.useMetaElement) {
+      const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
+
+      if (csrfTokenElement) {
+        logger.debug(() => `Changing token from "${csrfTokenElement.getAttribute("content")}" to "${result.csrf_token}"`)
+        csrfTokenElement.setAttribute("content", result.csrf_token)
+      } else {
+        logger.debug("csrf token element couldn't be found")
+      }
     }
   }
 
-  updateUserSessionsFromResult (result) {
+  updateUserSessionsFromResult(result) {
     for (const scopeName in result.scopes) {
       this.updateUserSessionScopeFromResult(scopeName, result.scopes[scopeName])
     }
   }
 
-  updateUserSessionScopeFromResult (scopeName, scope) {
+  updateUserSessionScopeFromResult(scopeName, scope) {
     const deviseIsSignedInMethodName = `is${inflection.camelize(scopeName)}SignedIn`
 
     if (!(deviseIsSignedInMethodName in Devise)) {

package/src/super-admin/edit-page.jsx

@@ -1,4 +1,4 @@
-import ConfigReader from "./config-reader"
+import ConfigReader from "./config-reader.jsx"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
 import {Pressable, Text, TextInput, View} from "react-native"

package/src/super-admin/has-edit-config.js

@@ -0,0 +1,15 @@
+import ConfigReader from "./config-reader.jsx"
+
+const hasEditConfig = (modelClass) => {
+  const configReader = ConfigReader.forModel(modelClass)
+  const extraContent = configReader.modelConfig?.edit?.extraContentconst
+  const attributes = configReader.modelConfig?.edit?.attributes
+
+  if (attributes || extraContent) {
+    return true
+  }
+
+  return false
+}
+
+export default hasEditConfig

package/src/super-admin/index.jsx

@@ -1,4 +1,5 @@
 import EditPage from "./edit-page"
+import hasEditConfig from "./has-edit-config.js"
 import IndexPage from "./index-page"
 import Layout from "./layout"
 import Link from "../link"
@@ -9,9 +10,11 @@ import ShowPage from "./show-page"
 import ShowReflectionActions from "./show-reflection-actions"
 import ShowReflectionPage from "./show-reflection-page"
 import useCanCan from "../use-can-can"
+import useCurrentUser from "../use-current-user.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
 const ApiMakerSuperAdmin = () => {
+  const currentUser = useCurrentUser()
   const queryParams = useQueryParams()
   let modelClass, pageToShow
 
@@ -20,13 +23,16 @@ const ApiMakerSuperAdmin = () => {
   const modelId = queryParams.model_id
   const modelName = modelClass?.modelClassData()?.name
   const [model, setModel] = useState()
-  const canCan = useCanCan(() => {
-    const abilities = []
+  const canCan = useCanCan(
+    () => {
+      const abilities = []
 
-    if (modelClass) abilities.push([modelClass, ["new"]])
+      if (modelClass) abilities.push([modelClass, ["new"]])
 
-    return abilities
-  })
+      return abilities
+    },
+    [currentUser?.id(), modelClass]
+  )
 
   const loadModel = useCallback(async () => {
     if (modelId && modelClass) {
@@ -82,7 +88,7 @@ const ApiMakerSuperAdmin = () => {
     () => <>
       {modelClass && pageToShow == "index" &&
         <>
-          {canCan?.can("new", modelClass) &&
+          {canCan?.can("new", modelClass) && hasEditConfig(modelClass) &&
             <Link className="create-new-model-link" to={Params.withParams({model: modelName, mode: "new"})}>
               Create new
             </Link>
@@ -91,7 +97,7 @@ const ApiMakerSuperAdmin = () => {
       }
       {model && pageToShow == "show" &&
         <>
-          {model.can("edit") &&
+          {model.can("edit") && hasEditConfig(modelClass) &&
             <Link className="edit-model-link" to={Params.withParams({model: modelName, model_id: modelId, mode: "edit"})}>
               Edit
             </Link>

package/src/super-admin/model-class-table.jsx

@@ -1,5 +1,6 @@
-import ConfigReader from "./config-reader"
+import ConfigReader from "./config-reader.jsx"
 import {digg} from "diggerize"
+import hasEditConfig from "./has-edit-config.js"
 import * as inflection from "inflection"
 import Params from "../params"
 import PropTypes from "prop-types"
@@ -45,7 +46,7 @@ const ApiMakerSuperAdminModelClassTable = (props) => {
     <Table
       columns={columns}
       currentUser={currentUser}
-      editModelPath={editModelPath}
+      editModelPath={hasEditConfig(modelClass) ? editModelPath : undefined}
       modelClass={modelClass}
       viewModelPath={viewModelPath}
       {...tableProps}

package/src/super-admin/show-page/index.jsx

@@ -1,6 +1,6 @@
 import AttributeRow from "../../bootstrap/attribute-row"
 import BelongsToAttributeRow from "./belongs-to-attribute-row"
-import ConfigReader from "../config-reader"
+import ConfigReader from "../config-reader.jsx"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
 import PropTypes from "prop-types"

package/src/use-can-can.mjs

@@ -27,6 +27,7 @@ const useCanCan = (abilitiesCallback, dependencies) => {
   }, [])
 
   useEffect(() => {
+    setCanCan(undefined)
     loadAbilities()
   }, dependencies)
 

package/src/use-current-user.mjs

@@ -1,10 +1,15 @@
 import {useCallback, useEffect, useMemo} from "react"
 import {camelize} from "inflection"
 import Devise from "./devise.mjs"
+import Logger from "./logger.mjs"
 import Services from "./services.mjs"
 import useEventEmitter from "./use-event-emitter.mjs"
 import useShape from "set-state-compare/src/use-shape.js"
 
+const logger = new Logger({name: "ApiMaker / useCurrentUser"})
+
+// logger.setDebug(true)
+
 const useCurrentUser = (args) => {
   const s = useShape(args || {})
   const scope = args?.scope || "user"
@@ -13,20 +18,10 @@ const useCurrentUser = (args) => {
   s.meta.scope = scope
   s.meta.scopeName = scopeName
 
-  const debugs = useCallback((debugCallback) => {
-    if (s.props.debug) {
-      let debugArgs = debugCallback()
-
-      if (!Array.isArray(debugArgs)) debugArgs = [debugArgs]
-
-      console.log("useCurrentUser", ...debugArgs)
-    }
-  })
-
   const loadCurrentUserFromRequest = useCallback(async () => {
     const {scope, scopeName} = s.m
 
-    debugs(() => `Loading ${scope} with request`)
+    logger.debug(() => `Loading ${scope} with request`)
 
     const result = await Services.current().sendRequest("Devise::Current", {scope})
     const current = digg(result, "current")
@@ -41,21 +36,28 @@ const useCurrentUser = (args) => {
 
   const defaultCurrentUser = useCallback(() => {
     const {scope, scopeName} = s.m
+    let current
 
-    if (Devise.current().hasCurrentScope(scope)) {
-      const current = Devise[scopeName]()
+    if (Devise.current().hasCurrentScope(s.m.scope)) {
+      current = Devise.current().getCurrentScope(scope)
 
-      debugs(() => `Setting ${scope} from current scope: ${current?.id()}`)
+      logger.debug(() => `Setting ${scope} from current scope: ${current?.id()}`)
+    } else if (Devise.current().hasGlobalCurrentScope(scope)) {
+      current = Devise[scopeName]()
 
-      if (s.props.onCurrentUserLoaded) setTimeout(() => s.props.onCurrentUserLoaded(current), 0)
+      logger.debug(() => `Setting ${scope} from global current scope: ${current?.id()}`)
+    }
 
-      return current
+    if (current && s.props.onCurrentUserLoaded) {
+      setTimeout(() => s.props.onCurrentUserLoaded(current), 0)
     }
+
+    return current
   }, [])
 
   const useStatesArgument = {}
 
-  useStatesArgument[scopeName] = defaultCurrentUser()
+  useStatesArgument[scopeName] = () => defaultCurrentUser()
 
   s.useStates(useStatesArgument)
 
@@ -68,7 +70,8 @@ const useCurrentUser = (args) => {
   }, [])
 
   useEffect(() => {
-    if (!Devise.current().hasCurrentScope(s.m.scope)) {
+    if (!Devise.current().hasGlobalCurrentScope(s.m.scope) && !Devise.current().hasCurrentScope(s.m.scope)) {
+      logger.debug(() => `Devise hasn't got current scope ${s.m.scope} so loading from request`)
       loadCurrentUserFromRequest()
     }
   }, [])

package/src/use-screen-layout.mjs

@@ -0,0 +1,49 @@
+import {Platform, useWindowDimensions} from "react-native"
+
+const getWindowLayout = (width) => {
+  if (width <= 575) {
+    return "xs"
+  } else if (width <= 767) {
+    return "sm"
+  } else if (width <= 991) {
+    return "md"
+  } else if (width <= 1199) {
+    return "lg"
+  } else if (width <= 1399) {
+    return "xl"
+  } else if (width >= 1400) {
+    return "xxl"
+  } else {
+    console.error(`Couldn't determine window layout from width: ${width}`)
+  }
+}
+
+const useScreenSize = () => {
+  if (Platform.OS == "web") {
+    const shared = useMemo(() => ({}))
+
+    shared.width = window.innerWidth
+
+    const [screenLayout, setScreenLayout] = useState(() => getWindowLayout(shared.width))
+
+    const onResize = useCallback(() => {
+      const newWindowLayout = getWindowLayout(window.innerWidth)
+
+      if (shared.screenlayout != newWindowLayout) {
+        setScreenLayout(newWindowLayout)
+      }
+    }, [])
+
+    useEventListener(window, "resize", onResize)
+
+    shared.screenLayout = screenLayout
+
+    return shared.screenLayout
+  } else {
+    const windowDimensions = useWindowDimensions()
+
+    return getWindowLayout(windowDimensions.width)
+  }
+}
+
+export default useScreenSize