sort channel

liannguyenrapp · Jul 6, 2023 · 6feb9e9 · 6feb9e9
1 parent 2a12167
commit 6feb9e9
Showing 1 changed file with 21 additions and 16 deletions.
diff --git a/src/renderer/components/connect-socket.tsx b/src/renderer/components/connect-socket.tsx
@@ -3,6 +3,7 @@ import { showNotification } from '@mantine/notifications';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useGetStreamsQuery } from './use-get-streams-query';
 import {
+  StreamChannel,
   StreamIdentity,
   useGetStreamIdentitiesQuery,
 } from './use-get-stream-identity-query';
@@ -187,22 +188,26 @@ export const ConnectSocket = memo<Props>(
           <div>
             <div>Active channel to Stream:</div>
             <div className="flex flex-wrap">
-              {(sampleChannel?.data as any).identity.channels.map((c: any) => (
-                <div key={c.index} className="w-1/4 py-[2px]">
-                  <Switch
-                    label={c.name}
-                    checked={activeChannels.includes(c.name)}
-                    size="xs"
-                    onChange={() =>
-                      activeChannels.includes(c.name)
-                        ? onChangeActiveChannels(
-                            activeChannels.filter((it) => it !== c.name)
-                          )
-                        : onChangeActiveChannels([...activeChannels, c.name])
-                    }
-                  />
-                </div>
-              ))}
+              {(sampleChannel?.data as any).identity.channels
+                .sort((p: StreamChannel, v: StreamChannel) =>
+                  p.name < v.name ? -1 : 1
+                )
+                .map((c: any) => (
+                  <div key={c.index} className="w-1/4 py-[2px]">
+                    <Switch
+                      label={c.name}
+                      checked={activeChannels.includes(c.name)}
+                      size="xs"
+                      onChange={() =>
+                        activeChannels.includes(c.name)
+                          ? onChangeActiveChannels(
+                              activeChannels.filter((it) => it !== c.name)
+                            )
+                          : onChangeActiveChannels([...activeChannels, c.name])
+                      }
+                    />
+                  </div>
+                ))}
             </div>
 
             <Button