removed all firebase features

.firebaserc

@@ -1,5 +0,0 @@
-{
-  "projects": {
-    "default": "signal-9546d"
-  }
-}

README.md

@@ -1,8 +1,8 @@
 ---
-title: Midi-Demo
-emoji: 🎷
-colorFrom: white
-colorTo: pink
+title: Signal Midi Frontend Demo
+emoji: 🧑‍🍳
+colorFrom: yellow
+colorTo: green
 sdk: docker
 pinned: false
 ---

firebase.json

@@ -1,17 +0,0 @@
-{
-  "firestore": {
-    "rules": "firestore.rules",
-    "indexes": "firestore.indexes.json"
-  },
-  "emulators": {
-    "auth": {
-      "port": 9099
-    },
-    "firestore": {
-      "port": 8080
-    },
-    "ui": {
-      "enabled": true
-    }
-  }
-}

firestore.indexes.json

@@ -1,4 +0,0 @@
-{
-  "indexes": [],
-  "fieldOverrides": []
-}

firestore.rules

@@ -1,15 +0,0 @@
-rules_version = '2';
-service cloud.firestore {
-  match /databases/{database}/documents {
-    match /songs/{songId} {
-      allow read, delete: if request.auth != null && request.auth.uid == resource.data.userId;
-      allow update: if request.auth != null && request.auth.uid == resource.data.userId && !('uid' in request.writeFields);
-      allow create: if request.auth != null && request.auth.uid == request.resource.data.userId;
-    }
-    match /songData/{songDataId} {
-      allow read, delete: if request.auth != null && request.auth.uid == resource.data.userId;
-      allow update: if request.auth != null && request.auth.uid == resource.data.userId && !('uid' in request.writeFields);
-      allow create: if request.auth != null && request.auth.uid == request.resource.data.userId;
-    }
-  }
-}

package.json

@@ -8,9 +8,7 @@
     "serve": "npx http-server dist",
     "test": "jest",
     "format": "prettier --write src",
