add public and private threads to channel list

[0xtiki]

No description provided.

[wpmonty]

What would the FE look like right now if we enabled this? Screenshot possible?

[0xtiki]

What would the FE look like right now if we enabled this? Screenshot possible?

just a long list with channels and threads mixed

[wpmonty]

just a long list with channels and threads mixed

No, this needs to be improved. We will need some data structure to pass down so we can display the heirarchy in UI.

[wpmonty]

@zberwaldt what kind of data would nested Select List require for this?

[zberwaldt]

@wpmonty Something like this?

This is data from a react app that has select in the way I think you are looking for:

We might have to roll our own select to handle this, I'm reading through the docks for react-select to see if we can handle this.

{
  "value": "834499078434979891",
  "label": "┌───  🤝Welcome  ───┐",
  "options": [
    {
      "value": "834504120307810344",
      "label": {
        "type": "div",
        "key": "834504120307810344",
        "ref": null,
        "props": {
          "className": "columns is-mobile is-vcentered",
          "children": [
            {
              "type": "div",
              "key": null,
              "ref": null,
              "props": {
                "className": "column",
                "children": {
                  "type": "p",
                  "key": null,
                  "ref": null,
                  "props": {
                    "className": "",
                    "children": [
                      {
                        "type": "span",
                        "key": "spany span",
                        "ref": null,
                        "props": {
                          "style": {
                            "color": "gray"
                          },
                          "className": "mr-1",
                          "children": {
                            "type": "i",
                            "key": null,
                            "ref": null,
                            "props": {
                              "className": "fas fa-hashtag"
                            },
                            "_owner": null
                          }
                        },
                        "_owner": null
                      },
                      "🔊announcements"
                    ]
                  },
                  "_owner": null
                }
              },
              "_owner": null
            },
            {
              "type": "div",
              "key": null,
              "ref": null,
              "props": {
                "children": [
                  {
                    "type": "div",
                    "key": null,
                    "ref": null,
                    "props": {
                      "className": "column is-pulled-right dropdown-disabled-text",
                      "children": "Invalid Write Permissions"
                    },
                    "_owner": null
                  },
                  {
                    "type": "div",
                    "key": null,
                    "ref": null,
                    "props": {
                      "className": "column is-narrow"
                    },
                    "_owner": null
                  }
                ]
              },
              "_owner": null
            }
          ]
        },
        "_owner": null
      },
      "channel_data": {
        "id": "834504120307810344",
        "name": "🔊announcements",
        "position": 0,
        "category_id": "834499078434979891",
        "category_name": "┌───  🤝Welcome  ───┐",
        "category_position": 3,
        "is_sesh_channel": false,
        "type": "Text",
        "has_write": false,
        "can_make_public_threads": false
      },
      "isDisabled": true
    },
   // other options...
  ]
}

[0xtiki]

@wpmonty Something like this?

This is data from a react app that has select in the way I think you are looking for:

We might have to roll our own select to handle this, I'm reading through the docks for react-select to see if we can handle this.

{
  "value": "834499078434979891",
  "label": "┌───  🤝Welcome  ───┐",
  "options": [
    {
      "value": "834504120307810344",
      "label": {
        "type": "div",
        "key": "834504120307810344",
        "ref": null,
        "props": {
          "className": "columns is-mobile is-vcentered",
          "children": [
            {
              "type": "div",
              "key": null,
              "ref": null,
              "props": {
                "className": "column",
                "children": {
                  "type": "p",
                  "key": null,
                  "ref": null,
                  "props": {
                    "className": "",
                    "children": [
                      {
                        "type": "span",
                        "key": "spany span",
                        "ref": null,
                        "props": {
                          "style": {
                            "color": "gray"
                          },
                          "className": "mr-1",
                          "children": {
                            "type": "i",
                            "key": null,
                            "ref": null,
                            "props": {
                              "className": "fas fa-hashtag"
                            },
                            "_owner": null
                          }
                        },
                        "_owner": null
                      },
                      "🔊announcements"
                    ]
                  },
                  "_owner": null
                }
              },
              "_owner": null
            },
            {
              "type": "div",
              "key": null,
              "ref": null,
              "props": {
                "children": [
                  {
                    "type": "div",
                    "key": null,
                    "ref": null,
                    "props": {
                      "className": "column is-pulled-right dropdown-disabled-text",
                      "children": "Invalid Write Permissions"
                    },
                    "_owner": null
                  },
                  {
                    "type": "div",
                    "key": null,
                    "ref": null,
                    "props": {
                      "className": "column is-narrow"
                    },
                    "_owner": null
                  }
                ]
              },
              "_owner": null
            }
          ]
        },
        "_owner": null
      },
      "channel_data": {
        "id": "834504120307810344",
        "name": "🔊announcements",
        "position": 0,
        "category_id": "834499078434979891",
        "category_name": "┌───  🤝Welcome  ───┐",
        "category_position": 3,
        "is_sesh_channel": false,
        "type": "Text",
        "has_write": false,
        "can_make_public_threads": false
      },
      "isDisabled": true
    },
   // other options...
  ]
}

@zberwaldt how about the API returns something like this, would that work?

{
        'channel_id<string>': 
        {
           'channel_name': string, 
            'threads': 
               [
                  {
                     'thread_id': string,
                     'thread_name: string,
                     'thread_type: enum,
                   }
               ], 
         },
}

[wpmonty]

Seems like a good start; maybe can also add channel_type if we wanted to support Forum posts in the future?

Could also key the threads by thread_id same as channels