tankonstin-labs / taburette Goto Github PK

    };
}

const { actions, reducer } = songsSlice;
// TODO: review if `toggleSorting` is a copypaste vestige
export const { fetchBegin, fetchSongListSuccess, fetchError, toggleSorting } = actions;
export default reducer;

import React from 'react';
import {createRoot} from 'react-dom/client';
import {Provider} from 'react-redux';
// TODO: Get rid of deprecated functions usage
import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';
// TODO: Restore notifications functionality
// import ReactNotification from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';

import { createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
    releaseDetails: {},
    loading: false,
    error: null,
};

const releaseSlice = createSlice({
    name: 'release',
    initialState,
    reducers: {
        fetchBegin: (state, action) => {
            state.loading = true;
            state.error = null;
        },
        fetchSuccess: (state, action) => {
            state.loading = false;
            state.releaseDetails = action.payload;
        },
        fetchError: (state, action) => {
            state.loading = false;
            state.error = action.payload.error;
        },
    },
});

const { actions, reducer } = releaseSlice;
const { fetchBegin, fetchSuccess, fetchError } = actions;

export function getReleaseDetails(dispatch, getState, {apiConfig}) {
    dispatch(fetchBegin());

    // TODO: remove hardcoded release id
    axios.get(`${apiConfig.url}/releases/12829`)
        .then((res) => {
            dispatch(fetchSuccess(res.data));
        })
        .catch((error) => {
            dispatch(fetchError(error));
        });
}

export default reducer;

          // match the requirements. When no loader matches it will fall
          // back to the "file" loader at the end of the loader list.
          oneOf: [
            // TODO: Merge this config once `image/avif` is in the mime-db (upstream issue)
            // https://github.com/jshttp/mime-db
            {
              test: [/\.avif$/],

            extraArgument: config,
        },
    }),
    devTools: true, // TODO: Prod-prep: disable devtools in production
});

const root = createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        {/* TODO: Restore notifications functionality */}
        {/* <ReactNotification /> */}
        <App />
    </Provider>,

import { changeSearchQuery } from '../../redux/search';
import { ARTIST_QUERY, RELEASE_QUERY, SONG_QUERY, GENRE_QUERY } from '../../redux/search';

// TODO: Replace bogus genres alternatives with fetched from DB
const genreOptions = [
    { value: 'rock', label: 'Rock' },
    { value: 'notrock', label: 'Not Rock' },
];

function SearchOptions(props) {

    return (
        <MDBContainer className="mb-2 pl-0 ml-0">
            <MDBCol md="9" className="pl-0">
                <MDBCard>
                    <p className="h4 text-center py-4">Advanced Search</p>
                    <MDBRow className="ml-2 mr-2 p-3">
                        <MDBCol md="6">
                            <form>
                                <div className="grey-text">
                                    <MDBInput
                                        label="Artist"
                                        onChange={
                                            (event) => {
                                                props.changeSearchQuery(
                                                    ARTIST_QUERY,
                                                    event.target.value,
                                                );
                                            }
                                        }
                                    />
                                    <MDBInput
                                        label="Track"
                                        className='mt-2'
                                        onChange={
                                            (event) => {
                                                props.changeSearchQuery(
                                                    SONG_QUERY,
                                                    event.target.value,
                                                );
                                            }
                                        }
                                    />
                                </div>
                            </form>
                        </MDBCol>
                        <MDBCol md="6">
                            <div className="grey-text">
                                <MDBInput
                                    label="Album"
                                    onChange={
                                        (event) => {
                                            props.changeSearchQuery(
                                                RELEASE_QUERY,
                                                event.target.value,
                                            );
                                        }
                                    }
                                />
                                <Select
                                    className='mt-2'
                                    onChange={
                                        (option) => {
                                            props.changeSearchQuery(
                                                GENRE_QUERY,
                                                option.value,
                                            );
                                        }
                                    }
                                    options={ genreOptions }
                                />
                            </div>
                        </MDBCol>
                    </MDBRow>
                </MDBCard>
            </MDBCol>
        </MDBContainer>
    );
}

const mapStateToProps = (state) => ({});

import React from 'react';
import {createRoot} from 'react-dom/client';
import {Provider} from 'react-redux';
// TODO: Get rid of deprecated functions usage
import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';
// TODO: Restore notifications functionality
// import ReactNotification from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';