Recently Picked Emoji Functionality

[syedsadiqali]

Hi @DCzajkowski, I have recently used this in some project, and i have extended the functionality to include a functionality to update recent emojis used by the into the recent group, it'll not update the file but it'll just take those emoji from either database or localStorage.

should i add a pull request for that?? will that be good ??

[DCzajkowski]

Can this be implemented easily without modifying the library? I think it should be, right? If so, I would not make a PR, but you can post your solution on CodePen/JSFiddle/CodeSandbox and link it here for others to use :)

[syedsadiqali]

sure, i'll link it here, may be next Sunday. thanks for reply. but can i ask why this can't be merged with the library itself, this will just increase the usability of the library ??

[DCzajkowski]

It's more like: if something can be done already, I don't see a point in baking it into core. I tried to make this library as lightweight and as customizable as possible. Since you are able to implement your feature without modifying the library, I think I have achieved my goal. 😉

The problem with adding this feature is what if someone want to use IndexedDB or cookies instead of LocalStorage? What if someone is using it in a webview and doesn't have an access to localstorage? What if someone wants to hold the state in vuex instead? Current implementation of the library gives this flexibility.

Unless there are some things we can improve, let me know 😉

[syedsadiqali]

I got your point, but even I'm not depending on Localstorage, and I have extended the functionality of your src in my app, I'm not using it as a mom package.

I can't use it as is, i have to change things and use it as a custom Code in my app.

I hope you get the point.

On Mon, 23 Dec, 2019, 3:34 AM Dariusz Czajkowski, notifications@github.com wrote:

It's more like: if something can be done already, I don't see a point in baking it into core. I tried to make this library as lightweight and as customizable as possible. Since you are able to implement your feature without modifying the library, I think I have achieved my goal. 😉

The problem with adding this feature is what if someone want to use IndexedDB or cookies instead of LocalStorage? What if someone is using it in a webview and doesn't have an access to localstorage? What if someone wants to hold the state in vuex instead? Current implementation of the library gives this flexibility.

Unless there are some things we can improve, let me know 😉

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/DCzajkowski/vue-emoji-picker/issues/17?email_source=notifications&email_token=AEZSN4CD4AOKABNDZNRVDFTQZ7P7PA5CNFSM4J6LV3O2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHP2XDI#issuecomment-568306573, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEZSN4GVAWWBCOQABS7D4A3QZ7P7PANCNFSM4J6LV3OQ .

[DCzajkowski]

I have implemented it for you without modifying the library here. I hope it helps.

I have implemented it using Vuex so that you have a good idea of how you can export your code into a separate module and have recent emojis used across your app 😉

[syedsadiqali]

Hi @DCzajkowski , I will have a look, thanks for your time.

[DCzajkowski]

I'll close this. If you have any questions please don't hesitate to ask 😉

[sherifmayika]

Hi @DCzajkowski, @syedsadiqali, @Edza, @calebbergman,

I have implemented this with partial success. I get everything loaded, except "RECENT" not added to the emoji list. Your help is greatly appreciated.

//my store/index.js

`import recentEmojis from "./modules/recentEmojis";

Vue.use(Vuex);

export default new Vuex.Store({ modules: { recentEmojis, },`

// store//modules/recentEmojis/index.js

` / A map of default emojis. It is included in the library and can be imported directly. /

export const defaultEmojis = { "Frequently used": { thumbs_up: "👍", red_hreat: "❤️", backhand_index_pointing_down: "👇", "-1": "👎", }, People: { smile: "😄",
}, Nature: {
rainbow: "🌈", ocean: "🌊", }, Objects: {
smoking: "🚬",
tomato: "🍅", corn: "🌽", }, Places: {
police_car: "🚓",
triangular_flag_on_post: "🚩", }, Symbols: { keycap_ten: "🔟", heavy_plus_sign: "➕", small_blue_diamond: "🔹", }, };' ' / A helper function, since the name is not returned in the append function / const getName = (emoji) => { console.log("getName"); const emojiMap = Object.values(defaultEmojis).reduce( (a, b) => ({ ...a, ...b }), {} );

const object = Object.entries(emojiMap).find(
  // eslint-disable-next-line no-unused-vars
  ([_name, value]) => value === emoji
);

return object ? object[0] : null; };

/ A Vuex module to include in Vuex. Its state can be persisted, etc. / // eslint-disable-next-line no-unused-vars

export default { namespaced: true, defaultEmojis,

state: { recentlyUsedEmojis: [], }, mutations: { recentlyUsedEmojis: (state, recentlyUsedEmojis) => (state.recentlyUsedEmojis = recentlyUsedEmojis), }, actions: { addEmojiToRecent: ({ state, commit }, emoji) => {

  const name = getName(emoji);

  const rest = state.recentlyUsedEmojis
    .map(
      // eslint-disable-next-line no-unused-vars
      ([_name, value]) => value
    )
    .includes(emoji)
    ? state.recentlyUsedEmojis.filter(
        // eslint-disable-next-line no-unused-vars
        ([_name, value]) => value !== emoji
      )
    : state.recentlyUsedEmojis.length > 5
    ? state.recentlyUsedEmojis.slice(0, -1)
    : state.recentlyUsedEmojis;

  commit("recentlyUsedEmojis", [[name, emoji], ...rest]);
},

}, getters: { recentlyUsedEmojis: (state) => state.recentlyUsedEmojis.length ? { Recent: Object.fromEntries(state.recentlyUsedEmojis) } : {}, }, } in my vue instance @ src/pages/edtor.default.vue ... <emoji-picker :emoji-table="emojis" @emoji="append" :search="search" ....

Githubissues.

Githubissues is a development platform for aggregating issues.