Update src/components/menu-bar/google-drive-save.jsx

src/components/menu-bar/google-drive-save.jsx

@@ -20,14 +20,24 @@ class GoogleDriveSave extends React.Component {
             isProcessing: false,
             newFileName: props.projectTitle || '無題',
             showNewFileInput: false,
-            sharePermission: 'reader', // 'reader', 'writer', or 'owner'
-            selectedFileId: null
+            sharePermission: 'reader',
+            selectedFileId: null,
+            // 共有モーダル用の状態
+            isShareModalOpen: false,
+            currentSharingFileId: null,
+            emailPermissions: [{ email: '', role: 'reader' }],
+            linkPermission: 'reader',
+            groupPermission: 'reader'
         };
         this.modalContentRef = React.createRef();
+        this.shareModalContentRef = React.createRef();
     }
 
     componentDidMount() {
-        // 初期化処理
+        // アクセストークンがある場合はファイル一覧を取得
+        if (this.state.accessToken) {
+            this.fetchDriveFiles(this.state.accessToken);
+        }
     }
 
     handleClick = () => {
@@ -36,7 +46,11 @@ class GoogleDriveSave extends React.Component {
 
     handleCloseModal = () => {
         if (!this.state.isProcessing) {
-            this.setState({isModalOpen: false, showNewFileInput: false});
+            this.setState({
+                isModalOpen: false, 
+                showNewFileInput: false,
+                isShareModalOpen: false
+            });
         }
     };
 
@@ -67,6 +81,10 @@ class GoogleDriveSave extends React.Component {
                     isModalOpen: true
                 });
                 
+                localStorage.setItem('googleDriveAccessToken', event.data.token);
+                if (event.data.email) localStorage.setItem('googleDriveAccountEmail', event.data.email);
+                if (event.data.name) localStorage.setItem('googleDriveAccountName', event.data.name);
+                
                 this.fetchDriveFiles(event.data.token);
             }
         };
@@ -98,11 +116,19 @@ class GoogleDriveSave extends React.Component {
             this.setState({files: data.files || [], isLoading: false});
         } catch (error) {
             console.error("ファイル一覧取得エラー:", error);
-            alert("error", "ファイル一覧の取得に失敗しました");
+            this.showAlert("error", "ファイル一覧の取得に失敗しました");
             this.setState({isLoading: false});
         }
     };
 
