-
-
- );
- }
-}
-
-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
-)(Readme);
diff --git a/src/redux/actionCreators.js b/src/redux/actionCreators.js
index dfb5fe0a..ed97f605 100644
--- a/src/redux/actionCreators.js
+++ b/src/redux/actionCreators.js
@@ -42,3 +42,11 @@ export function requestedAboutPage() {
export function selectRelativeSkin(offset) {
return { type: "SELECT_RELATIVE_SKIN", offset };
}
+
+export function openFileExplorer() {
+ return { type: "OPEN_FILE_EXPLORER" };
+}
+
+export function closeFileExlporer() {
+ return { type: "CLOSE_FILE_EXPLORER" };
+}
diff --git a/src/redux/epics.js b/src/redux/epics.js
index 41114360..80e15839 100644
--- a/src/redux/epics.js
+++ b/src/redux/epics.js
@@ -3,7 +3,7 @@ import { of, from, empty } from "rxjs";
import * as Actions from "./actionCreators";
import * as Selectors from "./selectors";
import * as Utils from "../utils";
-import { filter, switchMap, map } from "rxjs/operators";
+import { filter, switchMap, map, ignoreElements } from "rxjs/operators";
import { search } from "../algolia";
const urlChangedEpic = actions =>
@@ -18,7 +18,11 @@ const urlChangedEpic = actions =>
if (action.location.pathname.startsWith("/skin/")) {
const segments = action.location.pathname.split("/");
- return of(Actions.selectedSkin(segments[2]));
+ const actions = [Actions.selectedSkin(segments[2])];
+ if (segments[3] === "files") {
+ actions.push(Actions.selectSkinFile(segments[4]));
+ }
+ return of(...actions);
}
return of(Actions.searchQueryChanged(query || ""));
})
@@ -34,11 +38,24 @@ const selectedSkinEpic = actions =>
const JSZip = await import("jszip");
return JSZip.loadAsync(blob);
}),
- map(zip => Actions.loadedSkinZip(zip))
+ switchMap(zip => {
+ return of(Actions.loadedSkinZip(zip), {
+ type: "SELECTED_SKIN_README"
+ });
+ })
);
})
);
+const loadedSkinZipEpic = actions =>
+ actions.pipe(
+ filter(action => action.type === "LOADED_SKIN_ZIP"),
+ switchMap(action => {
+ // If a file is focused, but not yet loaded, try to load it now?
+ return empty();
+ })
+ );
+
const focusedSkinFileEpic = (actions, states) =>
actions.pipe(
filter(action => action.type === "SELECTED_SKIN_FILE_TO_FOCUS"),
@@ -46,7 +63,7 @@ const focusedSkinFileEpic = (actions, states) =>
// TODO: Ensure this is never called with the wrong zip. Should this live in the "got zip" closure?
const { skinZip } = states.value;
if (skinZip == null) {
- // TODO: Should this throw?
+ // We don't have the skin zip yet. We trust that selectedSkinEpic will call this.
return empty();
}
@@ -61,6 +78,41 @@ const focusedSkinFileEpic = (actions, states) =>
})
);
+const selectSkinReadmeEpic = (actions, states) =>
+ actions.pipe(
+ filter(action => action.type === "SELECTED_SKIN_README"),
+ switchMap(() => {
+ // TODO: Ensure this is never called with the wrong zip. Should this live in the "got zip" closure?
+ const { skinZip } = states.value;
+ if (skinZip == null) {
+ return empty();
+ }
+
+ const readmeFileName = Object.keys(skinZip.files).find(filename => {
+ return (
+ filename.match(/\.txt$/) &&
+ ![
+ "genex.txt",
+ "genexinfo.txt",
+ "gen_gslyrics.txt",
+ "region.txt",
+ "pledit.txt",
+ "viscolor.txt",
+ "winampmb.txt",
+ "gen_ex help.txt",
+ "mbinner.txt"
+ // Skinning Updates.txt ?
+ ].some(name => filename.match(new RegExp(name, "i")))
+ );
+ });
+ if (readmeFileName == null) {
+ return empty();
+ }
+
+ return of(Actions.selectSkinFile(readmeFileName));
+ })
+ );
+
const searchEpic = actions =>
actions.pipe(
filter(action => action.type === "SEARCH_QUERY_CHANGED"),
@@ -106,5 +158,7 @@ export default combineEpics(
selectedSkinEpic,
focusedSkinFileEpic,
randomSkinEpic,
- selectRelativeSkinEpic
+ selectRelativeSkinEpic,
+ selectSkinReadmeEpic,
+ loadedSkinZipEpic
);
diff --git a/src/redux/selectors.js b/src/redux/selectors.js
index ac6a6269..bf91b7c1 100644
--- a/src/redux/selectors.js
+++ b/src/redux/selectors.js
@@ -70,13 +70,21 @@ export const getUrl = createSelector(
getActiveContentPage,
getSelectedSkinHash,
getSearchQuery,
- (activeContentPage, hash, query) => {
+ getFileExplorerOpen,
+ getFocusedSkinFile,
+ (activeContentPage, hash, query, fileExplorerOpen, focusedSkinFile) => {
if (activeContentPage === ABOUT_PAGE) {
return "/about/";
}
if (hash) {
// TODO: Add a human readable version
- return Utils.getPermalinkUrlFromHash(hash);
+ const skinUrl = Utils.getPermalinkUrlFromHash(hash);
+ if (fileExplorerOpen && focusedSkinFile) {
+ return `${skinUrl}files/${encodeURIComponent(
+ focusedSkinFile.fileName
+ )}`;
+ }
+ return skinUrl;
} else if (query) {
return `/?query=${encodeURIComponent(query)}`;
}
@@ -102,3 +110,11 @@ export function getActiveContentPage(state) {
export function getSkins(state) {
return state.skins;
}
+
+export function getFileExplorerOpen(state) {
+ return state.fileExplorerOpen;
+}
+
+export function getFocusedSkinFile(state) {
+ return state.focusedSkinFile;
+}
diff --git a/src/redux/store.js b/src/redux/store.js
index 17fbfe72..37f60db9 100644
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -1,82 +1,9 @@
import { createStore as createReduxStore, applyMiddleware } from "redux";
import { createEpicMiddleware } from "redux-observable";
-import skins from "../skins.json";
import * as Selectors from "./selectors";
import rootEpic from "./epics";
-import { ABOUT_PAGE } from "../constants";
+import reducer from "./reducer";
-const defaultState = {
- searchQuery: null,
- selectedSkinHash: null,
- selectedSkinPosition: null,
- matchingHashes: null,
- skinZip: null,
- focusedSkinFile: null,
- activeContentPage: null,
- skins
-};
-
-function reducer(state = defaultState, action) {
- switch (action.type) {
- case "SELECTED_SKIN":
- return {
- ...state,
- selectedSkinHash: action.hash,
- selectedSkinPosition: action.position,
- skinZip: null
- };
- case "CLOSE_MODAL":
- return {
- ...state,
- selectedSkinHash: null,
- selectedSkinPosition: null,
- skinZip: null,
- activeContentPage: null
- };
- case "SEARCH_QUERY_CHANGED":
- return {
- ...state,
- searchQuery: action.query,
- selectedSkinHash: null,
- selectedSkinPosition: null
- };
- case "GOT_NEW_MATCHING_HASHES":
- return {
- ...state,
- matchingHashes: action.matchingHashes
- };
- case "LOADED_SKIN_ZIP":
- return {
- ...state,
- skinZip: action.zip
- };
- case "SELECTED_SKIN_FILE_TO_FOCUS": {
- return {
- ...state,
- focusedSkinFile: {
- content: null,
- ext: action.ext,
- fileName: action.fileName
- }
- };
- }
- case "GOT_FOCUSED_SKIN_FILE":
- return {
- ...state,
- focusedSkinFile: {
- ...state.focusedSkinFile,
- content: action.content
- }
- };
- case "REQUESTED_ABOUT_PAGE":
- return {
- ...state,
- activeContentPage: ABOUT_PAGE
- };
- default:
- return state;
- }
-}
export function createStore() {
const epicMiddleware = createEpicMiddleware();
diff --git a/todo.md b/todo.md
index 1aa8b66a..cc0afefd 100644
--- a/todo.md
+++ b/todo.md
@@ -1,13 +1,16 @@
# TODO
-- Add archive.org link?
-- Sort skins by... something? (Twitter likes?)
-- Scroll is not locked in overlay mode on ios
-- Fix about page on mobile
-- Fix animation for about page overlay fade in
-- "No results" page
+## Blocking
+
- Figure out how to get prerendering to work for Facebook
- Waiting on Netlify
+
+# Future
+
+- Add archive.org link?
+- Scroll is not locked in overlay mode on ios
+- Fix animation for about page overlay fade in
+- "No results" page
- Setup Sentry
- Restore focus when leaving the modal
- Add keyboard navigation to table
@@ -32,7 +35,6 @@
## Requires a server
-- Add an opengraph preview image URL to skin permalinks
- Drag in a skin to upload!
- We should detect if we have it or not
- Allow users to add tags/author info
{this._renderFocusedFile()}
-