From cfee97c2011f0674f2d67dcc3e9514d1c3e73e71 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Wed, 10 Jun 2020 14:10:50 -0700 Subject: [PATCH] Update --- src/Cell.js | 13 ++++---- src/SkinReadme.js | 55 +++++++++++++++++++++++++++++++ src/SkinTable.js | 17 ++++------ src/components/BaseFocusedSkin.js | 35 +++++++------------- 4 files changed, 79 insertions(+), 41 deletions(-) create mode 100644 src/SkinReadme.js diff --git a/src/Cell.js b/src/Cell.js index 263faab3..a8e75336 100644 --- a/src/Cell.js +++ b/src/Cell.js @@ -6,7 +6,7 @@ import * as Utils from "./utils"; import * as Selectors from "./redux/selectors"; import * as Actions from "./redux/actionCreators"; -const Cell = React.memo(props => { +const Cell = React.memo((props) => { const { style, data, @@ -15,7 +15,7 @@ const Cell = React.memo(props => { requestToken, setSelectedSkin, requestUnloadedSkin, - permalinkUrl + permalinkUrl, } = props; const { width, height } = data; React.useEffect(() => { @@ -35,7 +35,6 @@ const Cell = React.memo(props => { ...style, width, height, - backgroundColor: requestToken == null ? "blue" : "magenta" }} /> ); @@ -65,7 +64,7 @@ const mapStateToProps = (state, ownProps) => { const { requestToken, data: skin } = skinDataGetter({ columnCount, rowIndex, - columnIndex + columnIndex, }); const getPermalinkUrlFromHash = Selectors.getPermalinkUrlFromHashGetter( state @@ -73,16 +72,16 @@ const mapStateToProps = (state, ownProps) => { return { requestToken, skin, - permalinkUrl: skin == null ? null : getPermalinkUrlFromHash(skin.hash) + permalinkUrl: skin == null ? null : getPermalinkUrlFromHash(skin.hash), }; }; -const mapDispatchToProps = dispatch => ({ +const mapDispatchToProps = (dispatch) => ({ requestUnloadedSkin(index) { dispatch(Actions.requestUnloadedSkin(index)); }, setSelectedSkin(hash, position) { dispatch(Actions.selectedSkin(hash, position)); - } + }, }); export default connect(mapStateToProps, mapDispatchToProps)(Cell); diff --git a/src/SkinReadme.js b/src/SkinReadme.js new file mode 100644 index 00000000..8920c332 --- /dev/null +++ b/src/SkinReadme.js @@ -0,0 +1,55 @@ +import React from "react"; +import { connect } from "react-redux"; +import * as Actions from "./redux/actionCreators"; + +class SkinReadme extends React.Component { + render() { + if (this.props.focusedFile == null) { + return null; + } + + const { ext, fileName, content } = this.props.focusedFile; + if (content == null) { + return null; + } + return ( +
+

{fileName}

+
+
+ 
{content}
+
+
+
+ ); + } +} + +function mapStateToProps(state) { + return { + zip: state.skinZip, + focusedFile: state.focusedSkinFile, + }; +} + +function mapDispatchToProps(dispatch) { + return { + selectSkinFile(fileName) { + dispatch(Actions.selectSkinFile(fileName)); + }, + }; +} +export default connect(mapStateToProps, mapDispatchToProps)(SkinReadme); diff --git a/src/SkinTable.js b/src/SkinTable.js index 990a29fd..0bb3f7b5 100644 --- a/src/SkinTable.js +++ b/src/SkinTable.js @@ -13,13 +13,13 @@ const SkinTable = ({ windowHeight, skinCount, windowWidth, - getSkinData + getSkinData, }) => { function itemKey({ columnIndex, rowIndex }) { const { requestToken, data: skin } = getSkinData({ columnIndex, rowIndex, - columnCount + columnCount, }); if (skin == null && requestToken == null) { return `empty-cell-${columnIndex}-${rowIndex}`; @@ -45,18 +45,15 @@ const SkinTable = ({ ); }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ skinCount: Selectors.getCurrentSkinCount(state), selectedSkinHash: Selectors.getSelectedSkinHash(state), - getSkinData: Selectors.getSkinDataGetter(state) + getSkinData: Selectors.getSkinDataGetter(state), }); -const mapDispatchToProps = dispatch => ({ +const mapDispatchToProps = (dispatch) => ({ setSelectedSkin(hash, position) { dispatch(Actions.selectedSkin(hash, position)); - } + }, }); -export default connect( - mapStateToProps, - mapDispatchToProps -)(SkinTable); +export default connect(mapStateToProps, mapDispatchToProps)(SkinTable); diff --git a/src/components/BaseFocusedSkin.js b/src/components/BaseFocusedSkin.js index 7c71f703..0a2036aa 100644 --- a/src/components/BaseFocusedSkin.js +++ b/src/components/BaseFocusedSkin.js @@ -1,6 +1,5 @@ import React, { useEffect } from "react"; import WebampComponent from "../WebampComponent"; -import FileExplorer from "../FileExplorer"; import * as Utils from "../utils"; import { SCREENSHOT_HEIGHT, SCREENSHOT_WIDTH } from "../constants"; import { delay } from "rxjs/operators"; @@ -8,6 +7,7 @@ import { Subject, combineLatest, timer, fromEvent, from } from "rxjs"; import Disposable from "../Disposable"; import { search } from "../algolia"; import Metadata from "./Metadata"; +import SkinReadme from "../SkinReadme"; function useSkinData({ hash, skinData, setSkinData }) { useEffect(() => { @@ -16,7 +16,7 @@ function useSkinData({ hash, skinData, setSkinData }) { } // OMG Giant hack. Kill this please. We should be able to get this data from our own server. return from(search(hash, { hitsPerPage: 2, typoTolerance: 0 })).subscribe( - results => { + (results) => { if (results.nbHits.length === 1) { console.error("Failed to get skin data for hash", hash, results); return; @@ -42,7 +42,7 @@ class BaseFocusedSkin extends React.Component { { previewLoaded: false, loaded: false, - transitionComplete: true + transitionComplete: true, }, this._getCenteredState() ); @@ -54,7 +54,7 @@ class BaseFocusedSkin extends React.Component { top: this.props.initialPosition.top, left: this.props.initialPosition.left, width: this.props.initialWidth, - height: this.props.initialHeight + height: this.props.initialHeight, }; } this._webampLoadedEvents = new Subject(); @@ -85,7 +85,7 @@ class BaseFocusedSkin extends React.Component { componentDidMount() { this._disposable.add( - fromEvent(window.document, "keydown").subscribe(e => { + fromEvent(window.document, "keydown").subscribe((e) => { if (e.key === "ArrowRight") { this.props.selectRelativeSkin(1); } else if (e.key === "ArrowLeft") { @@ -128,7 +128,7 @@ class BaseFocusedSkin extends React.Component { top: (windowHeight - SCREENSHOT_HEIGHT) / 2, left: (windowWidth - SCREENSHOT_WIDTH) / 2, height: SCREENSHOT_HEIGHT, - width: SCREENSHOT_WIDTH + width: SCREENSHOT_WIDTH, }; } render() { @@ -146,7 +146,7 @@ class BaseFocusedSkin extends React.Component { position: "fixed", height: SCREENSHOT_HEIGHT, width: SCREENSHOT_WIDTH, - transform + transform, }} > - {false && ( - - )} + {false && } )}
@@ -199,7 +186,7 @@ class BaseFocusedSkin extends React.Component { this.props.initialPosition != null ? 1 : 0, - transition: "opacity 0.2s ease-out" + transition: "opacity 0.2s ease-out", }} onLoad={() => this.setState({ previewLoaded: true })} src={Utils.screenshotUrlFromHash(this.props.hash)} @@ -219,7 +206,7 @@ class BaseFocusedSkin extends React.Component { } } -export default props => { +export default (props) => { const { hash, skinData, setSkinData } = props; useSkinData({ hash, skinData, setSkinData }); return ;