+    showAlert = (type, message) => {
+        if (this.props.showAlert) {
+            this.props.showAlert(type, message);
+        } else {
+            alert(`${type}: ${message}`);
+        }
+    };
+
     renderModal() {
         if (!this.state.isModalOpen) return null;
 
@@ -218,7 +244,7 @@ class GoogleDriveSave extends React.Component {
                 <button 
                     onClick={() => this.setState({
                         showNewFileInput: true, 
-                        newFileName: window.vm.runtime.projectName || '無題',
+                        newFileName: window.vm && window.vm.runtime ? window.vm.runtime.projectName || '無題' : '無題',
                         sharePermission: 'reader'
                     })}
                     className={styles.newFileButton}
@@ -255,102 +281,67 @@ class GoogleDriveSave extends React.Component {
         );
     }
 
-renderFileItem(project, thumbnailFiles) {
-    const thumbnail = thumbnailFiles.find(
-        thumb => thumb.name === `Scratch-Thumbnail-${project.id}.png`
-    );
-
-    return (
-        <div key={project.id} className={styles.fileItem}>
-            <div className={styles.thumbnailContainer}>
-                {thumbnail ? (
-                    <img 
-                        src={`https://drive.google.com/thumbnail?id=${thumbnail.id}&sz=w300`}
-                        alt="プロジェクトサムネイル"
-                        className={styles.thumbnail}
-                    />
-                ) : (
-                    <div className={styles.thumbnailPlaceholder}>
-                        サムネイルなし
-                    </div>
-                )}
-            </div>
-            
-            <h3 className={styles.fileName}>
-                {project.name.replace('.s4s.txt', '')}
-            </h3>
-            
-            {this.renderShareLink(project.id)}
-            
-            <div className={styles.buttonGroup}>
-                <button 
-                    onClick={() => this.handleLoadFile(project)}
-                    className={styles.actionButton}
-                    disabled={this.state.isProcessing}
-                >
-                    読み込む
-                </button>
-                <button 
-                    onClick={() => this.handleReplaceFile(project)}
-                    className={styles.actionButton}
-                    disabled={this.state.isProcessing}
-                >
-                    上書き
-                </button>
-                <button 
-                    onClick={() => this.handleShareFile(project.id)}
-                    className={classNames(styles.actionButton, styles.shareButton)}
-                    disabled={this.state.isProcessing}
-                >
-                    共有
-                </button>
-                <button 
-                    onClick={() => this.handleDeleteFile(project, thumbnailFiles)}
-                    className={classNames(styles.actionButton, styles.deleteButton)}
-                    disabled={this.state.isProcessing}
-                >
-                    削除
-                </button>
-            </div>
+    renderFileItem(project, thumbnailFiles) {
+        const thumbnail = thumbnailFiles.find(
+            thumb => thumb.name === `Scratch-Thumbnail-${project.id}.png`
+        );
 
-            {/* ここにアクセス権限設定のドロップダウンを追加 */}
-            <div className={styles.permissionDropdown}>
-                <label>アクセス権限: </label>
-                <select
-                    value={this.state.sharePermission}
-                    onChange={(e) => this.updateFilePermission(project.id, e.target.value)}
-                    disabled={this.state.isProcessing}
-                >
-                    <option value="reader">閲覧のみ</option>
-                    <option value="writer">編集可能</option>
-                    <option value="owner">所有者</option>
-                </select>
+        return (
+            <div key={project.id} className={styles.fileItem}>
+                <div className={styles.thumbnailContainer}>
+                    {thumbnail ? (
+                        <img 
+                            src={`https://drive.google.com/thumbnail?id=${thumbnail.id}&sz=w300`}
+                            alt="プロジェクトサムネイル"
+                            className={styles.thumbnail}
+                        />
+                    ) : (
+                        <div className={styles.thumbnailPlaceholder}>
+                            サムネイルなし
+                        </div>
+                    )}
+                </div>
+                
+                <h3 className={styles.fileName}>
+                    {project.name.replace('.s4s.txt', '')}
+                </h3>
+                
+                {this.renderShareLink(project.id)}
+                
+                <div className={styles.buttonGroup}>
+                    <button 
+                        onClick={() => this.handleLoadFile(project)}
+                        className={styles.actionButton}
+                        disabled={this.state.isProcessing}
+                    >
+                        読み込む
+                    </button>
+                    <button 
+                        onClick={() => this.handleReplaceFile(project)}
+                        className={styles.actionButton}
+                        disabled={this.state.isProcessing}
+                    >
+                        上書き
+                    </button>
+                    <button 
+                        onClick={() => this.openShareModal(project.id)}
+                        className={classNames(styles.actionButton, styles.shareButton)}
+                        disabled={this.state.isProcessing}
+                    >
+                        共有
+                    </button>
+                    <button 
+                        onClick={() => this.handleDeleteFile(project, thumbnailFiles)}
+                        className={classNames(styles.actionButton, styles.deleteButton)}
+                        disabled={this.state.isProcessing}
+                    >
+                        削除
+                    </button>
+                </div>
             </div>
-        </div>
-    );
-}
-
-updateFilePermission = async (fileId, permission) => {
-    this.setState({isProcessing: true});
-    try {
-        await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}/permissions/anyone`, {
-            method: "PATCH",
-            headers: {
-                Authorization: `Bearer ${this.state.accessToken}`,
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                role: permission,
-            }),
-        });
-        alert("success", "アクセス権限を更新しました");
-    } catch (error) {
-        console.error("権限更新エラー:", error);
-        alert("error", "アクセス権限の更新に失敗しました");
-    } finally {
-        this.setState({isProcessing: false});
+        );
     }
-};
+
     renderShareLink(fileId) {
         const SHORT_URL = "https://s4.rf.gd/";
         
@@ -391,6 +382,239 @@ updateFilePermission = async (fileId, permission) => {
         );
     }
 
+    // 共有モーダルを開く
+    openShareModal = (fileId) => {
+        this.setState({
+            isShareModalOpen: true,
+            currentSharingFileId: fileId,
+            emailPermissions: [{ email: '', role: 'reader' }],
+            linkPermission: 'reader',
+            groupPermission: 'reader'
+        });
+    };
+
+    // 共有モーダルを閉じる
+    closeShareModal = () => {
+        if (!this.state.isProcessing) {
+            this.setState({ isShareModalOpen: false });
+        }
+    };
+
+    // オーバーレイクリックで共有モーダルを閉じる
+    handleShareOverlayClick = (e) => {
+        if (!this.state.isProcessing && this.shareModalContentRef.current && 
+            !this.shareModalContentRef.current.contains(e.target)) {
+            this.closeShareModal();
+        }
+    };
+
+    // メール権限入力欄を追加
+    addEmailPermission = () => {
+        this.setState(prevState => ({
+            emailPermissions: [...prevState.emailPermissions, { email: '', role: 'reader' }]
+        }));
+    };
+
+    // メール権限入力欄を更新
+    updateEmailPermission = (index, field, value) => {
+        this.setState(prevState => ({
+            emailPermissions: prevState.emailPermissions.map((item, i) => 
+                i === index ? { ...item, [field]: value } : item
+            )
+        }));
+    };
+
+    // メール権限入力欄を削除
+    removeEmailPermission = (index) => {
+        this.setState(prevState => ({
+            emailPermissions: prevState.emailPermissions.filter((_, i) => i !== index)
+        }));
+    };
+
+    // 権限設定を適用
+    applyPermissions = async () => {
+        this.setState({ isProcessing: true });
+        try {
+            const { currentSharingFileId, accessToken, emailPermissions, linkPermission } = this.state;
+
+            // メールごとの権限設定
+            for (const permission of emailPermissions) {
+                if (permission.email.trim()) {
+                    await this.setFilePermission(
+                        currentSharingFileId, 
+                        accessToken, 
+                        permission.email.trim(), 
+                        permission.role
+                    );
+                }
+            }
+
+            // リンクを知っている全員への権限設定
+            await fetch(`https://www.googleapis.com/drive/v3/files/${currentSharingFileId}/permissions`, {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${accessToken}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    type: "anyone",
+                    role: linkPermission,
+                }),
+            });
+
+            this.showAlert("success", "共有設定を適用しました");
+            this.closeShareModal();
+        } catch (error) {
+            console.error("権限設定エラー:", error);
+            this.showAlert("error", "共有設定の適用に失敗しました");
+        } finally {
+            this.setState({ isProcessing: false });
+        }
+    };
+
+    // ファイル権限設定メソッド
+    async setFilePermission(fileId, accessToken, email, role = "reader") {
+        const response = await fetch(
+            `https://www.googleapis.com/drive/v3/files/${fileId}/permissions`,
+            {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${accessToken}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    type: "user",
+                    role: role,
+                    emailAddress: email
+                }),
+            }
+        );
+
+        if (!response.ok) {
+            throw new Error(await response.text());
+        }
+        return await response.json();
+    }
+
+    // 共有モーダルのレンダリング
+    renderShareModal() {
+        if (!this.state.isShareModalOpen) return null;
+
+        return (
+            <div className={styles.modalOverlay} onClick={this.handleShareOverlayClick}>
+                <div className={styles.modalContent} ref={this.shareModalContentRef} style={{maxWidth: '500px'}}>
+                    <div className={styles.modalHeader}>
+                        <h2>共有設定</h2>
+                        <button 
+                            onClick={this.closeShareModal} 
+                            className={styles.closeButton}
+                            disabled={this.state.isProcessing}
+                        >
+                            ×
+                        </button>
+                    </div>
+                    
+                    <div className={styles.modalBody}>
+                        <div className={styles.shareSection}>
+                            <h3>ユーザーごとの共有</h3>
+                            {this.state.emailPermissions.map((permission, index) => (
+                                <div key={index} className={styles.permissionRow}>
+                                    <input
+                                        type="email"
+                                        placeholder="メールアドレス"
+                                        value={permission.email}
+                                        onChange={(e) => this.updateEmailPermission(index, 'email', e.target.value)}
+                                        className={styles.emailInput}
+                                        disabled={this.state.isProcessing}
+                                    />
+                                    <select
+                                        value={permission.role}
+                                        onChange={(e) => this.updateEmailPermission(index, 'role', e.target.value)}
+                                        className={styles.roleSelect}
+                                        disabled={this.state.isProcessing}
+                                    >
+                                        <option value="reader">閲覧可能</option>
+                                        <option value="writer">編集可能</option>
+                                    </select>
+                                    {this.state.emailPermissions.length > 1 && (
+                                        <button
+                                            onClick={() => this.removeEmailPermission(index)}
+                                            className={styles.removeButton}
+                                            disabled={this.state.isProcessing}
+                                        >
+                                            ×
+                                        </button>
+                                    )}
+                                </div>
+                            ))}
+                            <button
+                                onClick={this.addEmailPermission}
+                                className={styles.addButton}
+                                disabled={this.state.isProcessing}
+                            >
+                                ＋
+                            </button>
+                        </div>
+
+                        <div className={styles.shareSection}>
+                            <h3>リンクを知っている全員</h3>
+                            <div className={styles.permissionRow}>
+                                <select
+                                    value={this.state.linkPermission}
+                                    onChange={(e) => this.setState({ linkPermission: e.target.value })}
+                                    className={styles.roleSelect}
+                                    disabled={this.state.isProcessing}
+                                >
+                                    <option value="reader">閲覧のみ</option>
+                                    <option value="writer">編集可能</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className={styles.shareSection}>
+                            <h3>グループ内</h3>
+                            <div className={styles.permissionRow}>
+                                <select
+                                    value={this.state.groupPermission}
+                                    onChange={(e) => this.setState({ groupPermission: e.target.value })}
+                                    className={styles.roleSelect}
+                                    disabled={this.state.isProcessing}
+                                >
+                                    <option value="reader">閲覧のみ</option>
+                                    <option value="writer">編集可能</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div className={styles.modalFooter}>
+                        <button
+                            onClick={this.applyPermissions}
+                            className={styles.applyButton}
+                            disabled={this.state.isProcessing}
+                        >
+                            適用
+                        </button>
+                        <button
+                            onClick={this.closeShareModal}
+                            className={styles.cancelButton}
+                            disabled={this.state.isProcessing}
+                        >
+                            キャンセル
+                        </button>
+                    </div>
+                    
+                    {this.state.isProcessing && (
+                        <div className={styles.processingOverlay}>
+                            <div className={styles.spinner}></div>
+                            <div>処理中...</div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
     render() {
         return (
             <div>
@@ -409,6 +633,7 @@ updateFilePermission = async (fileId, permission) => {
                 </Button>
                 
                 {this.renderModal()}
+                {this.renderShareModal()}
             </div>
         );
     }
@@ -419,7 +644,8 @@ updateFilePermission = async (fileId, permission) => {
         this.setState({
             accessToken: null,
             currentAccountEmail: null,
-            currentAccountName: null
+            currentAccountName: null,
+            files: []
         });
         localStorage.removeItem('googleDriveAccessToken');
         localStorage.removeItem('googleDriveAccountEmail');
@@ -430,12 +656,12 @@ updateFilePermission = async (fileId, permission) => {
         this.setState({isProcessing: true});
         try {
             await this.saveToGoogleDrive(null, `${this.state.newFileName}.s4s.txt`, this.state.sharePermission);
-            alert("success", "新規保存しました");
+            this.showAlert("success", "新規保存しました");
             this.setState({showNewFileInput: false});
             this.fetchDriveFiles(this.state.accessToken);
         } catch (error) {
             console.error("新規保存エラー:", error);
-            alert("error", "新規保存に失敗しました");
+            this.showAlert("error", "新規保存に失敗しました");
         } finally {
             this.setState({isProcessing: false});
         }
@@ -459,11 +685,11 @@ updateFilePermission = async (fileId, permission) => {
             this.setState({isProcessing: true});
             try {
                 await this.saveToGoogleDrive(project.id, project.name);
-                alert("success", "上書き保存しました");
+                this.showAlert("success", "上書き保存しました");
                 this.fetchDriveFiles(this.state.accessToken);
             } catch (error) {
                 console.error("ファイル上書きエラー:", error);
-                alert("error", "ファイルの上書きに失敗しました");
+                this.showAlert("error", "ファイルの上書きに失敗しました");
             } finally {
                 this.setState({isProcessing: false});
             }
@@ -493,11 +719,11 @@ updateFilePermission = async (fileId, permission) => {
                     await this.deleteFile(thumbnailToDelete.id);
                 }
                 
-                alert("success", "ファイルを削除しました");
+                this.showAlert("success", "ファイルを削除しました");
                 this.fetchDriveFiles(this.state.accessToken);
             } catch (error) {
                 console.error("削除エラー:", error);
-                alert("error", "ファイルの削除に失敗しました");
+                this.showAlert("error", "ファイルの削除に失敗しました");
             } finally {
                 this.setState({isProcessing: false});
             }
@@ -508,8 +734,8 @@ updateFilePermission = async (fileId, permission) => {
         if (this.state.isProcessing) return;
         
         navigator.clipboard.writeText(text)
-            .then(() => alert("success", "リンクをクリップボードにコピーしました"))
-            .catch(() => alert("error", "リンクのコピーに失敗しました"));
+            .then(() => this.showAlert("success", "リンクをクリップボードにコピーしました"))
+            .catch(() => this.showAlert("error", "リンクのコピーに失敗しました"));
     };
 
     async deleteFile(fileId) {
@@ -526,6 +752,10 @@ updateFilePermission = async (fileId, permission) => {
     }
 
     async saveToGoogleDrive(fileId, fileName, permission = 'reader') {
+        if (!window.vm) {
+            throw new Error("VMが初期化されていません");
+        }
+
         const blob = await window.vm.saveProjectSb3();
         
         const metadata = {
@@ -606,18 +836,25 @@ updateFilePermission = async (fileId, permission) => {
                     "Content-Type": "application/json",
                 },
                 body: JSON.stringify({
-                    role: permission, // ここで公開設定を使用
+                    role: permission,
                     type: "anyone",
                 }),
             });
         }
+
+        return fileData;
     }
 
     getProjectThumbnail() {
-        return new Promise(resolve => {
-            window.vm.renderer.requestSnapshot(uri => {
-                resolve(uri);
-            });
+        return new Promise((resolve) => {
+            if (window.vm && window.vm.renderer && window.vm.renderer.requestSnapshot) {
+                window.vm.renderer.requestSnapshot(uri => {
+                    resolve(uri);
+                });
+            } else {
+                // デフォルトのサムネイル
+                resolve('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==');
+            }
         });
     }
 }
@@ -627,7 +864,9 @@ GoogleDriveSave.propTypes = {
     showAlert: PropTypes.func.isRequired,
     projectTitle: PropTypes.string
 };
+
 const mapStateToProps = state => ({
     projectTitle: state.scratchGui.projectTitle
 });
+
 export default connect(mapStateToProps)(GoogleDriveSave);