Reduce code duplication 🔥

nfdi4plants · Dec 17, 2024 · 500dc72 · 500dc72
1 parent ec72dc3
commit 500dc72
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 56 deletions.
diff --git a/src/Client/MainComponents/Widgets.fs b/src/Client/MainComponents/Widgets.fs
@@ -213,38 +213,19 @@ type Widget =
     static member Templates (model: Model, dispatch, rmv: MouseEvent -> unit) =
         let templates = model.ProtocolState.Templates
         let config, setConfig = React.useState(TemplateFilterConfig.init)
-        let importTypeState, setImportTypeState =
-            let columns =
-                model.ProtocolState.TemplatesSelected
-                |> Array.ofSeq
-                |> Array.map (fun t -> Array.init t.Table.Columns.Length (fun _ -> true))
-            React.useState(SelectiveImportModalState.init columns)
         let filteredTemplates = Protocol.Search.filterTemplates (templates, config)
-        let addTableImport = fun (i: int) (fullImport: bool) ->
-            let newImportTable: ImportTable = {Index = i; FullImport = fullImport}
-            let newImportTables = newImportTable::importTypeState.ImportTables |> List.distinctBy (fun x -> x.Index)
-            {importTypeState with ImportTables = newImportTables} |> setImportTypeState
-        let rmvTableImport = fun i ->
-            {importTypeState with ImportTables = importTypeState.ImportTables |> List.filter (fun it -> it.Index <> i)} |> setImportTypeState
         React.useEffectOnce(fun _ -> Messages.Protocol.GetAllProtocolsRequest |> Messages.ProtocolMsg |> dispatch)
         let selectContent() =
             [
                 Protocol.Search.FileSortElement(model, config, setConfig, "@md/templateWidget:grid-cols-3")
                 Protocol.Search.Component (filteredTemplates, model, dispatch, length.px 350)
             ]
-        let templateSelectionElements =
-            SelectiveTemplateFromDB.DisplayTemplateSelection(
-                model,
-                importTypeState,
-                setImportTypeState,
-                addTableImport,
-                rmvTableImport,
-                dispatch)
         let insertContent() =
             [
                 Html.div [
                     prop.style [style.maxHeight (length.px 350); style.overflow.auto]
-                    prop.children templateSelectionElements
+                    prop.className "flex flex-col gap-2"
+                    prop.children (SelectiveTemplateFromDB.Main(model, dispatch))
                 ]
             ]
 

diff --git a/src/Client/Modals/SelectiveImportModal.fs b/src/Client/Modals/SelectiveImportModal.fs
@@ -12,7 +12,11 @@ open Components
 
 type SelectiveImportModal =
 
+    [<ReactComponent>]
     static member RadioPluginsBox(boxName, icon, importType: TableJoinOptions, radioGroupName, radioData: (TableJoinOptions * string)[], setImportType: TableJoinOptions -> unit) =
+
+        let guid = React.useMemo(fun () -> System.Guid.NewGuid().ToString())
+        let radioGroupName = radioGroupName + guid
         let myradio(target: TableJoinOptions, txt: string) =
             let isChecked = importType = target
             ModalElements.RadioPlugin(radioGroupName, txt, isChecked, fun (b: bool) -> if b then setImportType target)
@@ -50,12 +54,12 @@ type SelectiveImportModal =
         let tableIndex = defaultArg tableIndex 0
         let displayCheckBox =
             //Determine whether to display checkboxes or not