-    "lint": "prettier --check src",
-    "firebase": "firebase emulators:start",
-    "firebase:deploy": "firebase deploy"
+    "lint": "prettier --check src"
   },
   "repository": {
     "type": "git",
@@ -41,8 +39,6 @@
     "@sentry/react": "^7.69.0",
     "@sentry/tracing": "^7.69.0",
     "color": "^4.2.3",
-    "firebase": "^10.4.0",
-    "firebaseui": "^6.1.0",
     "gl-matrix": "^3.4.3",
     "lodash": "^4.17.21",
     "mdi-react": "^9.2.0",

src/common/song/Song.ts

@@ -9,7 +9,6 @@ import {
   transaction,
 } from "mobx"
 import { createModelSchema, list, object, primitive } from "serializr"
-import { FirestoreSong, FirestoreSongData } from "../../firebase/song"
 import { TIME_BASE } from "../../main/Constants"
 import { isNotUndefined } from "../helpers/array"
 import { Measure } from "../measure/Measure"
@@ -25,8 +24,6 @@ export default class Song {
   timebase: number = TIME_BASE
   name: string = ""
   fileHandle: FileSystemFileHandle | null = null
-  firestoreReference: DocumentReference<FirestoreSong> | null = null
-  firestoreDataReference: DocumentReference<FirestoreSongData> | null = null
   isSaved = true
 
   constructor() {

src/community/components/Navigation.tsx

@@ -1,6 +1,5 @@
 import styled from "@emotion/styled"
 import { FC } from "react"
-import { auth } from "../../firebase/firebase"
 import { UserButtonContent } from "../../main/components/Navigation/UserButtonContent"
 import { useStores } from "../hooks/useStores"
 
@@ -26,9 +25,6 @@ const NavigationWrapper = styled.div`
 `
 
 export const Navigation: FC = () => {
-  const {
-    authStore: { user },
-  } = useStores()
 
   return (
     <NavigationWrapper>
@@ -36,13 +32,6 @@ export const Navigation: FC = () => {
         <LogoWrapper href="/">
           <img src="logo-white.svg" style={{ height: "1.7rem" }} />
         </LogoWrapper>
-        <UserButtonContent
-          user={user}
-          onClickSignIn={() => {}}
-          onClickSignOut={async () => {
-            await auth.signOut()
-          }}
-        />
       </Container>
     </NavigationWrapper>
   )

src/community/components/RootView.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled"
 import { FC } from "react"
 import { BottomPlayer } from "./BottomPlayer"
 import { Navigation } from "./Navigation"
-import { SongList } from "./SongList"
 
 const Container = styled.div`
   display: flex;
@@ -35,8 +34,6 @@ export const RootView: FC = () => {
       <Navigation />
       <Content>
         <Inner>
-          <Title>Community Tracks</Title>
-          <SongList />
         </Inner>
       </Content>
       <BottomPlayer />

src/community/components/SongList.tsx

@@ -1,39 +0,0 @@
-import { observer } from "mobx-react-lite"
-import { FC, useEffect } from "react"
-import { useStores } from "../hooks/useStores"
-import { SongListItem } from "./SongListItem"
-
-export const SongList: FC = observer(() => {
-  const { authStore, communitySongStore } = useStores()
-
-  useEffect(() => {
-    ;(async () => {
-      if (authStore.user) {
-        // TODO: Remove checking user is logged-in
-        await communitySongStore.load()
-      }
-    })()
-  }, [])
-
-  const { songs } = communitySongStore
-
-  const items = songs.map((d) => ({
-    song: {
-      id: d.id,
-      name: d.data().name,
-      updatedAt: new Date(d.data().updatedAt.toDate()),
-    },
-    user: {
-      name: d.data().userId,
-      photoURL: "",
-    },
-  }))
-
-  return (
-    <>
-      {items.map((s) => (
-        <SongListItem song={s.song} user={s.user} />
-      ))}
-    </>
-  )
-})

src/community/stores/CommunitySongStore.ts

@@ -1,22 +0,0 @@
-import { QueryDocumentSnapshot } from "@firebase/firestore"
-import { makeObservable, observable } from "mobx"
-import { FirestoreSong, getCurrentUserSongs } from "../../firebase/song"
-
-export class CommunitySongStore {
-  isLoading = false
-  songs: QueryDocumentSnapshot<FirestoreSong>[] = []
-
-  constructor() {
-    makeObservable(this, {
-      isLoading: observable,
-      songs: observable,
-    })
-  }
-
-  async load() {
-    this.isLoading = true
-    const snapshot = await getCurrentUserSongs()
-    this.songs = snapshot.docs
-    this.isLoading = false
-  }
-}

src/community/stores/RootStore.ts

@@ -1,13 +1,9 @@
 import Player from "../../common/player"
 import { SoundFontSynth } from "../../main/services/SoundFontSynth"
-import { AuthStore } from "../../main/stores/AuthStore"
-import { CommunitySongStore } from "./CommunitySongStore"
 import { SongStore } from "./SongStore"
 
 export default class RootStore {
   readonly songStore = new SongStore()
-  readonly authStore = new AuthStore()
-  readonly communitySongStore = new CommunitySongStore()
   readonly player: Player
   readonly synth: SoundFontSynth
 

src/firebase/firebase.ts

@@ -1,23 +0,0 @@
-import { initializeApp } from "firebase/app"
-import { connectAuthEmulator, getAuth } from "firebase/auth"
-import { connectFirestoreEmulator, getFirestore } from "firebase/firestore"
-
-const firebaseConfig = {
-  apiKey: "AIzaSyC5b6N6A1fFxdUyWdZh0RqxvfdM--YD8P0",
-  authDomain: "signal-9546d.firebaseapp.com",
-  projectId: "signal-9546d",
-  storageBucket: "signal-9546d.appspot.com",
-  messagingSenderId: "312735607354",
-  appId: "1:312735607354:web:78b487832370b170e32303",
-}
-
-const app = initializeApp(firebaseConfig)
-
-export const auth = getAuth(app)
-
-export const firestore = getFirestore(app)
-
-if (process.env.NODE_ENV !== "production") {
-  connectAuthEmulator(auth, "http://localhost:9099")
-  connectFirestoreEmulator(firestore, "localhost", 8080)
-}

src/firebase/song.ts

@@ -1,155 +0,0 @@
-import {
-  addDoc,
-  Bytes,
-  collection,
-  deleteDoc,
-  DocumentReference,
-  FirestoreDataConverter,
-  getDoc,
-  getDocs,
-  query,
-  QueryDocumentSnapshot,
-  serverTimestamp,
-  Timestamp,
-  updateDoc,
-  where,
-} from "firebase/firestore"
-import { songFromMidi, songToMidi } from "../common/midi/midiConversion"
-import Song from "../common/song"
-import { auth, firestore } from "./firebase"
-
-export interface FirestoreSongData {
-  createdAt: Timestamp
-  updatedAt: Timestamp
-  data?: Bytes
-  userId: string
-}
-
-export interface FirestoreSong {
-  name: string
-  createdAt: Timestamp
-  updatedAt: Timestamp
-  dataRef: DocumentReference
-  userId: string
-}
-
-export const songConverter: FirestoreDataConverter<FirestoreSong> = {
-  fromFirestore(snapshot, options) {
-    const data = snapshot.data(options)
-    return data as FirestoreSong
-  },
-  toFirestore(song) {
-    return song
-  },
-}
-
-export const songDataConverter: FirestoreDataConverter<FirestoreSongData> = {
-  fromFirestore(snapshot, options) {
-    const data = snapshot.data(options)
-    return data as FirestoreSongData
-  },
-  toFirestore(song) {
-    return song
-  },
-}
-
-export const songCollection = collection(firestore, "songs").withConverter(
-  songConverter,
-)
-
-export const songDataCollection = collection(
-  firestore,
-  "songData",
-).withConverter(songDataConverter)
-
-export const loadSong = async (
-  songSnapshot: QueryDocumentSnapshot<FirestoreSong>,
-) => {
-  const snapshot = await getDoc(
-    songSnapshot.data().dataRef.withConverter(songDataConverter),
-  )
-  const data = snapshot.data()?.data
-  if (data === undefined) {
-    throw new Error("Song data does not exist")
-  }
-  const song = songFromMidi(data.toUint8Array())
-  song.name = songSnapshot.data().name
-  song.firestoreReference = songSnapshot.ref
-  song.firestoreDataReference = snapshot.ref
-  song.isSaved = true
-  return song
-}
-
-export const createSong = async (song: Song) => {
-  if (auth.currentUser === null) {
-    throw new Error("You must be logged in to save songs to the cloud")
-  }
-
-  const bytes = songToMidi(song)
-
-  const dataDoc = await addDoc(songDataCollection, {
-    createdAt: serverTimestamp(),
-    updatedAt: serverTimestamp(),
-    data: Bytes.fromUint8Array(bytes),
-    userId: auth.currentUser.uid,
-  })
-
-  const doc = await addDoc(songCollection, {
-    name: song.name,
-    createdAt: serverTimestamp(),
-    updatedAt: serverTimestamp(),
-    dataRef: dataDoc,
-    userId: auth.currentUser.uid,
-  })
-
-  song.firestoreDataReference = dataDoc
-  song.firestoreReference = doc
-  song.isSaved = true
-}
-
-export const updateSong = async (song: Song) => {
-  if (auth.currentUser === null) {
-    throw new Error("You must be logged in to save songs to the cloud")
-  }
-
-  if (
-    song.firestoreReference === null ||
-    song.firestoreDataReference === null
-  ) {
-    throw new Error("This song is not loaded from the cloud")
-  }
-
-  const bytes = songToMidi(song)
-
-  await updateDoc(song.firestoreReference, {
-    updatedAt: serverTimestamp(),
-    name: song.name,
-  })
-
-  await updateDoc(song.firestoreDataReference, {
-    updatedAt: serverTimestamp(),
-    data: Bytes.fromUint8Array(bytes),
-  })
-
-  song.isSaved = true
-}
-
-export const deleteSong = async (
-  song: QueryDocumentSnapshot<FirestoreSong>,
-) => {
-  if (auth.currentUser === null) {
-    throw new Error("You must be logged in to save songs to the cloud")
-  }
-  await deleteDoc(song.data().dataRef)
-  await deleteDoc(song.ref)
-}
-
-export const getCurrentUserSongs = async () => {
-  if (auth.currentUser === null) {
-    throw new Error("You must be logged in to get songs from the cloud")
-  }
-
-  return await getDocs(
-    query(songCollection, where("userId", "==", auth.currentUser.uid)),
-  )
-}

src/main/components/CloudFileDialog/CloudFileDialog.tsx

@@ -1,41 +0,0 @@
-import { observer } from "mobx-react-lite"
-import { useCallback } from "react"
-import { Button } from "../../../components/Button"
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-} from "../../../components/Dialog"
-import { Localized } from "../../../components/Localized"
-import { useStores } from "../../hooks/useStores"
-import { CloudFileList } from "./CloudFileList"
-
-export const CloudFileDialog = observer(() => {
-  const rootStore = useStores()
-  const {
-    rootViewStore,
-    rootViewStore: { openCloudFileDialog },
-  } = rootStore
-
-  const onClose = useCallback(
-    () => (rootViewStore.openCloudFileDialog = false),
-    [rootViewStore],
-  )
-
-  return (
-    <Dialog open={openCloudFileDialog} onOpenChange={onClose}>
-      <DialogTitle>
-        <Localized default="Files">files</Localized>
-      </DialogTitle>
-      <DialogContent>
-        <CloudFileList />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>
-          <Localized default="Close">close</Localized>
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-})

src/main/components/CloudFileDialog/CloudFileList.tsx

@@ -1,176 +0,0 @@
-import styled from "@emotion/styled"
-import { QueryDocumentSnapshot } from "firebase/firestore"
-import ArrowDownward from "mdi-react/ArrowDownwardIcon"
-import ArrowDropDown from "mdi-react/ArrowDropDownIcon"
-import ArrowUpward from "mdi-react/ArrowUpwardIcon"
-import { observer } from "mobx-react-lite"
-import { FC, useEffect } from "react"
-import { CircularProgress } from "../../../components/CircularProgress"
-import { IconButton } from "../../../components/IconButton"
-import { Localized } from "../../../components/Localized"
-import { Menu, MenuItem } from "../../../components/Menu"
-import { FirestoreSong, loadSong } from "../../../firebase/song"
-import { setSong } from "../../actions"
-import { useLocalization } from "../../hooks/useLocalization"
-import { useStores } from "../../hooks/useStores"
-import { useTheme } from "../../hooks/useTheme"
-import { useToast } from "../../hooks/useToast"
-import { CloudFileRow } from "./CloudFileRow"
-
-const ArrowUp = styled(ArrowUpward)`
-  width: 1.1rem;
-  height: 1.1rem;
-`
-
-const ArrowDown = styled(ArrowDownward)`
-  width: 1.1rem;
-  height: 1.1rem;
-`
-
-const HeaderCell = styled.div`
-  display: flex;
-  align-items: center;
-  background: ${({ theme }) => theme.backgroundColor};
-  font-weight: ${({ isSelected }: { isSelected?: boolean }) =>
-    isSelected ? "bold" : "normal"};
-  cursor: pointer;
-  padding: 0 1rem;
-  box-sizing: border-box;
-
-  &:hover {
-    background: ${({ theme }) => theme.secondaryBackgroundColor};
-  }
-`
-
-const NameCell = styled(HeaderCell)`
-  flex-grow: 1;
-`
-
-const DateCell = styled(HeaderCell)`
-  width: 12rem;
-`
-
-const MenuCell = styled(HeaderCell)`
-  width: 4rem;
-`
-
-const Body = styled.div`
-  max-height: 20rem;
-  overflow-y: auto;
-
-  tr:hover td {
-    background: ${({ theme }) => theme.secondaryBackgroundColor};
-  }
-`
-
-const SortButton: FC<{ sortAscending: boolean }> = ({ sortAscending }) =>
-  sortAscending ? <ArrowDown /> : <ArrowUp />
-
-const Container = styled.div``
-
-const Header = styled.div`
-  display: flex;
-  height: 2.5rem;
-`
-
-export const CloudFileList = observer(() => {
-  const rootStore = useStores()
-  const { cloudFileStore, rootViewStore } = rootStore
-  const toast = useToast()
-  const theme = useTheme()
-  const localized = useLocalization()
-  const { isLoading, dateType, files, selectedColumn, sortAscending } =
-    cloudFileStore
-
-  useEffect(() => {
-    cloudFileStore.load()
-  }, [])
-
-  const onClickSong = async (song: QueryDocumentSnapshot<FirestoreSong>) => {
-    try {
-      const midiSong = await loadSong(song)
-      setSong(rootStore)(midiSong)
-      rootViewStore.openCloudFileDialog = false
-    } catch (e) {
-      toast.error((e as Error).message)
-    }
-  }
-  if (isLoading) {
-    return <CircularProgress />
-  }
-
-  const sortLabel = (() => {
-    switch (dateType) {
-      case "created":
-        return localized("created-date", "Created")
-      case "updated":
-        return localized("modified-date", "Modified")
-    }
-  })()
-
-  return (
-    <Container>
-      <Header>
-        <NameCell
-          onClick={() => {
-            if (cloudFileStore.selectedColumn === "name") {
-              cloudFileStore.sortAscending = !cloudFileStore.sortAscending
-            } else {
-              cloudFileStore.selectedColumn = "name"
-            }
-          }}
-          isSelected={selectedColumn === "name"}
-        >
-          <Localized default="Name">name</Localized>
-          <div style={{ width: "0.5rem" }}></div>
-          {selectedColumn === "name" && (
-            <SortButton sortAscending={sortAscending} />
-          )}
-        </NameCell>
-        <DateCell
-          onClick={() => {
-            if (cloudFileStore.selectedColumn === "date") {
-              cloudFileStore.sortAscending = !cloudFileStore.sortAscending
-            } else {
-              cloudFileStore.selectedColumn = "date"
-            }
-          }}
-          isSelected={selectedColumn === "date"}
-        >
-          {sortLabel}
-          <Menu
-            trigger={
-              <IconButton
-                style={{
-                  marginLeft: "0.2em",
-                }}
-              >
-                <ArrowDropDown style={{ fill: theme.secondaryTextColor }} />
-              </IconButton>
-            }
-          >
-            <MenuItem onClick={() => (cloudFileStore.dateType = "created")}>
-              <Localized default="Created">created-date</Localized>
-            </MenuItem>
-            <MenuItem onClick={() => (cloudFileStore.dateType = "updated")}>
-              <Localized default="Modified">modified-date</Localized>
-            </MenuItem>
-          </Menu>
-          {selectedColumn === "date" && (
-            <SortButton sortAscending={sortAscending} />
-          )}
-        </DateCell>
-        <MenuCell></MenuCell>
-      </Header>
-      <Body>
-        {files.map((song) => (
-          <CloudFileRow
-            song={song}
-            dateType={dateType}
-            onClick={() => onClickSong(song)}
-          />
-        ))}
-      </Body>
-    </Container>
-  )
-})

src/main/components/CloudFileDialog/CloudFileRow.tsx

@@ -1,120 +0,0 @@
-import styled from "@emotion/styled"
-import { QueryDocumentSnapshot } from "firebase/firestore"
-import DotsHorizontalIcon from "mdi-react/DotsHorizontalIcon"
-import { observer } from "mobx-react-lite"
-import { FC } from "react"
-import { IconButton } from "../../../components/IconButton"
-import { Localized } from "../../../components/Localized"
-import { Menu, MenuItem } from "../../../components/Menu"
-import { FirestoreSong } from "../../../firebase/song"
-import { useLocalization } from "../../hooks/useLocalization"
-import { useStores } from "../../hooks/useStores"
-import { useTheme } from "../../hooks/useTheme"
-import { useToast } from "../../hooks/useToast"
-
-const Container = styled.div`
-  display: flex;
-  cursor: pointer;
-  height: 2.5rem;
-  overflow: hidden;
-
-  &:hover {
-    background: ${({ theme }) => theme.secondaryBackgroundColor};
-  }
-`
-
-const Cell = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 0 1rem;
-  box-sizing: border-box;
-`
-
-const NameCell = styled(Cell)`
-  overflow: hidden;
-  flex-grow: 1;
-`
-
-const DateCell = styled(Cell)`
-  width: 12rem;
-  flex-shrink: 0;
-`
-
-const MenuCell = styled(Cell)`
-  width: 4rem;
-  flex-shrink: 0;
-`
-
-const NoWrapText = styled.span`
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`
-
-export interface CloudFileRowProps {
-  onClick: () => void
-  song: QueryDocumentSnapshot<FirestoreSong>
-  dateType: "created" | "updated"
-}
-
-export const CloudFileRow: FC<CloudFileRowProps> = observer(
-  ({ song, onClick, dateType }) => {
-    const theme = useTheme()
-    const toast = useToast()
-    const localized = useLocalization()
-    const { cloudFileStore } = useStores()
-    const date: Date = (() => {
-      switch (dateType) {
-        case "created":
-          return song.data().createdAt.toDate()
-        case "updated":
-          return song.data().updatedAt.toDate()
-      }
-    })()
-    const songName =
-      song.data().name.length > 0
-        ? song.data().name
-        : localized("untitled-song", "Untitled song")
-    const dateStr = date.toLocaleDateString() + " " + date.toLocaleTimeString()
-    return (
-      <Container onClick={onClick}>
-        <NameCell>
-          <NoWrapText>{songName}</NoWrapText>
-        </NameCell>
-        <DateCell>{dateStr}</DateCell>
-        <MenuCell>
-          <Menu
-            trigger={
-              <IconButton
-                style={{
-                  marginLeft: "0.2em",
-                }}
-              >
-                <DotsHorizontalIcon
-                  style={{ fill: theme.secondaryTextColor }}
-                />
-              </IconButton>
-            }
-          >
-            <MenuItem
-              onClick={async (e) => {
-                e.stopPropagation()
-                try {
-                  await cloudFileStore.deleteSong(song)
-                  toast.info(localized("song-deleted", "Song deleted"))
-                } catch (e) {
-                  console.error(e)
-                  toast.error(
-                    localized("song-delete-failed", "Song delete failed"),
-                  )
-                }
-              }}
-            >
-              <Localized default="Delete">delete</Localized>
-            </MenuItem>
-          </Menu>
-        </MenuCell>
-      </Container>
-    )
-  },
-)

src/main/components/FirebaseAuth/StyledFirebaseAuth.tsx

@@ -1,106 +0,0 @@
-// Copy from https://github.com/firebase/firebaseui-web-react/pull/173#issuecomment-1151532176
-
-import styled from "@emotion/styled"
-import { onAuthStateChanged } from "firebase/auth"
-import * as firebaseui from "firebaseui"
-import { useEffect, useRef, useState } from "react"
-
-interface Props {
-  // The Firebase UI Web UI Config object.
-  // See: https://github.com/firebase/firebaseui-web#configuration
-  uiConfig: firebaseui.auth.Config
-  // Callback that will be passed the FirebaseUi instance before it is
-  // started. This allows access to certain configuration options such as
-  // disableAutoSignIn().
-  uiCallback?(ui: firebaseui.auth.AuthUI): void
-  // The Firebase App auth instance to use.
-  firebaseAuth: any // As firebaseui-web
-}
-
-const Container = styled.div`
-  ul.firebaseui-idp-list {
-    list-style-type: none;
-    padding: 0;
-  }
-
-  button.firebaseui-idp-button {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    border: 1px solid ${({ theme }) => theme.dividerColor};
-    background: inherit !important;
-    color: inherit;
-    min-height: 3rem;
-    min-width: 12rem;
-    justify-content: center;
-    cursor: pointer;
-
-    &:hover {
-      background: ${({ theme }) => theme.highlightColor} !important;
-    }
-  }
-
-  img.firebaseui-idp-icon {
-    width: 1.5rem;
-  }
-
-  span.firebaseui-idp-icon-wrapper {
-    display: flex;
-    margin-right: 1rem;
-  }
-
-  span.firebaseui-idp-text.firebaseui-idp-text-short {
-    display: none;
-  }
-
-  li.firebaseui-list-item {
-    margin-bottom: 1rem;
-    display: flex;
-    justify-content: center;
-  }
-`
-
-export const StyledFirebaseAuth = ({
-  uiConfig,
-  firebaseAuth,
-  uiCallback,
-}: Props) => {
-  const [userSignedIn, setUserSignedIn] = useState(false)
-  const elementRef = useRef(null)
-
-  useEffect(() => {
-    // Get or Create a firebaseUI instance.
-    const firebaseUiWidget =
-      firebaseui.auth.AuthUI.getInstance() ||
-      new firebaseui.auth.AuthUI(firebaseAuth)
-
-    if (uiConfig.signInFlow === "popup") {
-      firebaseUiWidget.reset()
-    }
-
-    // We track the auth state to reset firebaseUi if the user signs out.
-    const unregisterAuthObserver = onAuthStateChanged(firebaseAuth, (user) => {
-      if (!user && userSignedIn) {
-        firebaseUiWidget.reset()
-      }
-      setUserSignedIn(!!user)
-    })
-
-    // Trigger the callback if any was set.
-    if (uiCallback) {
-      uiCallback(firebaseUiWidget)
-    }
-
-    // Render the firebaseUi Widget.
-    // @ts-ignore
-    firebaseUiWidget.start(elementRef.current, uiConfig)
-
-    return () => {
-      unregisterAuthObserver()
-      firebaseUiWidget.reset()
-    }
-  }, [firebaseui, uiConfig])
-
-  return <Container ref={elementRef} />
-}

src/main/components/Navigation/CloudFileMenu.tsx

@@ -1,244 +0,0 @@
-import { observer } from "mobx-react-lite"
-import { ChangeEvent, FC } from "react"
-import { emptySong } from "../../../common/song"
-import { Localized } from "../../../components/Localized"
-import { MenuDivider, MenuItem } from "../../../components/Menu"
-import { createSong, updateSong } from "../../../firebase/song"
-import { openSong, saveSong, setSong } from "../../actions"
-import { hasFSAccess, openFile, saveFileAs } from "../../actions/file"
-import { useDialog } from "../../hooks/useDialog"
-import { useLocalization } from "../../hooks/useLocalization"
-import { usePrompt } from "../../hooks/usePrompt"
-import { useStores } from "../../hooks/useStores"
-import { useToast } from "../../hooks/useToast"
-import { FileInput } from "./LegacyFileMenu"
-
-export const CloudFileMenu: FC<{ close: () => void }> = observer(
-  ({ close }) => {
-    const rootStore = useStores()
-    const { rootViewStore } = rootStore
-    const toast = useToast()
-    const prompt = usePrompt()
-    const dialog = useDialog()
-    const localized = useLocalization()
-
-    const saveOrCreateSong = async () => {
-      const { song } = rootStore
-      if (song.firestoreReference !== null) {
-        if (song.name.length === 0) {
-          const text = await prompt.show({
-            title: localized("save-as", "Save as"),
-          })
-          if (text !== null && text.length > 0) {
-            song.name = text
-          }
-        }
-        await updateSong(song)
-        toast.success(localized("song-saved", "Song saved"))
-      } else {
-        if (song.name.length === 0) {
-          const text = await prompt.show({
-            title: localized("save-as", "Save as"),
-          })
-          if (text !== null && text.length > 0) {
-            song.name = text
-          }
-        }
-        await createSong(song)
-        toast.success(localized("song-created", "Song created"))
-      }
-    }
-
-    // true: saved or not necessary
-    // false: canceled
-    const saveIfNeeded = async (): Promise<boolean> => {
-      const { song } = rootStore
-      if (song.isSaved) {
-        return true
-      }
-
-      const res = await dialog.show({
-        title: localized(
-          "save-changes",
-          "Do you want to save your changes to the song?",
-        ),
-        actions: [
-          { title: localized("yes", "Yes"), key: "yes" },
-          { title: localized("no", "No"), key: "no" },
-          { title: localized("cancel", "Cancel"), key: "cancel" },
-        ],
-      })
-      switch (res) {
-        case "yes":
-          await saveOrCreateSong()
-          return true
-        case "no":
-          return true
-        case "cancel":
-          return false
-      }
-    }
-
-    const onClickNew = async () => {
-      close()
-      try {
-        if (!(await saveIfNeeded())) {
-          return
-        }
-        const newSong = emptySong()
-        setSong(rootStore)(newSong)
-        await createSong(newSong)
-        toast.success(localized("song-created", "Song created"))
-      } catch (e) {
-        toast.error((e as Error).message)
-      }
-    }
-
-    const onClickOpen = async () => {
-      close()
-      try {
-        if (!(await saveIfNeeded())) {
-          return
-        }
-        rootViewStore.openCloudFileDialog = true
-      } catch (e) {
-        toast.error((e as Error).message)
-      }
-    }
-
-    const onClickSave = async () => {
-      close()
-      try {
-        await saveOrCreateSong()
-      } catch (e) {
-        toast.error((e as Error).message)
-      }
-    }
-
-    const onClickSaveAs = async () => {
-      const { song } = rootStore
-      close()
-      try {
-        const text = await prompt.show({
-          title: localized("save-as", "Save as"),
-          initialText: song.name,
-        })
-        if (text !== null && text.length > 0) {
-          song.name = text
-        } else {
-          return
-        }
-        await createSong(song)
-        toast.success(localized("song-saved", "Song saved"))
-      } catch (e) {
-        toast.error((e as Error).message)
-      }
-    }
-
-    const onClickRename = async () => {
-      close()
-      const { song } = rootStore
-      try {
-        if (song.name.length === 0) {
-          const text = await prompt.show({
-            title: localized("rename", "Rename"),
-          })
-          if (text !== null && text.length > 0) {
-            song.name = text
-          } else {
-            return Promise.resolve(false)
-          }
-        }
-        if (song.firestoreReference !== null) {
-          await updateSong(song)
-        } else {
-          await createSong(song)
-        }
-        toast.success(localized("song-saved", "Song saved"))
-      } catch (e) {
-        toast.error((e as Error).message)
-      }
-    }
-
-    const onClickImportLegacy = async (e: ChangeEvent<HTMLInputElement>) => {
-      close()
-      try {
-        await openSong(rootStore)(e.currentTarget)
-        await saveOrCreateSong()
-      } catch (e) {
-        toast.error((e as Error).message)
-      }
-    }
-
-    const onClickImport = async () => {
-      close()
-      try {
-        if (!(await saveIfNeeded())) {
-          return
-        }
-        await openFile(rootStore)
-        await saveOrCreateSong()
-      } catch (e) {
-        toast.error((e as Error).message)
-      }
-    }
-
-    const onClickExport = async () => {
-      try {
-        if (hasFSAccess) {
-          await saveFileAs(rootStore)
-        } else {
-          saveSong(rootStore)()
-        }
-      } catch (e) {
-        toast.error((e as Error).message)
-      }
-    }
-
-    return (
-      <>
-        <MenuItem onClick={onClickNew}>
-          <Localized default="New">new-song</Localized>
-        </MenuItem>
-
-        <MenuDivider />
-
-        <MenuItem onClick={onClickOpen}>
-          <Localized default="Open">open-song</Localized>
-        </MenuItem>
-
-        <MenuItem onClick={onClickSave} disabled={rootStore.song.isSaved}>
-          <Localized default="Save">save-song</Localized>
-        </MenuItem>
-
-        <MenuItem onClick={onClickSaveAs}>
-          <Localized default="Save As">save-as</Localized>
-        </MenuItem>
-
-        <MenuItem onClick={onClickRename}>
-          <Localized default="Rename">rename</Localized>
-        </MenuItem>
-
-        <MenuDivider />
-
-        {!hasFSAccess && (
-          <FileInput onChange={onClickImportLegacy}>
-            <MenuItem>
-              <Localized default="Import MIDI file">import-midi</Localized>
-            </MenuItem>
-          </FileInput>
-        )}
-
-        {hasFSAccess && (
-          <MenuItem onClick={onClickImport}>
-            <Localized default="Import MIDI file">import-midi</Localized>
-          </MenuItem>
-        )}
-
-        <MenuItem onClick={onClickExport}>
-          <Localized default="Export MIDI file">export-midi</Localized>
-        </MenuItem>
-      </>
-    )
-  },
-)

src/main/components/Navigation/FileMenuButton.tsx

@@ -1,4 +1,3 @@
-import CloudOutlined from "mdi-react/CloudOutlineIcon"
 import KeyboardArrowDown from "mdi-react/KeyboardArrowDownIcon"
 import { observer } from "mobx-react-lite"
 import { FC, useCallback, useRef } from "react"
@@ -6,7 +5,6 @@ import { Localized } from "../../../components/Localized"
 import { Menu, MenuDivider, MenuItem } from "../../../components/Menu"
 import { hasFSAccess } from "../../actions/file"
 import { useStores } from "../../hooks/useStores"
-import { CloudFileMenu } from "./CloudFileMenu"
 import { FileMenu } from "./FileMenu"
 import { LegacyFileMenu } from "./LegacyFileMenu"
 import { Tab } from "./Navigation"
@@ -15,8 +13,7 @@ export const FileMenuButton: FC = observer(() => {
   const rootStore = useStores()
   const {
     rootViewStore,
-    exportStore,
-    authStore: { user },
+    exportStore
   } = rootStore
   const isOpen = rootViewStore.openDrawer
   const handleClose = () => (rootViewStore.openDrawer = false)
@@ -45,9 +42,9 @@ export const FileMenuButton: FC = observer(() => {
         </Tab>
       }
     >
-      {user === null && hasFSAccess && <FileMenu close={handleClose} />}
+      {hasFSAccess && <FileMenu close={handleClose} />}
 
-      {user === null && !hasFSAccess && <LegacyFileMenu close={handleClose} />}
+      {!hasFSAccess && <LegacyFileMenu close={handleClose} />}
 
       <MenuDivider />
 

src/main/components/Navigation/Navigation.tsx

@@ -89,7 +89,6 @@ export const IconStyle: CSSProperties = {
 export const Navigation: FC = observer(() => {
   const {
     rootViewStore,
-    authStore: { user },
     router,
   } = useStores()
 

src/main/components/Navigation/UserButton.tsx

@@ -1,22 +1,12 @@
 import { observer } from "mobx-react-lite"
 import { FC } from "react"
-import { auth } from "../../../firebase/firebase"
 import { useStores } from "../../hooks/useStores"
 import { UserButtonContent } from "./UserButtonContent"
 
 export const UserButton: FC = observer(() => {
   const {
     rootViewStore,
-    authStore: { user },
   } = useStores()
 
-  return (
-    <UserButtonContent
-      user={user}
-      onClickSignIn={() => (rootViewStore.openSignInDialog = true)}
-      onClickSignOut={async () => {
-        await auth.signOut()
-      }}
-    />
-  )
+  return (null)
 })

src/main/components/RootView/RootView.tsx

@@ -4,7 +4,6 @@ import { FC } from "react"
 import { useStores } from "../../hooks/useStores"
 import { ArrangeEditor } from "../ArrangeView/ArrangeEditor"
 import { BuildInfo } from "../BuildInfo"
-import { CloudFileDialog } from "../CloudFileDialog/CloudFileDialog"
 import { ControlSettingDialog } from "../ControlSettingDialog/ControlSettingDialog"
 import { ExportDialog } from "../ExportDialog/ExportDialog"
 import { ExportProgressDialog } from "../ExportDialog/ExportProgressDialog"
@@ -14,7 +13,6 @@ import { Navigation } from "../Navigation/Navigation"
 import { OnBeforeUnload } from "../OnBeforeUnload/OnBeforeUnload"
 import { PianoRollEditor } from "../PianoRoll/PianoRollEditor"
 import { SettingDialog } from "../SettingDialog/SettingDialog"
-import { SignInDialog } from "../SignInDialog/SignInDialog"
 import { TempoEditor } from "../TempoGraph/TempoEditor"
 import { TransportPanel } from "../TransportPanel/TransportPanel"
 import { ArrangeTransposeDialog } from "../TransposeDialog/ArrangeTransposeDialog"

src/main/components/SignInDialog/SignInDialog.tsx

@@ -1,39 +0,0 @@
-import { observer } from "mobx-react-lite"
-import { FC, useCallback } from "react"
-import { useLocalization } from "../../hooks/useLocalization"
-import { useStores } from "../../hooks/useStores"
-import { useToast } from "../../hooks/useToast"
-import { SignInDialogContent } from "./SignInDialogContent"
-
-export const SignInDialog: FC = observer(() => {
-  const rootStore = useStores()
-  const {
-    rootViewStore,
-    rootViewStore: { openSignInDialog },
-  } = rootStore
-  const toast = useToast()
-  const localized = useLocalization()
-
-  const onClose = useCallback(
-    () => (rootViewStore.openSignInDialog = false),
-    [rootViewStore],
-  )
-
-  const signInSuccessWithAuthResult = () => {
-    rootViewStore.openSignInDialog = false
-    toast.success(localized("success-sign-in", "Successfully signed in"))
-  }
-
-  const signInFailure = (error: firebaseui.auth.AuthUIError) => {
-    console.warn(error)
-  }
-
-  return (
-    <SignInDialogContent
-      open={openSignInDialog}
-      onClose={onClose}
-      onSuccess={signInSuccessWithAuthResult}
-      onFailure={signInFailure}
-    />
-  )
-})

src/main/components/SignInDialog/SignInDialogContent.tsx

@@ -1,86 +0,0 @@
-import { FC } from "react"
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-} from "../../../components/Dialog"
-import { StyledFirebaseAuth } from "../FirebaseAuth/StyledFirebaseAuth"
-
-import styled from "@emotion/styled"
-import "firebase/auth"
-import { GithubAuthProvider, GoogleAuthProvider } from "firebase/auth"
-import { Alert } from "../../../components/Alert"
-import { Button } from "../../../components/Button"
-import { Localized } from "../../../components/Localized"
-import { auth } from "../../../firebase/firebase"
-
-const BetaLabel = styled.span`
-  border: 1px solid currentColor;
-  font-size: 0.8rem;
-  padding: 0.1rem 0.4rem;
-  margin-left: 1em;
-  color: ${({ theme }) => theme.secondaryTextColor};
-`
-
-const Description = styled.div`
-  margin: 1rem 0 2rem 0;
-  line-height: 1.5;
-`
-
-export interface SignInDialogContentProps {
-  open: boolean
-  onClose: () => void
-  onSuccess: () => void
-  onFailure: (error: firebaseui.auth.AuthUIError) => void
-}
-
-export const SignInDialogContent: FC<SignInDialogContentProps> = ({
-  open,
-  onClose,
-  onSuccess,
-  onFailure,
-}) => {
-  return (
-    <Dialog open={open} onOpenChange={onClose} style={{ minWidth: "20rem" }}>
-      <DialogTitle>
-        <Localized default="Sign in">sign-in</Localized>
-        <BetaLabel>Beta</BetaLabel>
-      </DialogTitle>
-      <DialogContent>
-        <Alert severity="info">
-          <Localized default="Since the cloud function is in beta during development, please download and save your important songs frequently.">
-            cloud-beta-warning
-          </Localized>
-        </Alert>
-        <Description>
-          <Localized default="By signing in, you can save your music to the cloud and resume composing from anywhere at any time.">
-            cloud-description
-          </Localized>
-        </Description>
-        <StyledFirebaseAuth
-          uiConfig={{
-            signInOptions: [
-              GoogleAuthProvider.PROVIDER_ID,
-              GithubAuthProvider.PROVIDER_ID,
-            ],
-            callbacks: {
-              signInSuccessWithAuthResult() {
-                onSuccess()
-                return false
-              },
-              signInFailure: onFailure,
-            },
-            signInFlow: "popup",
-          }}
-          firebaseAuth={auth}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>
-          <Localized default="Close">close</Localized>
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

src/main/stores/AuthStore.ts

@@ -1,17 +0,0 @@
-import { User } from "firebase/auth"
-import { makeObservable, observable } from "mobx"
-import { auth } from "../../firebase/firebase"
-
-export class AuthStore {
-  user: User | null = null
-
-  constructor() {
-    makeObservable(this, {
-      user: observable,
-    })
-
-    auth.onAuthStateChanged((user) => {
-      this.user = user
-    })
-  }
-}

src/main/stores/CloudFileStore.ts

@@ -1,65 +0,0 @@
-import { QueryDocumentSnapshot } from "@firebase/firestore"
-import { orderBy } from "lodash"
-import { computed, makeObservable, observable } from "mobx"
-import {
-  FirestoreSong,
-  deleteSong,
-  getCurrentUserSongs,
-} from "../../firebase/song"
-import RootStore from "./RootStore"
-
-export class CloudFileStore {
-  isLoading = false
-  selectedColumn: "name" | "date" = "date"
-  dateType: "created" | "updated" = "created"
-  sortAscending = false
-  _files: QueryDocumentSnapshot<FirestoreSong>[] = []
-
-  constructor(private readonly rootStore: RootStore) {
-    makeObservable(this, {
-      isLoading: observable,
-      selectedColumn: observable,
-      dateType: observable,
-      sortAscending: observable,
-      _files: observable,
-      files: computed,
-    })
-  }
-
-  async load() {
-    this.isLoading = true
-    const snapshot = await getCurrentUserSongs()
-    this._files = snapshot.docs
-    this.isLoading = false
-  }
-
-  get files() {
-    return orderBy(
-      this._files,
-      (f) => {
-        const data = f.data()
-        switch (this.selectedColumn) {
-          case "name":
-            return data.name
-          case "date":
-            switch (this.dateType) {
-              case "created":
-                return data.createdAt.seconds
-              case "updated":
-                return data.updatedAt.seconds
-            }
-        }
-      },
-      this.sortAscending ? "asc" : "desc",
-    )
-  }
-
-  async deleteSong(song: QueryDocumentSnapshot<FirestoreSong>) {
-    await deleteSong(song)
-    if (this.rootStore.song.firestoreReference?.id === song.id) {
-      this.rootStore.song.firestoreReference = null
-      this.rootStore.song.firestoreDataReference = null
-    }
-    await this.load()
-  }
-}

src/main/stores/RootStore.ts

@@ -8,8 +8,6 @@ import { MIDIInput, previewMidiInput } from "../services/MIDIInput"
 import { MIDIRecorder } from "../services/MIDIRecorder"
 import { SoundFontSynth } from "../services/SoundFontSynth"
 import ArrangeViewStore from "./ArrangeViewStore"
-import { AuthStore } from "./AuthStore"
-import { CloudFileStore } from "./CloudFileStore"
 import { ControlStore } from "./ControlStore"
 import { ExportStore } from "./ExportStore"
 import HistoryStore from "./HistoryStore"
@@ -33,8 +31,6 @@ export default class RootStore {
   readonly tempoEditorStore = new TempoEditorStore(this)
   readonly midiDeviceStore = new MIDIDeviceStore()
   readonly exportStore = new ExportStore()
-  readonly authStore = new AuthStore()
-  readonly cloudFileStore = new CloudFileStore(this)
   readonly settingStore = new SettingStore()
   readonly player: Player
   readonly synth: SoundFontSynth