Finder.tsx

import * as React from "react";
import { Stack, Frame, PropertyControls, ControlType } from "framer";
import { Content } from "./content";
import { FinderGridInstructions } from "./canvas";


export class FinderGrid extends React.Component<Props> {

    // Set default properties
    static defaultProps = {
        width: 500,
        height: 400,
        source: "Generic",
        genericJSON: [
            {type: 'folder', name: 'All hands'}
            {type: 'folder', name: 'Design'}
            {type: 'folder', name: 'Events'}
            {type: 'folder', name: 'Marketing'}
            {type: 'file', name: 'Website design.sketch'}
            {type: 'folder', name: 'Sales'}
            {type: 'folder', name: 'Team building'}
            {type: 'file', name: 'V2.framerx'}
            {type: 'folder', name: 'Zachs stuff'}
        ],
        path: "",
        tileSize: 110,
        getToken: "https://www.dropbox.com/oauth2/authorize?client_id=mkgjyxwdgz9cjff&response_type=token&redirect_uri=http://127.0.0.1:4567"
        accessToken: "",
    }

    // Items shown in property panel
    static propertyControls: PropertyControls = {
        source: { 
            type: ControlType.SegmentedEnum, 
            title: "Source",
            options: ["Generic", "Dropbox"],
        },
        getToken: { 
            type: ControlType.String, 
            title: "Get token →",
            placeholder: "Why did you delete me",
            hidden(props) {
                return props.source !== "Dropbox"
            },
        },
        accessToken: { 
            type: ControlType.String, 
            title: "Put it here →",
            placeholder: "Paste token here...",
            hidden(props) {
                return props.source !== "Dropbox"
            },
        },
        path: { 
            type: ControlType.String, 
            title: "Start path",
            hidden(props) {
                return props.source !== "Dropbox"
            },
        },
        tileSize: {
            type: ControlType.Number,
            title: "Tile size",
            max: 300,
            min: 50,
            step: 10,
        },
    }

    state = {
        currentPath: "";
        contentList: [];
        selectedItem: "";
    }


    dropboxAPI = () => {

        let cleanToken;
        if (this.props.accessToken.startsWith("http")) {
            cleanToken = this.props.accessToken.split("=")[1].split("&")[0];
        } else {
            cleanToken = this.props.accessToken;
        }
        
        if (this.props.source === "Dropbox" && cleanToken) { 

            let url = `https://api.dropboxapi.com/2/files/list_folder`;
        
            fetch(url, { 
                method: 'POST',
                headers: {
                    "Authorization": "Bearer " + cleanToken,
                    "Content-Type": "text/plain; charset=dropbox-cors-hack",
                    Accept: "application/json"
                },
                body: JSON.stringify({
                    path: this.state.currentPath,
                    include_has_explicit_shared_members: true,
                })
            })
            .then(response => response.json())
            .then((response) => {
                console.log("Dropbox API called", this.state.currentPath, response.entries);
                if (response.entries) {
                    this.setState({contentList: response.entries});
                }
            })
            .catch(error => {
                console.log("There was an error: ", error);
            });
        } else {

        }
    }

    componentDidMount() {
        this.setState({contentList: this.props.genericJSON});
        if (this.props.source === "Dropbox" && this.props.accessToken ) {
            this.setState({currentPath: this.props.path}, () => this.dropboxAPI());
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.path !== this.props.path || nextProps.source !== this.props.source || nextProps.accessToken !== this.props.accessToken ) {
            if (nextProps.source === "Dropbox") {
                this.setState({currentPath: nextProps.path}, () => this.dropboxAPI());
            } else {
                this.setState({contentList: nextProps.genericJSON})
            }
        }
    }

    handleContentItemClick = (targetName, targetType) => {
        if (this.state.selectedItem === targetName && targetType === "folder" && this.props.source === "Dropbox") {
            let newPath = this.state.currentPath + '/' + targetName;
            this.setState({currentPath: newPath}, () => this.dropboxAPI());
        }
        this.setState({selectedItem: targetName}) 
    }

    handleBackButtonClick = () => {

        const PATH = this.state.currentPath;

        console.log(PATH);
        

        if (PATH !== "") {
            let to = PATH.lastIndexOf('/');
            to = to == -1 ? PATH.length : to;
            let newPath = PATH.substring(0, to);
            this.setState({currentPath: newPath}, () => this.dropboxAPI());
        }
    }

    render() {

        const { width, height, tileSize, source, accessToken } = this.props;

        let contentItems = this.state.contentList.map(item => (
            <div key={item.name} style={itemStyle(tileSize)}>
                <Content
                    width={tileSize}
                    height={tileSize}
                    name={item.name}
                    type={item.type?item.type:item[".tag"]} 
                    folderType={item.shared_folder_id?"Shared folder":"Normal folder"} 
                    fileType={item.name.substr(item.name.lastIndexOf('.') + 1)}
                    dropbox={true}
                    sync="✅" 
                    permission="Edit"
                    isSelected={this.state.selectedItem===item.name} 
                    onClick={this.handleContentItemClick}
                    />
            </div>
        ))

        return (
            <div style={{height: "100%"}}>
                <div style={backButtonStyle()} onClick={this.handleBackButtonClick}>Hey</div>
                { (source === "Dropbox" && !accessToken) ? <FinderGridInstructions z={10} width={width} height={height} /> : "" }
                <div style={gridStyle()}>
                    {contentItems}
                </div>
            </div>
        );
    }
}


function backButtonStyle(): React.CSSProperties {
    return {
        height: "25px",
        width: "35px",
        position: "absolute",
        top: "-30px",
        left: "-200px",
        fontSize: 0,
    };
}

function gridStyle(): React.CSSProperties {
    return {
        height: "100%",
        width: "100%",
        position: "relative",
        fontSize: 0,
        background: "white",
        overflow: "auto",
    };
}

function itemStyle(tileSize): React.CSSProperties {
    return {
        position: "relative",
        display: "inline-block",
        width: `${tileSize}px`,
        height: `${tileSize}px`,
    };
}