Misc changes

- useStore & StudioTheme now use `useEventConnection`
- MaterialPanel now uses hooks for creating MaterialItem
- Use shorthand UDim2 in Constants
- Removed unused ref in StudioWidget

src/Components/MaterialPanel/init.lua

@@ -15,37 +15,28 @@ local TextLabel = require(Components.TextLabel)
 local useStore = require(Plugin.Hooks.useStore)
 local useTheme = require(Plugin.Hooks.useTheme)
 
-function CreateMaterialButtons(searchTerm)
-  local numberAssets = 0
+local function MaterialPanel(props, hooks)
+  local theme = useTheme(hooks)
+  local SearchTerm = useStore(hooks, 'SearchTerm')
 
-  local assetsToDisplay = {
-    UIGridLayout = Roact.createElement('UIGridLayout', {
-      CellPadding = Constants.MATERIAL_GRID_PADDING,
-      CellSize = Constants.MATERIAL_GRID_SIZE,
-      FillDirectionMaxCells = 6,
-      HorizontalAlignment = Enum.HorizontalAlignment.Center
-    })
-  }
+  local content, assetCount = hooks.useMemo(function()
+    local numberAssets = 0
+    local assetsToDisplay = {}
 
-  for _, item in Constants.MATERIALS_TABLE do
-    if string.find(string.lower(item.enum.Name), string.lower(searchTerm), 1, true) then
-      assetsToDisplay[item.enum.Name] = Roact.createElement(MaterialItem, {
-        Id = item.enum,
-        Image = item.img
-      })
+    for _, item in Constants.MATERIALS_TABLE do
+      if string.find(string.lower(item.enum.Name), string.lower(SearchTerm), 1, true) then
+        assetsToDisplay[item.enum.Name] = Roact.createElement(MaterialItem, {
+          Id = item.enum,
+          Image = item.img
+        })
 
-      numberAssets += 1
+        numberAssets += 1
+      end
     end
-  end
 
-  return assetsToDisplay, numberAssets
-end
-
-local function MaterialPanel(props, hooks)
-  local theme = useTheme(hooks)
-  local SearchTerm = useStore(hooks, 'SearchTerm')
+    return assetsToDisplay, numberAssets
+  end, { SearchTerm })
 
-  local content, assetCount = CreateMaterialButtons(SearchTerm)
   local hasAssets = assetCount ~= 0
 
   return Roact.createElement('Frame', {
@@ -57,7 +48,15 @@ local function MaterialPanel(props, hooks)
       AutomaticCanvasSize = Enum.AutomaticSize.Y,
       ScrollingDirection = Enum.ScrollingDirection.Y,
       Size = UDim2.fromScale(1, 1)
-    }, content),
+    }, {
+      UIGridLayout = Roact.createElement('UIGridLayout', {
+        CellPadding = Constants.MATERIAL_GRID_PADDING,
+        CellSize = Constants.MATERIAL_GRID_SIZE,
+        FillDirectionMaxCells = 6,
+        HorizontalAlignment = Enum.HorizontalAlignment.Center
+      }),
+      Items = Roact.createFragment(content)
+    }),
     NoResults = not hasAssets and Roact.createElement(TextLabel, {
       BackgroundTransparency = 1,
       Size = UDim2.new(1, 0, 0, 30),

src/Components/StudioWidget.lua

@@ -51,10 +51,6 @@ function StudioWidget:init()
     end
   end)
 
-  if props[Roact.Ref] then
-    props[Roact.Ref](pluginGui)
-  end
-
   self.pluginGui = pluginGui
 end
 

src/Context/StudioTheme.lua

@@ -5,20 +5,16 @@ local Plugin = script.Parent.Parent
 local Roact = require(Plugin.Packages.Roact)
 local Hooks = require(Plugin.Packages.RoactHooks)
 
-local Context = Roact.createContext()
+local useEventConnection = require(Plugin.Hooks.useEventConnection)
+
+local Context = Roact.createContext(nil)
 
 local function StudioThemeProvider(props, hooks)
   local theme, setTheme = hooks.useState(Studio.Theme)
 
-  hooks.useEffect(function()
-    local themeConnection = Studio.ThemeChanged:Connect(function()
-      setTheme(Studio.Theme)
-    end)
-
-    return function()
-      themeConnection:Disconnect()
-    end
-  end, {})
+  useEventConnection(hooks, Studio.ThemeChanged, function()
+    setTheme(Studio.Theme)
+  end)
 
   return Roact.createElement(Context.Provider, {
     value = theme

src/Hooks/useStore.lua

@@ -1,17 +1,12 @@
+local useEventConnection = require(script.Parent.useEventConnection)
 local Store = require(script.Parent.Parent.Util.Store)
 
 local function useStore(hooks, key: string)
   local value, setValue = hooks.useState(Store:Get(key))
 
-  hooks.useEffect(function()
-    local connection = Store:GetChangedSignal(key):Connect(function(newValue)
-      setValue(newValue)
-    end)
-
-    return function()
-      connection:Disconnect()
-    end
-  end, {})
+  useEventConnection(hooks, Store:GetChangedSignal(key), function(newValue)
+    setValue(newValue)
+  end)
 
   return value
 end

src/Util/Constants.lua

@@ -20,8 +20,8 @@ Constants.DEV_UPDATE_CHECKER_ID = 4685764627
 ----------------------------------------
 -- Material related
 ----------------------------------------
-Constants.MATERIAL_GRID_PADDING = UDim2.new(0, 5, 0, 5)
-Constants.MATERIAL_GRID_SIZE = UDim2.new(0, 50, 0, 50)
+Constants.MATERIAL_GRID_PADDING = UDim2.fromOffset(5, 5)
+Constants.MATERIAL_GRID_SIZE = UDim2.fromOffset(50, 50)
 
 Constants.MATERIALS_TABLE = {
   { enum = Enum.Material.Air, img = 'rbxasset://textures/TerrainTools/mtrl_air.png' },