-            selectionInformation.IsSome && setSelectedColumns.IsSome                    
+            selectionInformation.IsSome && setSelectedColumns.IsSome
         Daisy.table [
             prop.children [
                 Html.thead [
                     Html.tr [
-                        for columnIndex in 0..columns.Length-1 do                            
+                        for columnIndex in 0..columns.Length-1 do
                             Html.th [
                                 Html.label [
                                     prop.className "join flex flex-row centered gap-2"
@@ -145,7 +149,7 @@ type SelectiveImportModal =
             Daisy.collapse [
                 Html.input [prop.type'.checkbox; prop.className "min-h-0 h-5"]
                 Daisy.collapseTitle [
-                    prop.className "p-1 min-h-0 h-5 text-sm"                    
+                    prop.className "p-1 min-h-0 h-5 text-sm"
                     prop.text (if isActive then "Select Columns" else "Preview Table")
                 ]
                 Daisy.collapseContent [

diff --git a/src/Client/Pages/ProtocolTemplates/ProtocolState.fs b/src/Client/Pages/ProtocolTemplates/ProtocolState.fs
@@ -68,11 +68,11 @@ module Protocol =
                     model.ProtocolState.TemplatesSelected
                 else
                     prot::model.ProtocolState.TemplatesSelected
-            let nextModel = {
-                model with
-                    Model.ProtocolState.TemplatesSelected = templates
+            let nextState = {
+                state with
+                    TemplatesSelected = templates
             }
-            state, Cmd.ofMsg (UpdateModel nextModel)
+            nextState, Cmd.none
         | ProtocolIncreaseTimesUsed templateId ->
             failwith "ParseUploadedFileRequest IS NOT IMPLEMENTED YET"
             //let cmd =

diff --git a/src/Client/Pages/ProtocolTemplates/ProtocolView.fs b/src/Client/Pages/ProtocolTemplates/ProtocolView.fs
@@ -38,7 +38,9 @@ type Templates =
             // Box 1
             SidebarComponents.SidebarLayout.Description "Add template from database."
 
-            Modals.SelectiveTemplateFromDB.Main(model, dispatch)
+            SidebarComponents.SidebarLayout.LogicContainer [
+                Modals.SelectiveTemplateFromDB.Main(model, dispatch)
+            ]
 
             // Box 2
             SidebarComponents.SidebarLayout.Description (Html.p [

diff --git a/src/Client/Pages/ProtocolTemplates/SelectiveTemplateFromDB.fs b/src/Client/Pages/ProtocolTemplates/SelectiveTemplateFromDB.fs
@@ -94,12 +94,25 @@ type SelectiveTemplateFromDB =
             ]
         ]
 
-    static member DisplayTemplateSelection (model: Model, importTypeState, setImportTypeState, addTableImport, rmvTableImport, dispatch) =
-        [
+    [<ReactComponent>]
+    static member Main (model: Model, dispatch) =
+        let importTypeState, setImportTypeState =
+            let columns =
+                model.ProtocolState.TemplatesSelected
+                |> Array.ofSeq
+                |> Array.map (fun t -> Array.init t.Table.Columns.Length (fun _ -> true))
+            React.useState(SelectiveImportModalState.init columns)
+        let addTableImport = fun (i: int) (fullImport: bool) ->
+            let newImportTable: ImportTable = {Index = i; FullImport = fullImport}
+            let newImportTables = newImportTable::importTypeState.ImportTables |> List.distinctBy (fun x -> x.Index)
+            {importTypeState with ImportTables = newImportTables} |> setImportTypeState
+        let rmvTableImport = fun i ->
+            {importTypeState with ImportTables = importTypeState.ImportTables |> List.filter (fun it -> it.Index <> i)} |> setImportTypeState
+        React.fragment [
             Html.div [
                 SelectiveTemplateFromDB.ToProtocolSearchElement model dispatch
             ]
-            if model.ProtocolState.TemplatesSelected.Length > 0 then                
+            if model.ProtocolState.TemplatesSelected.Length > 0 then
                 SelectiveImportModal.RadioPluginsBox(
                     "Import Type",
                     "fa-solid fa-cog",
@@ -138,27 +151,3 @@ type SelectiveTemplateFromDB =
                     SelectiveTemplateFromDB.AddTemplatesFromDBToTableButton "Add templates" model importTypeState dispatch
                 ]
         ]
-
-    [<ReactComponent>]
-    static member Main (model: Model, dispatch) =
-        let importTypeState, setImportTypeState =
-            let columns =
-                model.ProtocolState.TemplatesSelected
-                |> Array.ofSeq
-                |> Array.map (fun t -> Array.init t.Table.Columns.Length (fun _ -> true))
-            React.useState(SelectiveImportModalState.init columns)
-        let addTableImport = fun (i: int) (fullImport: bool) ->
-            let newImportTable: ImportTable = {Index = i; FullImport = fullImport}
-            let newImportTables = newImportTable::importTypeState.ImportTables |> List.distinctBy (fun x -> x.Index)
-            {importTypeState with ImportTables = newImportTables} |> setImportTypeState
-        let rmvTableImport = fun i ->
-            {importTypeState with ImportTables = importTypeState.ImportTables |> List.filter (fun it -> it.Index <> i)} |> setImportTypeState
-        SidebarComponents.SidebarLayout.LogicContainer(
-            SelectiveTemplateFromDB.DisplayTemplateSelection(
-                model,
-                importTypeState,
-                setImportTypeState,
-                addTableImport,
-                rmvTableImport,
-                dispatch)
-            )